Share
Quando alcuni anni fa Loren Brichter ha introdotto l'idea di "pull to refresh" in Tweetie 2, non è passato molto tempo prima che gli sviluppatori iniziassero ad adottare questo concetto ingegnoso e intuitivo. Anche se Twitter ora possiede il brevetto sul concetto di "pull to refresh", questo non ha impedito a Apple di introdurre il UIRefreshControl classe in iOS 6. Questo nuovo UIControl sottoclasse rende banale aggiungere un controllo "pull to refresh" a qualsiasi controller di visualizzazione tabella in iOS 6.
Il riferimento di classe di UIRefreshControl è breve, suggerendo quanto sia facile iniziare con questa aggiunta del framework UIKit. Il UIRefreshControl la classe discende direttamente da UIControl, il che significa che l'installazione di un'istanza di UIRefreshControl non è molto diverso dalla creazione e configurazione di qualsiasi altro controllo UIKit. Dopo aver istanziato un'istanza di UIRefreshControl classe, lo assegni al nuovo refreshControl proprietà di un oggetto controller vista tabella (UITableViewController o una sottoclasse di esso). Il controller di visualizzazione tabella si occupa di posizionare e visualizzare correttamente il controllo di aggiornamento. Come con qualsiasi altro UIControl sottoclasse, alleghi una coppia azione-bersaglio a un evento specifico, UIControlEventValueChanged in caso di UIRefreshControl.
Questo non sarebbe un tutorial su Mobiletuts + senza un esempio che illustri come usare il UIRefreshControl classe in un progetto. Nel resto di questo tutorial, ti mostrerò come compilare una visualizzazione tabella con un elenco di tweet estratti dall'API di ricerca di Twitter. La richiesta viene inviata all'API di ricerca di Twitter quando l'utente apre la vista tabella dow: pull-to-refresh.
L'applicazione che stiamo per compilare query sull'API di ricerca Twitter per tweets su sviluppo iOS. La richiesta viene inviata all'API di ricerca di Twitter quando l'utente apre la vista tabella, rivelando il controllo di aggiornamento. Utilizzeremo la fantastica libreria di AFNetworking per inviare la nostra richiesta all'API di ricerca di Twitter. AFNetworking ci aiuterà anche a scaricare e visualizzare in modo asincrono le immagini dei profili.
Crea un nuovo progetto in Xcode selezionando il Applicazione vuota modello dall'elenco di modelli (Figura 1). Dai un nome alla tua domanda Pull-to-Refresh, inserire un identificativo aziendale, impostare i phone per la famiglia di dispositivi e controllare Utilizzare il conteggio di riferimento automatico. Il resto delle caselle di controllo può essere lasciato deselezionato per questo progetto (figura 2). Dillo a Xcode dove vuoi salvare il progetto e premi il Creare pulsante.
Installare AFNetworking usando Cocoapods è un gioco da ragazzi. Tuttavia, in questo tutorial, ti mostrerò come aggiungere manualmente la libreria AFNetworking a un progetto Xcode per assicurarci che siamo tutti sulla stessa pagina. Comunque non è così difficile.
Scarica l'ultima versione stabile della libreria dalla sua pagina del progetto GitHub, estrai l'archivio e trascina la cartella denominata AFNetworking al tuo progetto Xcode. Assicurati che la casella di controllo sia etichettata Copia gli elementi nella cartella del gruppo di destinazione (se necessario) viene controllato e ricontrollare che la libreria sia stata aggiunta al Pull-to-Refresh obiettivo (figura 3).
La libreria AFNetworking si basa su due framework che non sono collegati per default a un nuovo progetto Xcode, (1) i framework System Configuration e (2) Mobile Core Services. Seleziona il tuo progetto nel Project Navigator, scegli il Tirare per aggiornare bersaglio dalla lista di obiettivi, e aprire il Costruisci fasi scheda in alto. Espandi il Collega binario con le librerie cassetto e aggiungi entrambe le strutture facendo clic sul pulsante più (figura 4).
Per finire, aggiungi una dichiarazione di importazione per entrambi i framework e AFNetworking al file di intestazione precompilato dei progetti come mostrato nello snippet seguente. Ciò renderà più semplice lavorare con AFNetworking poiché non è necessario aggiungere una dichiarazione di importazione a ogni classe che vogliamo usare la libreria.
// // Intestazione prefisso per tutti i file di origine della destinazione "Pull to Refresh" nel progetto "Pull to Refresh" // #import#ifndef __IPHONE_3_0 #warning "Questo progetto utilizza funzionalità disponibili solo in iOS SDK 3.0 e versioni successive." #endif #ifdef __OBJC__ #import #importare #importare #importare #import "AFNetworking.h" #endif
Il UIRefreshControl è progettato per funzionare in combinazione con un oggetto controller di visualizzazione tabella. Crea un nuovo UITableViewController sottoclasse (File> Nuovo> File ... ) scegliendo il Classe Objective-C modello dall'elenco di modelli (figura 5). Dai un nome alla nuova classe MTTweetsViewController e ricontrollare che è un UITableViewController sottoclasse. Dì a Xcode che non dovrebbe creare un file pennino per la nuova classe controller deselezionando la casella di controllo etichettata Con XIB per l'interfaccia utente (figura 6). Specificare un percorso per salvare la nuova classe e fare clic su Creare pulsante.
Prima di poter aggiungere il controllo di aggiornamento al controller di visualizzazione tabella, è necessario creare un'istanza del nuovo MTTweetsViewController classe. Aggiorna il applicazione: didFinishLaunchingWithOptions: metodo in MTAppDelegate.m come mostrato di seguito. L'implementazione non dovrebbe riservare sorprese. Inizializziamo un'istanza di MTTweetsViewController classe e impostarlo come controller della vista radice della finestra dell'applicazione. Non dimenticare di aggiungere una dichiarazione di importazione nella parte superiore di MTAppDelegate.m per importare il file di intestazione del file MTTweetsViewController classe.
- (BOOL) application: (applicazione UIApplication *) didFinishLaunchingWithOptions: (NSDictionary *) launchOptions // Inizializza Tweet Visualizza controller MTTweetsViewController * vc = [[MTTweetsViewController alloc] initWithStyle: UITableViewStylePlain]; // Initialize Window self.window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] bound]]; // Configure Window [self.window setBackgroundColor: [UIColor whiteColor]]; [self.window setRootViewController: vc]; // Rendi chiave e visibile [self.window makeKeyAndVisible]; return YES;
#import "MTTweetsViewController.h"
Se esegui l'applicazione in iPhone Simulator, dovresti vedere una vista tabella vuota. Il controllo di aggiornamento è aggiunto nel viewDidLoad metodo del controller vista tweets. Come ho detto prima, aggiungere un controllo di aggiornamento è molto semplice. Dai un'occhiata all'implementazione di viewDidLoad metodo mostrato di seguito. Inizializziamo il controllo di aggiornamento e aggiungiamo un obiettivo e un'azione per il UIControlEventValueChanged evento del controllo di aggiornamento. Infine, il controllo di aggiornamento è assegnato al refreshControl proprietà del controller di visualizzazione tabella. Certo, il refreshControl anche la proprietà è nuova per iOS 6.
- (void) viewDidLoad [super viewDidLoad]; // Initialize Refresh Control UIRefreshControl * refreshControl = [[UIRefreshControl alloc] init]; // Configura il controllo di aggiornamento [refreshControl addTarget: self action: @selector (refresh :) forControlEvents: UIControlEventValueChanged]; // Configure View Controller [self setRefreshControl: refreshControl];
Prima di costruire ed eseguire nuovamente il progetto, dobbiamo implementare il ricaricare: azione nel file di implementazione del controller della vista. Per verificare che tutto sia impostato correttamente, registriamo semplicemente un messaggio alla console. Costruisci ed esegui il progetto per vedere il controllo del refresh in azione.
- (void) refresh: (id) sender NSLog (@ "Refreshing");
Si noterà che il controllo di aggiornamento non scompare dopo che è stato mostrato dal controller di visualizzazione tabella. Questo è qualcosa che dovrai fare da solo. L'idea alla base del controllo di aggiornamento è in qualche modo simile alla visualizzazione dell'indicatore di attività di UIKit (UIActivityIndicatorView), cioè, sei responsabile di mostrarlo e nasconderlo. Nascondere il controllo di aggiornamento è semplice come inviarlo un messaggio di endRefreshing. Aggiorna il ricaricare: azione come mostrato di seguito ed eseguire l'applicazione ancora una volta in iPhone Simulator.
- (void) refresh: (id) sender NSLog (@ "Refreshing"); // End Refreshing [(UIRefreshControl *) mittente endRefreshing];
Il controllo di aggiornamento scompare immediatamente dopo aver rilasciato la vista tabella. Ovviamente, questo rende il controllo di aggiornamento abbastanza inutile. Quello che faremo è inviare una richiesta all'API di ricerca di Twitter e nascondere il controllo di aggiornamento quando abbiamo ricevuto una risposta (o quando la richiesta scade). AFNetworking rende questo molto facile da fare.
Archiviamo i tweet che torniamo dall'API di ricerca di Twitter in un array. Aggiungi una proprietà privata chiamata tweets al MTTweetsViewController classe come mostrato di seguito.
#import "MTTweetsViewController.h" @interface MTTweetsViewController () @property (strong, nonatomic) tweets NSArray *; @fine
Quindi, aggiorna il numberOfSectionsInTableView:, tableView: numberOfRowsInSection:, e tableView: cellForRowAtIndexPath: metodi come mostrato di seguito. Se hai già lavorato con le visualizzazioni di tabella, questo non dovrebbe essere troppo difficile da comprendere.
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return self.tweets? 1: 0;
- (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return [conteggio self.tweets]? [conteggio self.tweets]: 0;
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath static NSString * CellIdentifier = @ "Cell Identifier"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; if (! cell) cell = [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleSubtitle riuseIdentifier: CellIdentifier]; // Fetch Tweet NSDictionary * tweet = [self.tweets objectAtIndex: [indexPath row]]; // Configura cella [cell.textLabel setText: [tweet objectForKey: @ "text"]]; [cell.detailTextLabel setText: [tweet objectForKey: @ "from_user"]]; // Scarica Profile Image Asynchronously NSURL * url = [NSURL URLWithString: [tweet objectForKey: @ "profile_image_url"]]; [cell.imageView setImageWithURL: url placeholderImage: [UIImage imageNamed: @ "placeholder"]]; cella di ritorno;
Nel tableView: cellForRowAtIndexPath:, creiamo una nuova cella (o deselezioniamo una cella riutilizzabile) e la popoliamo con i contenuti di un tweet. Per assicurarci che la vista tabella scorra senza problemi, scarichiamo l'immagine del profilo dell'utente in modo asincrono. Questo è molto facile da realizzare con AFNetworking come ci offre setImageWithURL: placeholderImage:. Ciò che fa è impostare la visualizzazione dell'immagine della cella con l'immagine segnaposto fornita mentre si richiede l'immagine del profilo dell'utente in background. Per fare in modo che funzioni, aggiungi placeholder.png e [email protected] al tuo progetto Xcode. Puoi trovare entrambi i file nei file sorgente di questo tutorial.
Inviamo la nostra richiesta all'API di ricerca Twitter in ricaricare: azione. Dai un'occhiata all'implementazione aggiornata di seguito. Non entrerò nei dettagli di come AFJSONRequestOperation classe funziona in questo tutorial, ma voglio spiegare come funziona il flusso della richiesta. Dopo aver specificato l'URL della richiesta (NSURL) e inizializzando la richiesta URL (NSURLRequest), creiamo un'operazione di richiesta JSON passando (1) la richiesta di URL, (2) un blocco di successo e (3) un blocco di errore a JSONRequestOperationWithRequest: il successo: il fallimento:. Il blocco di successo viene eseguito se la richiesta ha avuto esito positivo e ci fornisce la risposta della richiesta come istanza di NSDictionary. Estraiamo la serie di tweet che abbiamo richiesto, aggiorniamo il tweets proprietà, ricaricare la vista tabella per mostrare i tweet e nascondere il controllo di aggiornamento inviandogli un messaggio di endRefreshing.
- (vuoto) aggiornamento: (id) mittente // Crea URL NSURL * url = [NSURL URLWithString: @ "http://search.twitter.com/search.json?q=ios%20development&rpp=100&include_entities=true&result_type=mixed/ "]; // Inizializza richiesta URL NSURLRequest * urlRequest = [[NSURLRequest alloc] initWithURL: url]; // Operazione richiesta JSON AFJSONRequestOperation * operation = [AFJSONRequestOperation JSONRequestOperationWithRequest: urlRequest successo: ^ (richiesta NSURLRequest *, risposta NSHTTPURLResponse *, id JSON) NSArray * results = [(NSDictionary *) JSON objectForKey: @ "results"]; se ([risultati conta]) self.tweets = risultati; // Reload Table View [self.tableView reloadData]; // End Refreshing [(UIRefreshControl *) mittente endRefreshing]; errore: ^ (richiesta NSURLRequest *, risposta NSHTTPURLResponse *, errore NSError *, id JSON) // End Refreshing [(UIRefreshControl *) mittente endRefreshing]; ]; // Avvia operazione [avvio operazione];
Se la richiesta non riesce, nascondiamo solo il controllo di aggiornamento. Ovviamente, sarebbe meglio informare l'utente che la richiesta non è andata a buon fine, ma ciò vale per il nostro esempio. Inviamo la richiesta avviando l'operazione di richiesta JSON alla fine del ricaricare: azione.
Costruisci ed esegui il progetto ancora una volta per vedere l'applicazione di esempio in azione. Se le immagini del profilo non vengono visualizzate correttamente, verifica di aver aggiunto le immagini segnaposto che ho menzionato in precedenza al tuo progetto.
Ci sono molte librerie che cercano di imitare la funzionalità "pull to refresh" originale, ma è bello vedere che Apple ha finalmente adottato questo concetto pulito e incluso nel framework UIKit. Come forse avrai notato, in iOS 6, Apple ha già messo il UIRefreshControl classe da utilizzare in alcune delle sue applicazioni, come l'applicazione Podcast.
Accentsconagua