Luo oma iOS Flickr -sovellus: osa 1

Oletan, että tiedätte kaikki Flickrin. Tässä opetusohjelmassa näytämme, kuinka luodaan yksinkertainen sovellus, joka yhdistää Flickriin, lähettää pyynnön, jäsentää tulokset ja näyttää ne taulukonäkymässä. Pöytäkuva, jonka sinun pitäisi olla melko perehtynyt. Itse Flickr-yhteys on vähän uusi, huomaat kuitenkin, että se on hyvin samanlainen kuin Twitter-sovelluksemme. Lopuksi lelaamme sovelluksen kanssa, jotta se lataa valokuvat esteettä.

Tämän sovelluksen luonnos olisi yksinkertainen: Yksi ikkuna, joka sisältää taulukonäkymän.

Askeleet

Katsotaanpa vaiheet:

  1. Luo sovellusmuotti
  2. Yhdistä Flickriin
  3. Hae ja jäsentä tiedot
  4. Täytä taulukonäkymä
  5. Tinker!

Okei, aloitetaan luomalla Tyhjä sovellus ja kutsutaan sitä TRFlickAppiksi. Sovelluksesi sisältää vain AppDelegate-sovelluksen. Tästä AppDelegate-sovelluksesta me välitämme UITableViewController, joka näyttää lopulliset tietomme. Joten mene eteenpäin ja luo uusi UITableViewController Class-tiedosto ja nimeä se MyTableViewController.

AppDelegaten ja UITVC: n lisäksi tarvitset Flickr-sovelluksen ja JSON-kansion, jotta voisit jäsentää web-vastausten json-tuloksia. Flickr-sovellus on tarpeeksi helppo luoda. Mene vain flickr.com-sivustoon ja kirjaudu sisään tiliisi tai luo uusi tili. Teen elämäsi helpommaksi ja ehdotan, että seuraat vain tätä linkkiä: http://www.flickr.com/services/apps/create/

Periaatteessa sinun on pyydettävä API-avainta. Anna sovelluksellesi otsikko, jos haluat. Tärkeä resurssi tässä on API-avain. Tätä Flickr.com-sovellusliittymä käyttää todentamaan iOS-sovelluksesi päästäksesi Flickr.com-palveluun.

Nyt JSON-parserille! Käytämme Stig Brautasetin JSON-jäsennysohjelmaa. Se sijaitsee Githubissa ja tarvitset vain Classes-kansiota, joka sisältää siinä olevat SBJSON-tiedostot. Joten lisää tämä projektiisi.

Nyt kun meillä on kaikki neljä resurssia, siirrytään töihin.

Koodi

Ilmoita MyTableViewController eteenpäin AppDelegate.h -sovelluksessa, luo sille ivar ja tee siitä omaisuus:

 @luokka MyTableViewController; 
 MyTableViewController * myTableViewController; 
 @ominaisuus (ei-atominen, säilytä) IBOutlet UIWindow * -ikkuna; 

Yllä olevat kolme riviä suorittavat tämän tehtävän. Tiedät jo, mihin heidän pitäisi mennä AppDelegaten sisällä. Tuo AppDelegate.m-tiedostoon maahan MyTableViewController, syntetisoi ominaisuus ja pikakuvaa / lataa vc appDidFinishLaunching-menetelmällä.

 #import "MyTableViewController.h" 
 @syntesoi myTableViewController; 
 self.myTableViewController = MyTableViewController alloc initWithStyle: UITableViewStylePlain; 
 myTableViewController.view.frame = UIScreen mainScreen .applicationFrame; 
 ikkuna addSubview: myTableViewController.view; 
 // Ohjauspiste mukauttamiselle sovelluksen käynnistyksen jälkeen 
 ikkuna makeKeyAndVisible; 

Ja älä unohda vapauttaa omaisuutta dealloc-menetelmälläsi, paitsi jos käytät ARC: tä. Se on se AppDelegatelle.

Kun siirryt vc: hen, lisää kaksi ivaaria sisältämään nimiä ja valokuvia MyTableViewController.h:

 NSMvableArray * valokuvanimet; 
 NSMvableArray * photoURL: t; 

Muista tuoda loput kaksi resurssia MyTableViewController.m: iin:

 #import "JSON.h" 
 #import "FlickrAPIKey.h" 

Nyt laitetaan nämä resurssit yhteen. Käynnistä vc-alustimessa taulukon ivarit:

 - (id) initWithStyle: (UITableViewStyle) -tyyli 
 { 
 itse = super initWithStyle: style; 
 jos (itse) { 
 photoURLs = NSMvableArray alloc init; 
 photoNames = NSMvableArray alloc init; 
 omalatausFlickrPhotos; 
 } 
 palata itse; 
 } 

Koska kuvien on oltava suurempia arvostettavaksi, tehdään käyttäjälle suositus ja suurennetaan tyypillistä solua tekemällä tämä viewDidLoad:

 - (tyhjä) viewDidLoad 
 { 
 self.tableView.rowHeight = 95; 
 } 
 Tarvitset ainakin numeroOfRowsInSection-menetelmän, joten ota se käyttöön taulukkomäärän perusteella: 
 - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) -osa 
 { 
 palauta photoNames count; 
 } 

Oletetaan nyt, että valokuva- ja nimimatriisimme ovat asuttuja, ja huolehdimme niiden näyttämisestä taulukonäkymässä:

 - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath 
 { 
 UITableViewCell * solu = UITableViewCell alloc initWithStyle: UITableViewCellStyleDefault reuseIdentifier: @ "Solutunniste" automaattinen vapautus; 
 cell.textLabel.text = photoNames objectAtIndex: indexPath.row; 
 NSData * imageData = NSData dataWithContentsOfURL: photoURLs objectAtIndex: indexPath.row; 
 cell.imageView.image = UIImage imageWithData: imageData; 
 paluukenno; 
 } 

Ok, katsotaanpa. Jos valokuvat ja nimimatriisimme ovat asuttuja, me purkamme arvon nimimatriisiin ja sijoitamme sen soluun.textLabel.text. Teemme jotain samanlaista kuvien kanssa. Me purkamme ne NSData-objektiin ja laitamme sen soluun.mageView.image.

Täytä taulukot

Nyt kun meillä on näyttöosa poissa tieltä, keskitytään todelliseen täyttämään nuo taulukot oikein. Sitä varten siirrytään initWithStyle-menetelmäämme, jossa kutsuttiin nimellä self loadFlickrPhotos; menetelmä. Toteutetaan tämä menetelmä nyt.

 - (tyhjä) loadFlickrPhotos 
 { 
 // 1. Luo Flickr API -pyyntösi Flickr API -avaimella FlickrAPIKey.h 
 NSString * urlString = NSString stringWithFormat: @ "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=%@&tags=%@&per_page=10&format=json&nojsoncallback=1", FlickrAPIKey, @ "mayan2012"; 
 NSURL * url = NSURL URLWithString: urlString; 
 // 2. Hanki URLResponse-merkkijono ja jäsentä JSON Foundation -objekteihin. 
 NSString * jsonString = NSString stringWithContentsOfURL: URL-koodaus: NSUTF8StringEncoding-virhe: nolla; 
 NSD Dictionary * results = jsonString JSONValue; 
 // 3. Valitse tulokset ja rakenna taulukot 
 NSArray * photos = tulokset objectForKey: @ "photos" objectForKey: @ "photo"; 
 (NSD Dictionary * -valokuva kuvissa) { 
 // 3.a Hanki nimike e / valokuva 
 NSString * title = valokuva objectForKey: @ "title"; 
 photoNames addObject: (otsikon pituus> 0? otsikko: @ "nimetön"); 
 // 3.b Luo e / valokuva URL. 
 NSString * photoURLString = NSString stringWithFormat: @ "http: //farm%@.static.flickr.com/%@/%@_%@_s.jpg", photo objectForKey: @ "farm", photo objectForKey : @ "palvelin", valokuva objectForKey: @ "id", valokuva objectForKey: @ "salainen"; 
 photoURLs addObject: NSURL URLWithString: photoURLString; 
 } 
 } 

Ok, katsotaanpa tätä. Huomaa, että se on hyvin samanlainen kuin Twitterin sovellusliittymä. Rakennat Request-objektin käyttämällä jotain todentaaksesi sinut (API-avain) ja jotain etsittävää ("mayan2012" -merkkijono) tapauksessamme.

Sitten luot NSURL-merkkijonoobjektin. Sitten saamme URL-vastauksen ja jäsentämme sen käyttämällä JSONValue-arvoa ja laitamme sen NSD-sanakirjaan. Sitten yksinkertaisesti siirrymme tuloksena olevan sanakirjan läpi ja haemme kiinnostavat arvot ja laitamme ne vastaavaan taulukkoon.

Voila! Olemme valmiita!

No, paitsi vielä yksi asia. Meidän on itse kerrottava sovellukselle, mikä API-avain on. Luo Objective C-otsikkotiedosto nimeltä FlickrAPIKey.h ja laita tämä rivi siihen:

 NSString * const FlickrAPIKey = @ "YOURAPIKEYVALUE"; 

Okei, nyt voit rakentaa ja ajaa projektisi. Näet taulukonäkymän täyttyvän nimillä ja kuvilla, jotka liittyvät "mayan2012" Flickr-hakuun.

Näytä ohjaimet

Tämä oli melko yksinkertainen sovellus, mutta sen tarkoitus on melko tärkeä. Jos olet seurannut iOS Build it Yourself -sarjaamme, tämä sovellus vahvistaa tietämystäsi taulukonäkymäohjaimista, yhteyden muodostamisesta verkkopalveluihin, JSON: n avulla Web-tulosten jäsentämiseen ja Objective-C: n peruskäytännön käytöksiin.

Pudota meille linja, jos sinulla on toistaiseksi kysyttävää. Jatkamme tämän sovelluksen kiillottamista toisessa osassa myöhemmin tässä kuussa.

Lue myös:

  • Luo itse iOS Twitter-asiakas, osa 1
  • Luo itse iOS Twitter-asiakas, osa 2
  • Luo itse iOS Twitter -asiakas, osa 3

© Copyright 2020 | mobilegn.com