Share
Når Loren Brichter introduserte ideen om å "trekke for å oppdatere" i Tweetie 2 for noen år siden, var det ikke lenge før utviklere begynte å vedta dette geniale og intuitive konseptet. Selv om Twitter eier patentet på "pull to refresh" -konseptet, har dette ikke stoppet Apple fra å introdusere UIRefreshControl klassen i iOS 6. Denne nye UIControl subclass gjør det trivielt å legge til en "pull to refresh" -kontroll til en hvilken som helst tabellvisningskontroller i iOS 6.
Klassen referanse av UIRefreshControl er kort og antyder hvor lett det er å komme i gang med dette tillegget av UIKIT-rammen. De UIRefreshControl Klassen stammer direkte fra UIControl, noe som betyr at du setter opp en forekomst av UIRefreshControl er ikke mye forskjellig fra å skape og konfigurere annen UIKit-kontroll. Etter instantiating en forekomst av UIRefreshControl klasse, tilordner du den til den nye refreshControl Egenskapen til et tabellvisningskontrollobjekt (UITableViewController eller en underklasse av den). Tabellvisningskontrollen sørger for riktig posisjonering og visning av oppdateringskontrollen. Som med alle andre UIControl underklasse, legger du til et mål-action-par til en bestemt hendelse, UIControlEventValueChanged i tilfelle av UIRefreshControl.
Dette ville ikke være en Mobiletuts + opplæring uten et eksempel som illustrerer hvordan du bruker UIRefreshControl klasse i et prosjekt. I resten av denne opplæringen vil jeg vise deg hvordan du skal fylle en tabellvisning med en liste over tweets som er trukket fra Twitter Search API. Forespørselen sendes til Twitters Search API når brukeren trekker tabellvisningen dow: pull-to-refresh.
Programmet som vi skal bygge spørringer på Twitter Search API for tweets om iOS-utvikling. Forespørselen sendes til Twitters Search API når brukeren trekker tabellvisningen ned, og avslører oppdateringskontrollen. Vi vil bruke det fantastiske AFNetworking-biblioteket til å sende vår forespørsel til Twitter Search API. AFNetworking vil også hjelpe oss med å asynkront laste ned og vise profilbilder.
Opprett et nytt prosjekt i Xcode ved å velge Tom søknad mal fra listen over maler (Figur 1). Navn søknaden din Trekk til Refresh, skriv inn en bedriftsidentifikator, sett iPhone for enhetens familie, og sjekk Bruk automatisk referansetelling. Resten av avmerkingsboksene kan stå ukontrollert for dette prosjektet (figur 2). Fortell Xcode hvor du vil lagre prosjektet og trykke på Skape knapp.
Installere AFNetworking med Cocoapods er en bris. I denne veiledningen vil jeg imidlertid vise deg hvordan du manuelt legger til AFNetworking-biblioteket i et Xcode-prosjekt for å sikre at vi alle er på samme side. Det er ikke så vanskelig uansett.
Last ned siste stabile utgivelsen av biblioteket fra sin GitHub-prosjektside, hent ut arkivet, og dra mappen som heter AFNetworking til ditt Xcode-prosjekt. Pass på at avkrysningsruten er merket Kopier elementer til målgruppens mappe (om nødvendig) er merket og dobbeltsjekker at biblioteket er lagt til Trekk til Refresh mål (figur 3).
AFNetworking-biblioteket bygger på to rammer som et nytt Xcode-prosjekt ikke er standard koblet til, (1) Systemkonfigurasjon og (2) Mobile Core Services-rammer. Velg prosjektet ditt i Prosjektnavigator, Velg Trekk for å oppdatere mål fra listen over mål, og åpne Bygg faser fanen øverst. Utvid Link binær med biblioteker skuff og legg til begge rammene ved å klikke på pluss-knappen (figur 4).
For å fullføre tingene, legg til en importerklæring for både rammer og AFNetworking til prosjekts forkompilerte headerfil som vist i utdragssiden nedenfor. Dette vil gjøre det enklere å jobbe med AFNetworking, siden vi ikke trenger å legge til en importerklæring for hver klasse som vi vil bruke biblioteket.
// // Prefiksoverskrift for alle kildefiler av "Pull to Refresh" -målet i "Pull to Refresh" -prosjektet // #import#ifndef __IPHONE_3_0 #warning "Dette prosjektet bruker funksjoner som bare er tilgjengelige i iOS SDK 3.0 og nyere." #endif #ifdef __OBJC__ #import #importere #importere #importere #import "AFNetworking.h" #endif
De UIRefreshControl er utformet for å fungere sammen med et tabellvisningskontrollobjekt. Lage en ny UITableViewController underklasse (Fil> Ny> Fil ... ) ved å velge Mål-C klasse mal fra listen over maler (figur 5). Gi den nye klassen et navn på MTTweetsViewController og dobbeltkjekke at det er a UITableViewController underklasse. Fortell Xcode at den ikke skal opprette en nib-fil for den nye kontrollerklassen ved å fjerne merket i avmerkingsboksen Med XIB for brukergrensesnitt (figur 6). Angi et sted for å lagre den nye klassen og klikk på Skape knapp.
Før vi kan legge til oppdateringskontrollen til tabellvisningen, må vi instansiere en forekomst av det nye MTTweetsViewController klasse. Oppdater applikasjons: didFinishLaunchingWithOptions: metode i MTAppDelegate.m som vist under. Gjennomføringen bør ikke holde noen overraskelser. Vi initialiserer en forekomst av MTTweetsViewController klassen og sett den som applikasjonsvinduets root view kontroller. Ikke glem å legge til en importerklæring øverst på MTAppDelegate.m for å importere headerfilen til MTTweetsViewController klasse.
- (UIpplikasjon *) søknad didFinishLaunchingWithOptions: (NSDictionary *) launchOptions // Initialize Tweet View Controller MTTweetsViewController * vc = [[MTTweetsViewController allokere] initWithStyle: UITableViewStylePlain]; // Initialiser Window self.window = [[UIWindow alloc] initWithFrame: grenser for [[UIScreen mainScreen]]; // Konfigurer Window [self.window setBackgroundColor: [UIColor whiteColor]]; [self.window setRootViewController: vc]; // Lag nøkkel og synlig [self.window makeKeyAndVisible]; returnere JA;
#import "MTTweetsViewController.h"
Hvis du kjører programmet i iPhone Simulator, bør du se en tom tabellvisning. Oppdateringskontrollen legges til i viewDidLoad metode for tweets view kontrolleren. Som jeg nevnte tidligere, er det veldig enkelt å legge til en oppdateringskontroll. Ta en titt på implementeringen av viewDidLoad metode vist nedenfor. Vi initialiserer oppdateringskontrollen og legger til et mål og en handling for UIControlEventValueChanged hendelsen på oppdateringskontrollen. Endelig er oppfriskningskontrollen tilordnet til refreshControl egenskapen til tabellvisningen. Selvfølgelig, den refreshControl Egenskapen er også ny for iOS 6.
- (void) viewDidLoad [super viewDidLoad]; // Initialiser Refresh Control UIRefreshControl * refreshControl = [[UIRefreshControl alloc] init]; // Konfigurer oppdateringskontroll [refreshControl addTarget: selvhandling: @selector (refresh :) forControlEvents: UIControlEventValueChanged]; // Konfigurer visningskontrollen [self setRefreshControl: refreshControl];
Før vi bygger og kjører prosjektet enda en gang, må vi implementere forfriske: handling i visningsregulatorens implementeringsfil. For å bekrefte at alt er satt opp riktig, logger vi bare en melding til konsollen. Bygg og kjør prosjektet for å se oppdateringskontrollen i handling.
- (ugyldig) oppdatering: (id) avsender NSLog (@ "Forfriskende");
Du vil legge merke til at oppdateringskontrollen ikke forsvinner etter at den har blitt vist av tabellvisningen. Dette er noe du må gjøre selv. Ideen bak oppdateringskontrollen er på noen måter lik UIKits aktivitetsindikatorvisning (UIActivityIndicatorView), det vil si, du er ansvarlig for å vise og gjemme det. Å gjemme oppfriskningskontrollen er like enkelt som å sende den en melding om endRefreshing. Oppdater forfriske: handling som vist nedenfor og kjør applikasjonen en gang til i iPhone Simulator.
- (ugyldig) oppdatering: (id) avsender NSLog (@ "Forfriskende"); // End Forfriskende [(UIRefreshControl *) Sender EndRefreshing];
Forfriskningskontrollen forsvinner umiddelbart etter at du har slukket tabellvisningen. Dette gjør selvfølgelig oppfriskningskontrollen ganske ubrukelig. Det vi skal gjøre er å sende en forespørsel til Twitter Search API og skjule oppdateringskontrollen når vi har mottatt et svar (eller når forespørselen går ut). AFNetworking gjør dette veldig enkelt å gjøre.
Vi lagrer tweets som vi kommer tilbake fra Twitter Search API i en matrise. Legg til en privat eiendom som heter tweets til MTTweetsViewController klassen som vist nedenfor.
#import "MTTweetsViewController.h" @interface MTTweetsViewController () @property (sterk, ikkeatomisk) NSArray * tweets; @slutt
Deretter oppdaterer du numberOfSectionsInTableView:, Tableview: numberOfRowsInSection:, og Tableview: cellForRowAtIndexPath: metoder som vist nedenfor. Hvis du har jobbet med tabellvisninger før, bør dette ikke være for vanskelig å forstå.
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return self.tweets? 1: 0;
- (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) seksjon return [self.tweets count]? [self.tweets count]: 0;
- (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath statisk NSString * CellIdentifier = @ "Cell Identifier"; UITableViewCell * celle = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; hvis (! celle) celle = [[UITableViewCell allokere] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: CellIdentifier]; // Hent Tweet NSDictionary * tweet = [self.tweets objectAtIndex: [indexPath row]]; // Konfigurer Cell [cell.textLabel setText: [tweet objectForKey: @ "text"]]; [cell.detailTextLabel setText: [tweet objectForKey: @ "from_user"]]; // Last ned profilbilde Asynchronously NSURL * url = [NSURL URLWithString: [tweet objectForKey: @ "profile_image_url"]]; [cell.imageView setImageWithURL: url placeholderImage: [UIImage imageNamed: @ "placeholder"]]; returcelle;
I Tableview: cellForRowAtIndexPath:, vi lager en ny celle (eller dequeue en gjenbrukbar celle) og fylle den med innholdet i en tweet. For å sikre at tabellvisningen ruller jevnt, laster vi ned brukerens profilbilde asynkront. Dette er veldig enkelt å oppnå med AFNetworking som det gir oss setImageWithURL: placeholderImage:. Hva dette gjør er å sette cellens bildevisning med det medfølgende plasseringsbildet mens du ber om brukerens profilbilde i bakgrunnen. For å gjøre dette arbeidet, legg til placeholder.png og [email protected] til ditt Xcode-prosjekt. Du kan finne begge filene i kildefilene i denne opplæringen.
Vi sender vår forespørsel til Twitter Search API i forfriske: handling. Ta en titt på den oppdaterte gjennomføringen nedenfor. Jeg vil ikke gå inn i detaljene om hvordan AFJSONRequestOperation klassen fungerer i denne opplæringen, men jeg vil forklare hvordan flytningen av forespørselen fungerer. Etter å ha angitt forespørselsadressen (NSURL) og initialisering av URL-forespørselen (NSURLRequest), oppretter vi en JSON forespørsel operasjon ved å sende (1) URL forespørselen, (2) en suksess blokk, og (3) en feil blokkering til JSONRequestOperationWithRequest: suksess: fiasko:. Suksessblokken blir utført dersom forespørselen var vellykket og gir oss svaret på forespørselen som en forekomst av NSDictionary. Vi trekker ut mengden tweets som vi ba om, oppdatere tweets egenskap, last opp tabellvisningen for å vise tweets, og skjul oppdateringskontrollen ved å sende den en melding om endRefreshing.
- (ugyldig) oppdatering: (id) avsender // Opprett URL NSURL * url = [NSURL URLWithString: @ "http://search.twitter.com/search.json?q=ios%20development&rpp=100&include_entities=true&result_type=mixed/ "]; // Initialiser URL-forespørsel NSURLRequest * urlRequest = [[NSURLRequest alloc] initWithURL: url]; // JSON Forespørsel Operasjon AFJSONRequestOperation * Operation = [AFJSONRequestOperation JSONRequestOperationWithRequest: urlRequest suksess: ^ (NSURLRequest * request, NSHTTPURLResponse * svar, id JSON) NSArray * results = [(NSDictionary *) JSON objectForKey: @ "results"]; hvis ([resultater teller]) self.tweets = results; // Oppdater tabelloversikt [self.tableView reloadData]; // End Forfriskende [(UIRefreshControl *) Sender EndRefreshing]; feil: ^ (NSURLRequest * request, NSHTTPURLResponse * respons, NSError * feil, id JSON) // End Refreshing [(UIRefreshControl *) sender endRefreshing]; ]; // Startoperasjon [operasjonsstart];
Hvis forespørselen mislykkes, skjuler vi bare oppdateringskontrollen. Selvfølgelig vil det være bedre å informere brukeren om at forespørselen mislyktes, men dette vil gjøre for vårt eksempel. Vi sender forespørselen ved å starte JSON forespørselsoperasjonen på slutten av forfriske: handling.
Bygg og kjør prosjektet enda en gang for å se eksempelprogrammet i bruk. Hvis profilbildene ikke vises riktig, kontroller du at du har lagt til plassholderbilder som jeg nevnte tidligere for prosjektet ditt.
Det er mange biblioteker som prøver å etterligne den opprinnelige "pull to refresh" -funksjonaliteten, men det er fint å se at Apple endelig har tatt imot dette fine konseptet og inkludert det i UIKit-rammen. Som du kanskje har lagt merke til, i Apple 6, har Apple allerede satt UIRefreshControl klassen som skal brukes i noen av sine egne applikasjoner, for eksempel Podcasts-programmet.
Accentsconagua