Share
När Loren Brichter introducerade idén att "dra till uppdatering" i Tweetie 2 för några år sedan, var det inte länge innan utvecklare började anta detta geniala och intuitiva koncept. Trots att Twitter nu äger patentet på "pull to refresh" -konceptet, har det inte stoppat Apple från att introducera UIRefreshControl klass i IOS 6. Den här nya UIControl subclass gör det trivialt att lägga till en "pull to refresh" -kontroll till någon tabellvisningskontroll i IOS 6.
Klassens referens för UIRefreshControl är kort och antyder hur lätt det är att komma igång med detta tillägg av UIKIT-ramverket. De UIRefreshControl klassen kommer direkt från UIControl, vilket innebär att man etablerar en instans av UIRefreshControl är inte mycket annorlunda än att skapa och konfigurera någon annan UIKit-kontroll. Efter instantiating en instans av UIRefreshControl klass, tilldelar du den till den nya refreshControl egenskap för ett tabellvisningskontrollobjekt (UITableViewController eller en underklass av den). Tabellvynkontrollen tar hand om korrekt positionering och visar uppdateringskontrollen. Som med någon annan UIControl underklass, bifogar du ett mål-actionspar till en viss händelse, UIControlEventValueChanged i fallet med UIRefreshControl.
Detta skulle inte vara en Mobiletuts + handledning utan ett exempel som illustrerar hur man använder UIRefreshControl klass i ett projekt. I resten av denna handledning visar jag dig hur man fyller en tabellvy med en lista med tweets som dras från Twitter Search API. Förfrågan skickas till Twitters Sök API när användaren drar tabellvyn dow: pull-to-refresh.
Applikationen som vi ska bygga frågor på Twitter Search API för tweets om iOS-utveckling. Förfrågan skickas till Twitters sök API när användaren drar ner tabellvyn och avslöjar uppdateringskontrollen. Vi kommer att använda det fantastiska AFNetworking-biblioteket för att skicka vår begäran till Twitter Search API. AFNetworking hjälper oss också att asynkront ladda ner och visa profilbilder.
Skapa ett nytt projekt i Xcode genom att välja Tom applikation mall från listan med mallar (Figur 1). Namn på din ansökan Pull-to-Refresh, Ange en företagsidentifierare, inställd iPhone för enhetsfamiljen och kontrollera Använd automatisk referensräkning. Resten av kryssrutorna kan lämnas obekant för detta projekt (figur 2). Berätta Xcode där du vill spara projektet och klicka på Skapa knapp.
Installera AFNetworking med Cocoapods är en bris. I denna handledning visar jag dig hur man manuellt lägger till AFNetworking-biblioteket i ett Xcode-projekt för att se till att vi alla är på samma sida. Det är inte så svårt ändå.
Hämta den senaste stabila versionen av biblioteket från sin GitHub-projektsida, dra ut arkivet och dra den namngivna mappen AFNetworking till ditt Xcode-projekt. Se till att kryssrutan är märkt Kopiera objekt till destinationsgruppens mapp (om det behövs) är markerad och dubbelkontrollera att biblioteket läggs till i Pull-to-Refresh mål (figur 3).
AFNetworking-biblioteket bygger på två ramar som ett nytt Xcode-projekt inte är kopplat till, (1) Systemkonfiguration och (2) Mobile Core Services-ramarna. Välj ditt projekt i Project Navigator, Välj den Dra till Uppdatera mål från listan över mål och öppna Bygga faser fliken längst upp. Expandera Länk binär med bibliotek lådan och lägg till båda ramarna genom att klicka på plusknappen (bild 4).
För att avsluta sakerna lägger du till ett importmeddelande för både ramverk och AFNetworking till projektets förkompilerade headerfil som visas i nedanstående kod. Det gör det lättare att arbeta med AFNetworking eftersom vi inte behöver lägga till en importdeklaration till varje klass som vi vill använda biblioteket.
// // Prefixrubrik för alla källfiler i målet "Pull to Refresh" i projektet "Pull to Refresh" // #import#ifndef __IPHONE_3_0 #warning "Det här projektet använder funktioner som endast är tillgängliga i iOS SDK 3.0 och senare." #endif #ifdef __OBJC__ #import #importera #importera #importera #import "AFNetworking.h" #endif
De UIRefreshControl är utformad för att fungera tillsammans med ett tabellvisningskontrollobjekt. Skapa en ny UITableViewController underklass (Fil> Ny> Fil ... ) genom att välja Mål-C-klass mall från listan med mallar (figur 5). Ge den nya klassen ett namn på MTTweetsViewController och dubbelkontrollera att det är a UITableViewController underklass. Berätta Xcode att det inte ska skapa en nib-fil för den nya kontrollerklassen genom att avmarkera kryssrutan märkt Med XIB för användargränssnitt (figur 6). Ange en plats för att spara den nya klassen och klicka på Skapa knapp.
Innan vi kan lägga till uppdateringskontrollen i tabellvynskontrollen måste vi instansera en förekomst av det nya MTTweetsViewController klass. Uppdatera applikations: didFinishLaunchingWithOptions: metod i MTAppDelegate.m enligt nedanstående. Genomförandet borde inte innebära några överraskningar. Vi initierar en instans av MTTweetsViewController klass och ange det som applikationsfönstret root view controller. Glöm inte att lägga till en importdeklaration högst upp på MTAppDelegate.m att importera huvudfilen till MTTweetsViewController klass.
- (BIA) ansökan: (UIApplication *) ansökan didFinishLaunchingWithOptions: (NSDictionary *) launchOptions // Initialize Tweet Visa Controller MTTweetsViewController * vc = [[MTTweetsViewController allokera] initWithStyle: UITableViewStylePlain]; // Initiera fönster self.window = [[UIWindow alloc] initWithFrame: gränser för [[UIScreen mainScreen]]; // Konfigurera fönstret [self.window setBackgroundColor: [UIColor whiteColor]]; [self.window setRootViewController: vc]; // Gör Key and Visible [self.window makeKeyAndVisible]; returnera JA;
#import "MTTweetsViewController.h"
Om du kör programmet i iPhone Simulator ska du se en tom tabellvy. Uppdateringskontrollen läggs till i viewDidLoad Metoden för tweets-visningskontrollen. Som jag nämnde tidigare är det mycket enkelt att lägga till en uppdateringskontroll. Ta en titt på genomförandet av viewDidLoad metod som visas nedan. Vi initierar uppdateringskontrollen och lägger till ett mål och en åtgärd för UIControlEventValueChanged händelse av uppdateringskontrollen. Slutligen tilldelas uppdateringskontrollen till refreshControl egenskapen för tabellvynkontrollen. Självklart är det refreshControl egendom är också nytt för iOS 6.
- (void) viewDidLoad [super viewDidLoad]; // Initialisera Uppdateringskontroll UIRefreshControl * refreshControl = [[UIRefreshControl alloc] init]; // Configure Refresh Control [refreshControl addTarget: självåtgärd: @selector (refresh :) forControlEvents: UIControlEventValueChanged]; // Konfigurera View Controller [self setRefreshControl: refreshControl];
Innan vi bygger och kör projektet igen, måste vi implementera uppdatera: åtgärd i visningskontrollens implementeringsfil. För att verifiera att allt är korrekt konfigurerat loggar vi bara ett meddelande till konsolen. Bygg och kör projektet för att se uppdateringskontrollen i åtgärd.
- (void) refresh: (id) avsändare NSLog (@ "Refreshing");
Du kommer att märka att uppdateringskontrollen inte försvinner efter att den har visats av kontrollpanelen för tabellvisning. Det här är något som du måste göra själv. Tanken bakom uppdateringskontrollen på något sätt liknar UIKits aktivitetsindikatorvy (UIActivityIndicatorView), det vill säga du är ansvarig för att visa och dölja den. Att dölja uppdateringskontrollen är lika enkelt som att skicka ett meddelande till endRefreshing. Uppdatera uppdatera: åtgärd som visas nedan och kör programmet en gång till i iPhone Simulator.
- (void) refresh: (id) avsändare NSLog (@ "Refreshing"); // End Refreshing [(UIRefreshControl *) avsändare EndRefreshing];
Uppdateringskontrollen försvinner omedelbart efter att du släppt tabellvyn. Naturligtvis gör uppdateringen kontrollen ganska meningslös. Vad vi ska göra är att skicka en förfrågan till Twitter Search API och dölja uppdateringskontrollen när vi har fått ett svar (eller när begäran försvinner). AFNetworking gör det här mycket enkelt att göra.
Vi lagrar de tweets som vi kommer tillbaka från Twitter Search API i en array. Lägg till en privat egendom som heter tweets till MTTweetsViewController klass som visas nedan.
#import "MTTweetsViewController.h" @interface MTTweetsViewController () @property (stark, ickeatomisk) NSArray * tweets; @slutet
Uppdatera sedan numberOfSectionsInTableView:, Tableview: numberOfRowsInSection:, och Tableview: cellForRowAtIndexPath: metoder som visas nedan. Om du har arbetat med tabellvisningar innan, bör det inte vara så svårt att förstå.
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return self.tweets? 1: 0;
- (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) avsnitt return [self.tweets count]? [self.tweets count]: 0;
- (UITableViewCell *) tableView: (UITableView *) tableVisa cellForRowAtIndexPath: (NSIndexPath *) indexPath static NSString * CellIdentifier = @ "Cell Identifier"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; om (! cell) cell = [[UITableViewCell allokera] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: CellIdentifier]; // Hämta Tweet NSDictionary * tweet = [self.tweets objectAtIndex: [indexPath row]]; // Konfigurera cell [cell.textLabel setText: [tweet objectForKey: @ "text"]]; [cell.detailTextLabel setText: [tweet objectForKey: @ "from_user"]]; // Hämta profilbild Asynchronously NSURL * url = [NSURL URLWithString: [tweet objectForKey: @ "profile_image_url"]]; [cell.imageView setImageWithURL: url placeholderImage: [UIImage imageNamed: @ "placeholder"]]; returcell;
I Tableview: cellForRowAtIndexPath:, vi skapar en ny cell (eller avkodar en återanvändbar cell) och fyller den med innehållet i en tweet. För att se till att tabellvisningen rullar smidigt, laddar vi ner användarens profilbild asynkront. Detta är väldigt lätt att åstadkomma med AFNetworking som det ger oss setImageWithURL: placeholderImage:. Vad det här gör är att ställa in cellens bildvy med den medföljande platshållarbilden samtidigt som man begär användarens profilbild i bakgrunden. För att göra detta arbete, lägg till placeholder.png och [email protected] till ditt Xcode-projekt. Du kan hitta båda filerna i källfilerna i denna handledning.
Vi skickar vår begäran till Twitter Search API i uppdatera: verkan. Ta en titt på det uppdaterade genomförandet nedan. Jag kommer inte att gå in i detaljerna om hur AFJSONRequestOperation klassen fungerar i denna handledning, men jag vill förklara hur flödet av förfrågan fungerar. Efter att ha angett begäran URL (NSURL) och initiering av URL-förfrågan (NSURLRequest) skapar vi en JSON-förfrågan genom att skicka (1) URL-begäran, (2) ett framgångsrikt block och (3) ett fel block till JSONRequestOperationWithRequest: framgång: misslyckande:. Succesblocket exekveras om förfrågan lyckades och ger oss svaret på begäran som en förekomst av NSDictionary. Vi tar ut urvalet av tweets som vi begärde, uppdatera tweets egenskapen, ladda om tabellvy för att visa tweets och dölja uppdateringskontrollen genom att skicka den ett meddelande om endRefreshing.
- (void) refresh: (id) avsändare // Skapa URL NSURL * url = [NSURL URLWithString: @ "http://search.twitter.com/search.json?q=ios%20development&rpp=100&include_entities=true&result_type=mixed/ "]; // Initiera URL-förfrågan NSURLRequest * urlRequest = [[NSURLRequest alloc] initWithURL: url]; // JSON Request Operation AFJSONRequestOperation * operation = [AFJSONRequestOperation JSONRequestOperationWithRequest: urlRequest framgång: ^ (NSURLRequest * begäran, NSHTTPURLResponse * svar, id JSON) NSArray * results = [(NSDictionary *) JSON objectForKey: @ "results"]; om ([resultaträkning]) self.tweets = results; // Uppdatera tabellvisning [self.tableView reloadData]; // End Refreshing [(UIRefreshControl *) avsändare EndRefreshing]; misslyckande: ^ (NSURLRequest * request, NSHTTPURLResponse * svar, NSError * fel, id JSON) // End Refreshing [(UIRefreshControl *) avsändare endRefreshing]; ]; // Starta operationen [operation start];
Om förfrågan misslyckas döljer vi bara uppdateringskontrollen. Det är naturligtvis bättre att informera användaren om att förfrågan misslyckades, men det här kommer att göra för vårt exempel. Vi skickar begäran genom att starta JSON-förfrågan på slutet av uppdatera: verkan.
Bygg och kör projektet ännu en gång för att se exempelsökningen i åtgärd. Om profilbilderna inte visas korrekt kontrollerar du att du har lagt till de platshållare bilder som jag nämnde tidigare för ditt projekt.
Det finns många bibliotek som försöker efterlikna den ursprungliga "pull to refresh" -funktionen, men det är trevligt att se att Apple äntligen har tagit med sig detta snygga koncept och inkluderat det i UIKit-ramen. Som du kanske har lagt märke till, i Apple 6 har Apple redan satt UIRefreshControl klass att använda i några av sina egna applikationer, till exempel Podcasts-programmet.
Accentsconagua