Share
Când Loren Brichter a prezentat ideea de "tragere la reîmprospătare" în Tweetie 2 cu câțiva ani în urmă, dezvoltatorii au început să adopte acest concept ingenios și intuitiv. Chiar dacă Twitter deține acum brevetul cu privire la conceptul "trage pentru a reîmprospăta", acest lucru nu a împiedicat Apple să introducă UIRefreshControl clasa în iOS 6. Acest nou UIControl subclasa face ca este trivial să adăugați un control "trageți pentru a reîmprospăta" la orice controler de vizualizare de tabel în iOS 6.
Referința de clasă a UIRefreshControl este scurtă, sugerând cât de ușor este să începeți cu această adăugare a cadrului UIKit. UIRefreshControl clasa coboară direct de la UIControl, ceea ce înseamnă că instalarea unui exemplu de UIRefreshControl nu este mult diferit de crearea și configurarea oricărui alt control UIKit. După instanțierea unei instanțe a UIRefreshControl clasa, îl alocați noului refreshControl proprietatea unui obiect de control al tabelului de vizualizare (UITableViewController sau o subclasă a acesteia). Controlerul de vizualizare a tabelului are grija de poziționarea corectă și afișarea controlului de refresh. Ca și în cazul altora UIControl subclasa, atașați o pereche țintă-acțiune unui anumit eveniment, UIControlEventValueChanged În cazul în care UIRefreshControl.
Acest lucru nu ar fi un tutorial Mobiletuts + fără un exemplu care să ilustreze modul de utilizare a acestuia UIRefreshControl clasă într-un proiect. În restul acestui tutorial, vă vom arăta cum să populați o vizualizare de tabelă cu o listă de tweet-uri trase din API-ul Căutare Twitter. Solicitarea este trimisă API-ului de căutare Twitter atunci când utilizatorul trage tabelul de vizualizare dow: pull-to-refresh.
Aplicația pe care urmează să o construim interogări API-ul de căutare Twitter pentru tweets despre dezvoltarea iOS. Solicitarea este trimisă API-ului de căutare Twitter atunci când utilizatorul trage în jos tabelul vizual, dezvăluind controlul de reîmprospătare. Vom folosi biblioteca fantastică AFNetworking pentru a trimite cererea noastră către API-ul Căutare Twitter. AFNetworking ne va ajuta, de asemenea, să descărcați și să afișați în mod asincron imaginile de profil.
Creați un nou proiect în Xcode selectând Cerere goală șablon din lista de șabloane (figura 1). Denumiți aplicația Pull-to-Refresh, introduceți un identificator al companiei, setați iPhone pentru familia de dispozitive și verificați Utilizați numărarea automată a referințelor. Restul casetelor de selectare pot fi lăsate neschimbate pentru acest proiect (figura 2). Spuneți Xcode unde doriți să salvați proiectul și apăsați pe Crea buton.
Instalarea AFNetworking folosind Cocoapods este o briza. Cu toate acestea, în acest tutorial, vă voi arăta cum să adăugați manual biblioteca AFNetworking la un proiect Xcode pentru a vă asigura că suntem toți pe aceeași pagină. Nu este atât de greu.
Descărcați ultima versiune stabilă a bibliotecii din pagina proiectului GitHub, extrageți arhiva și trageți folderul numit AFNetworking la proiectul dvs. Xcode. Asigurați-vă că este bifată caseta de selectare Copiați articolele în dosarul grupului de destinație (dacă este necesar) este verificată și verificați dublu că biblioteca este adăugată la Pull-to-Refresh țintă (figura 3).
Biblioteca AFNetworking se bazează pe două cadre pe care un nou proiect Xcode nu este legat în mod implicit împotriva, (1) cadrelor de configurare a sistemului și (2) a serviciilor Mobile Core Services. Selectați proiectul în Project Navigator, alege Trageți pentru a reîmprospăta obiectiv din lista de obiective și deschideți Construiți faze în partea de sus. Extindeți Link binar cu biblioteci și adăugați ambele cadre făcând clic pe butonul plus (figura 4).
Pentru a termina lucrurile, adăugați o instrucțiune de import pentru ambele cadre, precum și pentru AFNetworking, la fișierul antet precompilat al proiectelor, după cum se arată în fragmentul de mai jos. Acest lucru va facilita lucrul cu AFNetworking deoarece nu este nevoie să adăugăm o declarație de import fiecărei clase pe care dorim să o folosim.
// // Antetul prefixului pentru toate fișierele sursă ale țintă "Trageți pentru a reîmprospăta" în proiectul "Trageți spre reîmprospătare" // #import#ifndef __IPHONE_3_0 #warning "Acest proiect utilizează funcții disponibile numai în SDK 3.0 și ulterior." #endif #ifdef __OBJC__ #import #import #import #import #import "AFNetworking.h" #endif
UIRefreshControl este proiectat să funcționeze împreună cu un obiect de control al tabelului. Creaza un nou UITableViewController subclasa (Fișier> Nou> Fișier ... ) prin alegerea Clasa obiectiv-C șablon din lista de șabloane (figura 5). Dați clasei noi un nume de MTTweetsViewController și verificați dublu că este a UITableViewController subclasă. Spuneți Xcode că nu ar trebui să creeze un fișier de nib pentru noua clasă de controler prin debifarea casetei de selectare etichetate Cu XIB pentru interfața cu utilizatorul (figura 6). Specificați o locație pentru a salva noua clasă și faceți clic pe Crea buton.
Înainte de a putea adăuga controlul de refresh la controlerul de vizualizare a tabelului, trebuie să instanțiată o instanță a noului MTTweetsViewController clasă. Actualizați aplicare: didFinishLaunchingWithOptions: metoda în MTAppDelegate.m așa cum se arată mai jos. Implementarea nu ar trebui să aibă surprize. Inițializăm o instanță a MTTweetsViewController și setați-l ca controler de vizualizare a ferestrei aplicației. Nu uitați să adăugați o declarație de import în partea de sus a paginii MTAppDelegate.m pentru a importa fișierul antet al MTTweetsViewController clasă.
- (BOOL): aplicație (UIApplication *) didFinishLaunchingWithOptions: (NSDictionary *) launchOptions // Initialize Tweet Controller vizualizare MTTweetsViewController * vc = [[MTTweetsViewController alloc] initWithStyle: UITableViewStylePlain]; // Initialize fereastra self.window = [[UIWindow alocare] initWithFrame: [[UIScreen mainScreen] limite]]; // Configurați fereastra [auto.window setBackgroundColor: [UICcolor whiteColor]]; [auto.window setRootViewController: vc]; // Faceți cheie și vizibil [auto.window makeKeyAndVisible]; reveniți DA;
#import "MTTweetsViewController.h"
Dacă executați aplicația în Simulatorul iPhone, ar trebui să vedeți un tabel gol. Controlul de refresh este adăugat în viewDidLoad metodă a controlerului vizualizării tweets. După cum am menționat mai devreme, adăugarea unui control de reîmprospătare este foarte ușoară. Aruncati o privire la punerea în aplicare a viewDidLoad metoda prezentată mai jos. Inițializăm controlul de refresh și adăugăm o țintă și o acțiune pentru UIControlEventValueChanged eveniment de control de reîmprospătare. În cele din urmă, controlul de reîmprospătare este atribuit funcției refreshControl proprietatea controlerului de vizualizare a tabelului. Desigur, refreshControl proprietatea este, de asemenea, nouă pentru iOS 6.
- (vid) viewDidLoad [super viewDidLoad]; // Initialize Control de reîmprospătare UIRefreshControl * refreshControl = [[UIRefreshControl alloc] init]; // Configure Refresh Control [refreshControl addTarget: auto-acțiune: @selector (refresh :) forControlEvents: UIControlEventValueChanged]; // Configurează controlerul de vizualizare [self setRefreshControl: refreshControl];
Înainte de a construi și a conduce proiectul încă o dată, trebuie să implementăm reîmprospăta: acțiune în dosarul de implementare al controlorului vizual. Pentru a verifica dacă totul este configurat în mod corespunzător, vom conecta pur și simplu un mesaj la consola. Construiți și executați proiectul pentru a vedea controlul de refresh în acțiune.
- (vid) refresh: (id) expeditor NSLog (@ "Refreshing");
Veți observa că controlul de refresh nu dispare după ce a fost afișat de către controlerul de vizualizare a tabelului. Acesta este un lucru pe care trebuie să-l faceți singur. Ideea din spatele controlului de refresh este într-o oarecare măsură similară cu cea a indicatorului activității UIKit (UIActivityIndicatorView), adică sunteți responsabili pentru afișarea și ascunderea acesteia. Ascunderea controlului de reîmprospătare este la fel de simplă ca trimiterea unui mesaj de endRefreshing. Actualizați reîmprospăta: de acțiune, după cum se arată mai jos, și puteți rula din nou aplicația în Simulatorul iPhone.
- (vid) refresh: (id) expeditor NSLog (@ "Refreshing"); // End Refreshing [(UIRefreshControl *) expeditor endRefreshing];
Comanda de refresh dispare imediat după ce ați lansat vizualizarea tabelului. Desigur, acest lucru face ca controlul de refresh să fie inutil. Ceea ce vom face este să trimiteți o solicitare la API-ul Căutare Twitter și să ascundeți controlul de reîmprospătare atunci când primim un răspuns (sau când timpul expiră). AFNetworking face acest lucru foarte ușor de făcut.
Vom stoca tweets-urile pe care le vom reveni din API-ul de căutare Twitter într-un matrice. Adăugați o proprietate privată numită tweeturi la MTTweetsViewController clasa, după cum se arată mai jos.
#import "MTTweetsViewController.h" @interface MTTweetsViewController () @property (puternic, nonatomic) NSArray * tweets; @Sfârșit
Apoi, actualizați numberOfSectionsInTableView:, tableView: numberOfRowsInSection:, și tableView: cellForRowAtIndexPath: metodele prezentate mai jos. Dacă ați mai lucrat cu vizualizări de tabel, acest lucru nu ar trebui să fie prea greu de înțeles.
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return self.tweets? 1: 0;
- (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) sectiunea return [auto.tweets count]? [autotubes numără]: 0;
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSString static * CellIdentifier = @ "Identificator celular"; UITableViewCell * celula = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; dacă (! cell) celula = [[UITableViewCell alin] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: CellIdentifier]; // Fetch Tweet NSDictionary * tweet = [auto.tweets objectAtIndex: [indexPath row]]; // Configurați celula [cell.textLabel setText: [tweet objectForKey: @ "text"]]; [cell.detailTextLabel setText: [tweet obiectForKey: @ "from_user"]]; // Descărcați imaginea de profil Asincron NSURL * url = [NSURL URLWithString: [tweet objectForKey: @ "profile_image_url"]]; [cell.imageView setImageWithURL: url placeholderImage: [UIImage imageNamed: @ "placeholder"]]; celule retur;
În tableView: cellForRowAtIndexPath:, noi creăm o nouă celulă (sau declasăm o celulă reutilizabilă) și o populează cu conținutul unui tweet. Pentru a vă asigura că vizualizarea tabelului se derulează fără probleme, descărcați imaginea de profil a utilizatorului în mod asincron. Acest lucru este foarte ușor de realizat cu AFNetworking așa cum ne dă setImageWithURL: placeholderImage:. Ceea ce face acest lucru este setarea vizualizării imaginii celulei cu imaginea substituentului furnizată, în timp ce se solicită imaginea de profil a utilizatorului în fundal. Pentru a face acest lucru, adăugați placeholder.png și [email protected] la proiectul dvs. Xcode. Puteți găsi ambele fișiere în fișierele sursă ale acestui tutorial.
Vom trimite cererea noastră la API-ul de căutare Twitter în reîmprospăta: acțiune. Uitați-vă la implementarea actualizată de mai jos. Nu voi intra în detalii despre cum AFJSONRequestOperation clasa funcționează în acest tutorial, dar vreau să vă explic cum funcționează fluxul cererii. După specificarea adresei URL a solicitării (NSURL) și inițializarea solicitării URL (NSURLRequest), vom crea o operație de cerere JSON prin trecerea (1) solicitarea URL-ului, (2) un bloc de succes și (3) un bloc de eșec pentru a JSONRequestOperationWithRequest: succes: eșec:. Blocul de succes este executat dacă cererea a avut succes și ne dă răspunsul cererii ca o instanță NSDictionary. Extragem seria de tweets pe care le-am solicitat, actualizând tweeturi , reîncărcați vizualizarea tabelului pentru a afișa tweets și ascundeți controlul de reîmprospătare prin trimiterea unui mesaj endRefreshing.
- (void) refresh: (id) expeditor // Creare URL NSURL * url = [NSURL URLWithString: @ "http://search.twitter.com/search.json?q=ios%20development&rpp=100&include_entities=true&result_type=mixed/ „]; // Initializeaza solicitarea URL NSURLRequest * urlRequest = [[NSURLRequest alloc] initWithURL: url]; // JSON Cerere Operație AFJSONRequestOperation * operație = [AFJSONRequestOperation JSONRequestOperationWithRequest: succes urlRequest: ^ (NSURLRequest * request, NSHTTPURLResponse * răspuns, id JSON) NSArray * results = [(NSDictionary *) JSON objectForKey: @ "results"; dacă ([count count]) self.tweets = rezultate; // Reîncarcă tabelul [self.tableView reloadData]; // End Refreshing [(UIRefreshControl *) expeditor endRefreshing]; eșec: ^ (NSURLRequest * cerere, NSHTTPURLResponse * răspuns, eroare NSError *, id JSON) // End Refreshing [(UIRefreshControl *) expeditor endRefreshing]; ]; // Porniți funcționarea [pornire de funcționare];
Dacă cererea nu reușește, ascundem doar controlul de refresh. Desigur, ar fi mai bine să informăm utilizatorul că cererea a eșuat, dar acest lucru va face pentru exemplul nostru. Trimite cererea pornind de la operația de solicitare JSON la sfârșitul secțiunii reîmprospăta: acțiune.
Construiți și executați încă o dată proiectul pentru a vedea aplicația de exemplu în acțiune. Dacă imaginile de profil nu se afișează corect, verificați din nou că ați adăugat la proiectul dvs. imaginile substituente pe care le-am menționat anterior.
Există multe biblioteci care încearcă să imite funcționalitatea originală "trageți pentru a reîmprospăta", dar este frumos să vedem că Apple a îmbrățișat în sfârșit acest concept elegant și l-a inclus în cadrul UIKit. Așa cum ați fi observat, în iOS 6, Apple a pus deja UIRefreshControl clasa de utilizat în unele aplicații proprii, cum ar fi aplicația Podcasts.
Accentsconagua