Share
Toen Loren Brichter een paar jaar geleden het idee introduceerde van "pull to refresh" in Tweetie 2, duurde het niet lang voordat ontwikkelaars dit ingenieuze en intuïtieve concept gingen gebruiken. Hoewel Twitter nu eigenaar is van het patent op het 'pull to refresh'-concept, heeft dit Apple er niet van weerhouden om het UIRefreshControl klasse in iOS 6. Deze nieuw UIControl subklasse maakt het triviaal om een "pull to refresh" -besturingselement toe te voegen aan elke tabelweergave-controller in iOS 6.
De klasseverwijzing van UIRefreshControl is kort en geeft aan hoe gemakkelijk het is om aan de slag te gaan met deze toevoeging van het UIKit-framework. De UIRefreshControl klas komt rechtstreeks uit UIControl, wat betekent dat het opzetten van een instantie van UIRefreshControl is niet veel verschillend van het maken en configureren van andere UIKit-besturingselementen. Na het instantiëren van een instantie van de UIRefreshControl klasse, u wijst het toe aan het nieuwe refreshControl eigenschap van een tabelweergavecontrollerobject (UITableViewController of een subklasse ervan). De tafelweergavecontroller zorgt voor een juiste positionering en weergave van de verversingsregeling. Zoals met alle andere UIControl subklasse, koppelt u een target-action-paar aan een specifieke gebeurtenis, UIControlEventValueChanged in het geval van UIRefreshControl.
Dit zou geen Mobiletuts + tutorial zijn zonder een voorbeeld dat illustreert hoe het te gebruiken UIRefreshControl klasse in een project. In de rest van deze tutorial laat ik je zien hoe je een tabelweergave kunt vullen met een lijst met tweets uit de Twitter Search API. Het verzoek wordt verzonden naar de Search API van Twitter wanneer de gebruiker de tabelweergave opent: pull-to-refresh.
De applicatie die we gaan bouwen, bevraagt de Twitter Search API voor tweets iOS ontwikkeling. Het verzoek wordt verzonden naar de Search API van Twitter wanneer de gebruiker de tabelweergave naar beneden trekt en het verversingsbeheer onthult. We zullen de fantastische AFNetworking-bibliotheek gebruiken om ons verzoek naar de Twitter Search API te verzenden. AFNetworking helpt ons ook om asynchroon profielfoto's te downloaden en weer te geven.
Maak een nieuw project in Xcode door de. Te selecteren Lege applicatie sjabloon uit de lijst met sjablonen (Figuur 1). Geef je sollicitatie een naam Trek om te vernieuwen, voer een bedrijfsidentificatie in, stel in iPhone voor de apparaatfamilie en vink aan Gebruik automatische referentietelling. De overige selectievakjes kunnen voor dit project niet worden aangevinkt (figuur 2). Vertel Xcode waar je het project wilt opslaan en klik op creëren knop.
Het installeren van AFNetworking met CocoPods is een fluitje van een cent. In deze zelfstudie laat ik u echter zien hoe u de AFNetworking-bibliotheek handmatig aan een Xcode-project toevoegt om ervoor te zorgen dat we allemaal op dezelfde pagina staan. Het is toch niet zo moeilijk.
Download de laatste stabiele versie van de bibliotheek van de GitHub-projectpagina, pak het archief uit en sleep de map met de naam AFNetworking naar uw Xcode-project. Zorg ervoor dat het selectievakje is gelabeld Kopieer items naar de map van de bestemmingsgroep (indien nodig) is aangevinkt en controleer nogmaals of de bibliotheek is toegevoegd aan de Trek om te vernieuwen doelwit (figuur 3).
De AFNetworking-bibliotheek is gebaseerd op twee frameworks waar een nieuw Xcode-project niet standaard aan is gekoppeld, (1) de frameworks voor systeemconfiguratie en (2) mobiele kernservices. Selecteer uw project in de Project Navigator, kies de Trek om te vernieuwen doel uit de lijst met doelen, en open de Bouw fases tab bovenaan. Vouw het Binaire koppeling met bibliotheken lade en voeg beide frameworks toe door op de plusknop te klikken (figuur 4).
Om alles af te ronden, voegt u een importinstructie voor zowel frameworks als AFNetworking toe aan het geprecompileerde headerbestand van de projecten, zoals in het onderstaande fragment. Dit maakt het gemakkelijker om met AFNetworking te werken, omdat we geen importverklaring hoeven toe te voegen aan elke klas die we de bibliotheek willen gebruiken.
// // Prefix-header voor alle bronbestanden van het doel 'Pull to Refresh' in het project 'Pull to Refresh' // #import#ifndef __IPHONE_3_0 #waarschuwing "Dit project maakt gebruik van functies die alleen beschikbaar zijn in iOS SDK 3.0 en hoger." #endif # ifdef __OBJC__ #import #importeren #importeren #importeren #import "AFNetworking.h" #endif
De UIRefreshControl is ontworpen om te werken in combinatie met een object voor de weergave van een tabelweergave. Maak een nieuw UITableViewController subklasse (Bestand> Nieuw> Bestand ... ) door de Objectieve C-klasse sjabloon uit de lijst met sjablonen (figuur 5). Geef de nieuwe klas een naam MTTweetsViewController en controleer of het een is UITableViewController subklasse. Vertel Xcode dat er geen nib-bestand voor de nieuwe controllerklasse moet worden gemaakt door het vakje met het label uit te vinken Met XIB voor gebruikersinterface (figuur 6). Geef een locatie op om de nieuwe klasse op te slaan en klik op de creëren knop.
Voordat we het vernieuwingsbeheer kunnen toevoegen aan de tabelweergavecontroller, moeten we een instantie van het nieuwe instantiëren MTTweetsViewController klasse. Werk het toepassing: didFinishLaunchingWithOptions: methode in MTAppDelegate.m zoals hieronder getoond. De implementatie moet geen verrassingen bevatten. We initialiseren een instantie van de MTTweetsViewController class en stel het in als de root view-controller van het applicatievenster. Vergeet niet om een importinstructie toe te voegen bovenaan MTAppDelegate.m om het header-bestand van de te importeren MTTweetsViewController klasse.
- (BOOL) applicatie: (UIApplication *) applicatie didFinishLaunchingWithOptions: (NSDictionary *) launchOptions // Initialize Tweet View Controller MTTweetsViewController * vc = [[MTTweetsViewController alloc] initWithStyle: UITableViewStylePlain]; // Initialize Window self.window = [[UIWindow alloc] initWithFrame: [[UIScreen mainScreen] bounds]]; // Venster Configureren [venster zelfinstell. Achtergrondkleur: [UICkleur witte kleur]]; [self.window setRootViewController: vc]; // Maak sleutel en zichtbaar [self.window makeKeyAndVisible]; terugkeer JA;
#import "MTTweetsViewController.h"
Als u de toepassing in de iPhone Simulator uitvoert, ziet u een leeg tabeloverzicht. Het vernieuwingsbeheer is toegevoegd in de viewDidLoad methode van de tweets view controller. Zoals ik eerder al zei, is het toevoegen van een verversingscontrole heel eenvoudig. Bekijk de implementatie van de viewDidLoad methode hieronder weergegeven. We initialiseren het vernieuwingsbeheer en voegen een doel en actie toe voor de UIControlEventValueChanged gebeurtenis van de verversingscontrole. Ten slotte is het vernieuwingsbeheer toegewezen aan de refreshControl eigenschap van de tabelweergavecontroller. Natuurlijk, de refreshControl eigendom is ook nieuw voor iOS 6.
- (void) viewDidLoad [super viewDidLoad]; // Initialize Refresh Control UIRefreshControl * refreshControl = [[UIRefreshControl alloc] init]; // Vernieuwingscontrole configureren [refreshControl addTarget: self action: @selector (refresh :) forControlEvents: UIControlEventValueChanged]; // Configureer View Controller [self setRefreshControl: refreshControl];
Voordat we het project opnieuw bouwen en uitvoeren, moeten we het frissen: actie in het implementatiebestand van de view controller. Om te controleren of alles correct is ingesteld, loggen we gewoon een bericht in op de console. Bouw en voer het project uit om het verversingsbesturingselement in actie te zien.
- (void) refresh: (id) afzender NSLog (@ "Refreshing");
U zult merken dat het verversingsbesturingselement niet verdwijnt nadat het is weergegeven door de besturingseenheid voor de tabelweergave. Dit is iets dat je zelf moet doen. Het idee achter de vernieuwingsregeling is in sommige opzichten vergelijkbaar met de activiteitsindicatorweergave van UIKit (UIActivityIndicatorView), dat wil zeggen dat u verantwoordelijk bent voor het weergeven en verbergen ervan. Het verversingsbeheer verbergen is net zo eenvoudig als het een bericht sturen van endRefreshing. Werk het frissen: actie zoals hieronder getoond en voer de applicatie nogmaals uit in de iPhone Simulator.
- (void) refresh: (id) afzender NSLog (@ "Refreshing"); // End Refreshing [(UIRefreshControl *) verzender endRefreshing];
Het vernieuwingsbeheer verdwijnt onmiddellijk nadat u de tabelweergave hebt vrijgegeven. Dit maakt de verversingsregeling natuurlijk tamelijk nutteloos. Wat we zullen doen, is een verzoek verzenden naar de Twitter Search API en het verversingsbeheer verbergen wanneer we een antwoord hebben ontvangen (of wanneer de time-out van het verzoek). AFNetworking maakt dit heel gemakkelijk om te doen.
We bewaren de tweets die we terug krijgen van de Twitter Search API in een array. Voeg een privé-eigenschap toe met de naam tweets naar de MTTweetsViewController klasse zoals hieronder getoond.
#import "MTTweetsViewController.h" @interface MTTweetsViewController () @property (strong, nonatomic) NSArray * tweets; @einde
Werk vervolgens het numberOfSectionsInTableView:, tableView: numberOfRowsInSection:, en tableView: cellForRowAtIndexPath: methoden zoals hieronder getoond. Als je eerder met tafelaanzichten hebt gewerkt, moet dit niet zo moeilijk zijn om te begrijpen.
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView retourneer zelf.tweets? 1: 0;
- (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return [telling self.tweets]? [telling 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 reuseIdentifier: CellIdentifier]; // Fetch Tweet NSDictionary * tweet = [self.tweets objectAtIndex: [rij van indexpad]]; // Configure Cell [cell.textLabel setText: [tweet objectForKey: @ "text"]]; [cell.detailTextLabel setText: [tweet objectForKey: @ "from_user"]]; // Download profielafbeelding Asynchroon NSURL * url = [NSURL URLWithString: [tweet objectForKey: @ "profile_image_url"]]; [cell.imageBekijk setImageWithURL: url placeholderImage: [UIImage imageNamed: @ "placeholder"]]; terugkeer cel;
In tableView: cellForRowAtIndexPath:, we maken een nieuwe cel (of verwijderen een herbruikbare cel) en vullen deze met de inhoud van een tweet. Om ervoor te zorgen dat de tabelweergave soepel scrolt, downloaden we de profielafbeelding van de gebruiker asynchroon. Dit is heel gemakkelijk te bereiken met AFNetworking zoals het ons geeft setImageWithURL: placeholderImage:. Wat dit doet, is het instellen van de beeldweergave van de cel met de meegeleverde afbeelding van placeholder terwijl de profielafbeelding van de gebruiker op de achtergrond wordt gevraagd. Voeg toe om dit te laten werken placeholder.png en [email protected] naar uw Xcode-project. Je kunt beide bestanden vinden in de bronbestanden van deze tutorial.
We sturen ons verzoek naar de Twitter Search API in de frissen: actie. Bekijk de bijgewerkte implementatie hieronder. Ik zal niet ingaan op de details van hoe het AFJSONRequestOperation class werkt in deze tutorial, maar ik wil wel uitleggen hoe de stroom van het verzoek werkt. Na het opgeven van de aanvraag-URL (NSURL) en het initialiseren van het URL-verzoek (NSURLRequest), maken we een JSON-verzoekbewerking door (1) het URL-verzoek, (2) een succesblok en (3) een foutblok door te geven aan JSONRequestOperationWithRequest: succes: mislukking:. Het succesblok wordt uitgevoerd als het verzoek succesvol was en geeft ons de reactie van het verzoek als een exemplaar van NSDictionary. We extraheren de reeks tweets die we hebben aangevraagd, werken het tweets eigenschap, herlaad de tabelweergave om de tweets weer te geven en verberg de vernieuwingsregeling door er een bericht van te verzenden endRefreshing.
- (ongeldig) vernieuwen: (id) afzender // URL maken NSURL * url = [NSURL URLWithString: @ "http://search.twitter.com/search.json?q=ios%20development&rpp=100&include_entities=true&result_type=mixed/ "]; // Initialiseer URL-aanvraag NSURLRequest * urlRequest = [[NSURLRequest alloc] initWithURL: url]; // JSON Request Operation AFJSONRequestOperation * operation = [AFJSONRequestOperation JSONRequestOperationWithRequest: urlRequest success: ^ (NSURLRequest * request, NSHTTPURLResponse * response, id JSON) NSArray * results = [(NSDictionary *) JSON-objectForKey: @ "resultaten"]; if ([resultaten tellen]) self.tweets = resultaten; // Reload Table View [self.tableView reloadData]; // End Refreshing [(UIRefreshControl *) verzender endRefreshing]; fout: ^ (NSURLRequest * -verzoek, NSHTTPURLResponse * antwoord, NSError * -fout, id JSON) // End Refreshing [(UIRefreshControl *) verzender endRefreshing]; ]; // Start operatie [operatie start];
Als het verzoek mislukt, verbergen we alleen het vernieuwingsbeheer. Het is natuurlijk beter om de gebruiker te informeren dat het verzoek is mislukt, maar dit zal voor ons voorbeeld doen. We sturen het verzoek door de JSON-aanvraagbewerking te starten aan het einde van de frissen: actie.
Bouw het project opnieuw en voer het uit om de voorbeeldtoepassing in actie te zien. Als de profielafbeeldingen niet correct worden weergegeven, controleert u of u de plaatsaanduidingafbeeldingen die ik eerder aan uw project heb genoemd hebt toegevoegd.
Er zijn veel bibliotheken die de oorspronkelijke "pull-to-refresh" -functionaliteit proberen na te bootsen, maar het is goed om te zien dat Apple dit nette concept eindelijk heeft omarmd en heeft opgenomen in het UIKit-framework. Zoals je misschien al gemerkt hebt, heeft Apple in iOS 6 al de UIRefreshControl klasse om te gebruiken in sommige van zijn eigen applicaties, zoals de Podcasts-applicatie.
Accentsconagua