Voit itse lisätä ja muuttaa sisältöä muokkaa-painikkeiden avulla

Ennen tallennusta suositellaan ottamaan kopio muokkausruudusta (ctrl-a -> ctrl-c)

 Olet itse vastuussa tämän teoksen käytöstä aiheutuvista vahingoista Lue lisää.

IOS sovellus

Wikikko - kansan taitopankkista
Siirry navigaatioon Siirry hakuun

Yleistä[muokkaa]

Tämä ohje perustuu developer.apple.com -sivuston esimerkkiin Start Developing iOS Apps Today, jossa opetellaan iOS-sovelluksen tekemistä. Esimerkissä tehdään tehtävälistasovellus, jota ei kuitenkaan siirretä iPhoneen tai iPadiin. Applen ohje on seikkaperäinen ja hyvin kuvitettu ja selitetty joten sitä kannattaa seurata rinnalla tai ainoastaan tehdä sen avulla. Ohjeessa Tutorial-kohdat ovat käytäntöä, muut kohdat teoriaa. Teoriaosuus selittää mistä on kyse, mutta ymmärtäminen vaatii myös C-kielen osaamista. Ohjelman lopussa on paljon Applen linkkejä ohjeisiin miten voit kehittyä iOS sovellusten tekijäksi.

Tämän sivun ohje jakautuu kahteen osaan, teoriaan ja käytännön sovelluksen tekemiseen. Kumpaakin osa-aluetta kannattaa vilkuilla kokonaisuuden hahmottamiseksi. Sovellus tehdään Xcode -ohjelmalla iPhonelle. Tässä on jätetty paljon pois teoriaa ja selitystä miten koodi toimii. Erityisesti oliolaajennus C-kielen selitys ja ohjelmakoodin toiminta on kokonaan jätetty selittämättä. Ohjeen mukaan voi kuitenkin rakentaa toimivan iOS-sovelluksen, tehtävälistan. Ei ole suositeltavaa muuttaa nimiä suomeksi, koska se voi aiheuttaa ongelmia toimivuuden kanssa. Jos ohjelmaa ei suorita tarkasti annetun mukaisesti eikä osaa korjata virheitä, on todennäköistä että jossain vaiheessa ohjetta ohjelma ei enää toimi. Sivun suomenkielinen ohje on testattu 14.12.2013 ja se toimii. Xcode versio on 5.0.2

Sivulla käytetyt käännökset eivät ole vakiintuneita käännöksiä vaan omaa suomenkielen ja englanninkielen sekasotkua. Sivu on vapaamuotoinen muistio aiheesta, eikä sillä ole mitään virallista yhteyttä Appleen.

Xcode[muokkaa]

  • Xcode sisältää lähes kaiken mitä tarvitaan koko projektin eli sovelluksen toteuttamiseen. Grafiikkaa sillä ei taida saada piirrettyä mutta sillä tehdään käyttöliittymä, kirjoitetaan ohjelmakoodi, käännettään ja hallitaan projektin tiedostoja yhdessä paikassa.
  • Ohje löytyy painamalla halutun alueen päällä hiiren oikeaa painiketta ja valitsemalla Project...Help
  • Tiedoston tuplaklikkaus avaa sen omaan ikkunaan.
  • Xcode tallentaa jatkuvasti automaattisesti. Kumoaminen Edit / Undo Typing

Xcode asennus[muokkaa]

Lataa App Store:sta ilmainen Xcode ja asenna. Sen mukana tulee myös iOS SDK. Ohjelmassa on käytetty viimeisintä Xcodea joulukuussa 2013 Mavericks Macissa.

Alueiden nimitykset[muokkaa]

  • Ikkunan (workspace window) yläreunassa on työkalupalkki, vasemmalla navigointialue, keskellä ediotrialue ja oikealla utilityalue. Utilityalueen yläosassa on esimerkiksi erilaisia työkaluja säätämiseen ja alaosassa oliokirjasto. Työkalupalkin keskellä on toimintoruutu, josta seuraat mitä kulloinkin tapahtuu. Tällä sivulla käyetyt nimitykset:
  • Navigointipalkki - vasemmanpuoleinen palkki
  • Outline valikko - vasemman palki viereen avattava kapeampi palkki
  • Utility alue - oikeanpuoleinen palkki
  • Object Library - oikeassa alakulmassa
  • Ominaisuudet valikko - oikeassa yläkulmassa

iOS simulaattori[muokkaa]

  • Minkälaiselta sovellus näyttää ja kuinka se toimii.
  • Valitse ikkunan yläkulmasta halutun laitteen näyttö. Tässä esimerkissä iPhone Retina (4-inch).
  • Ensimmäisellä kerralla pyydetään kytkemään Developer Mode päälle. Tämän johdosta ei tarvitse jatkuvasti antaa järjestelmäsalasanaa.
  • Avautuu määritellyn laitteen näköinen ikkuna.
  • Lopetus klikkaamalla ikkunaa ja cmd-q tai iOS Simulator / Quit iOS Simulator

Lähdekoodi[muokkaa]

  • Tyhjä mallipohja sisältää myös ohjelmakoodia. Suurin osa tapahtuu UIApplicationMain -funktiossa, jota automaattisesti kutsutaan projektin main.m -lähdetiedostosta.
  • m.main -tidostoa voi vilkaista: Navigointialueella avaa Supporting Files -kansio / Valitse main.m
  • @autoreleasepool on osa muistinhallintarakennetta

Sovelluksen teoriaa[muokkaa]

Määritellään konsepti[muokkaa]

Mitä sovelluksen halutaan ratkaisevan? Hyvä sovellus ratkaisee yhden, hyvin määritellyn kysymyksen. Kenelle? Mikä on tarkoitus? Minkälainen sisältö? Miten ohjelma kommunikoi käyttäjän kanssa.

Graafinen käytöliittymä (ulkoasu)[muokkaa]

  • Näkymien (views) avulla rakennetaan graafinen käyttöliittymä. Xcodessa se tehdään storyboardin avulla. Näkymät järjestyvät hierarkisesti ja näkymää alempaa kutsutaan alanäkymäksi ja ylempää supernäkymäksi. Ylimpänä hierarkiassa on ikkunaolio (window), joka luodaan UIWindow -luokasta. Se itsessään ei näy vaan siihen lisätyt sisältönäkymät. Storyboardissa koodaus tapahtuu automaattisesti taustalla. Näkymiä on erilaisia kuten sisällön näyttäminen (esim. kuva), kontrollipainikkeet, tekstinsyöttöpalkit jne. Näkymä olio on UIView -luokan tai sen alaluokkien ilmentymä.
  • Storyboard on kuvallinen esitys siitä miltä sovelluksen käyttöliittymä näyttää käyttäjälle ja toimii. Se mitä käyttäjä näkee sovellusta esimerkiksi matkapuhelimessaan käyttäessään. Storyboardin avulla suunnittelet liittymän juuri sellaiseksi kuin se lopulta näyttää. Ajattele käyttäjän näkökulmasta, että se on yksinkertaista ja loogista. Tehokas ja selkeä. Mallipohjissa on jo valmiiksi ominaisuuksia.
  • Storyboardit muodostuvat skeneistä (scene) ja jokainen skene on liitetty näkymähierarkiaan. Näkymä vedetään oliokirjastosta skeneen ja sen hierarkiaa voidaan tarkastella vasemman laidan palkista. Editorin oikeassa yläkulmassa on paneeli, jossa voit säätää näkymien asetuksia. Alhaalla keskellä on Auto Layout -painikkeet joilla voit varmistaa että suunnittelemasi liittymä näkyy oikein erikokoisissa näyttöruuduissa.
  • Yhteenveto: Pohjalla on näyttöruutu eli skene, johon vedetään näkymäkontrolleri ja siihen näkymiä (esm. tekstikenttä). Näyttöruutuja voi olla useita.

Vuorovaikutus[muokkaa]

  • Kuinka käyttäjä kommunikoi sovelluksen kanssa. iOS sovellukset perustuvat tapahtumiin (event-driven programming). Ohjelma toimii tapahtumilla, käyttäjän tai sovelluksen. Käyttäjä aktivoi käyttöliittymässä jotain mikä saa saa jonkun tapahtuman liikkeelle. Tämän seurauksena sovellus palauttaa jotain käyttäjälle käyttöliittymään. On ymmärrettävä että kontrolli sovelluksessa on käyttäjällä sen jälkeen kun ohjelmoija on määritellyt tapahtuvat toiminnot.
  • Kontrolleri (controller) reagoi käyttäjän syötteisiin ja antaa näkymiin jotain näytettävää. Näkymäkontrolleri (view controller) ei ole osa näkymähierarkiaa, mutta se on pakollinen jokaiselle näkymähierarkialle ja jokaisella on omansa. Vuorovaikutus saadaan yhdistämällä toiminnallinen ohjelmakoodi ja näkymäoliot.
  • Toiminto (action) on koodi joka käynnistyy kun sovelluksessa tapahtuu jotain käyttäjän toimesta.
1 - (IBAction)restoreDefaults:(id)sender;
sender osoittaa olioon joka käynnistää toiminnon
IBAction on erityinen avainsana
  • (outlet) ...
1 @property (weak, nonatomic) IBOutlet UITextField *textField;
  • Control on käyttöliittymän olio kuten painonappi jolla välitetään tietoa ohjelmakoodille. Kun käyttäjä suorittaa jonkin toimenpiteen näytöllä, luodaan tapahtuma (event). Control event on toiminto jota käyttäjä tekee esimerkiksi painonapilla. Tällaisia ovat esimerkiksi koskeja ja vedä, muokkaus tai arvon muuttaminen.
  • Navigointi controllereilla siirrytään näytöstä (scene) toiseen. UINavigationController huolehtii tästä. Kyseessä on navigointipino eli viimeinen sisään ensimmäisenä ulos. Ensimmäinen pinoon lisätty on juurinäkymäkontrolleri. Tässä huolehditaan myös navigointipalkista.
    • Näytöt eli skenet yhdistyvät segueilla (segue), joka yhdistää kaksi näyttöä toisiinsa. Segueita on erilaisia: push, modal, custom, unwind. Yksi näytöistä on initial view controller joka on aloitusnäyttö.

Toimintojen kirjoittaminen[muokkaa]

  • Kun on selvillä mitä toimintoja käyttäjä voi tehdä sovelluksella, kirjoitetaan ohjelmakoodi toiminnoille. Ohjelmointi tapahtuu Objective-C -ohjelmointikielellä. Se on Applen käyttämä oliolaajennus C-kieleen. Suurin osa ajasta kuluu olioiden kanssa. Erilaiset oliot kommunikoivat toistensa kanssa sovelluksessa. Luokat määrittelevät olioiden toimintoja ja ominaisuuksia.
  • bout Objective-C
  • Minkälaista tietoa varastoidaan? Tekstiä, dokumentteja, kuvia jne.
  • Design pattern
  • Model-View-Controller (MVC)
  • Target-Action. Olio lähettää viestin toiselle oliolle kun tapahtuu jotain. Viesti (Action message) määritellään lähdekoodissa. Vastaanottava olio kykenee esittämään toiminnon, tyypillisesti se on view controller. Lähettävä on esimerkiksi painike. Tätä asiaa käsiteltiin kohdassa Vuorovaikutus.
  • Foundation framework. Oliolaajennus C-kielen framework. Foundation framework yksi hyödyllisimmistä.
    • Arvo-olio (value object) varastoi arvon. Esim. NSString tai NSNumber tai NSDate. Nämä sisältävä monia näppäriä toimintoja jo valmiiksi.
  • Itse tehty luokka (custom class). Määritellään itse tiedon varastointi, käsittely ja näyttäminen. Esimerkiksi alaluokan kirjoittaminen.


Sovelluksen tekeminen käytännössä[muokkaa]

Jokainen kohta on oman pääotsikon alla tämän jälkeen samassa järjestyksessä. Yläpuolella oleva teoria täydentää ja viittaa samoin tähän järjestykseen.

  1. Xcode asennus (katso teoria yllä)
  2. Määritellään konsepti (katso teoria)
  3. Uusi Xcode projekti
  4. Luodaan graafinen käyttöliittymä (ulkoasu)
  5. Koodin lisääminen

Uusi Xcode projekti[muokkaa]

  • Avaa Xcode / Ponnahdusikkunasta Create a new Xcode project tai File/New/Project / Valitse iOS Application -valikosta Empty Application ja Next
  • Kirjoita tuotteelle nimi ToDoList / Company Identifier kirjoita com.example / Class Prefix kirjoita XYZ / Devices iPhone / Next
  • Tallenna projekti
  • Avautuu Workspace window
  • Valmiita mallipohjia löytyy, joita kannattaa hyödyntää.
Huom! Älä tallenna projektia iCloudiin! Tällöin Xcode jumiutuu ja täytyy uudelleenkäynnistää. Tallenna tietokoneen kovalevylle

Muokataan delegate implementation tiedostoa[muokkaa]

  • Navigointialueelta avaa XYZAppDelegate.m
  • Poista tiedoston alusta rivit
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];

Luodaan graafinen käyttöliittymä[muokkaa]

  • cmd-n / iOS / Storyboard ja Next / iPhone ja Next / Tarkista että tallennus tapahtuu samaan hakemistoon projektin kanssa ja Anna nimi Main.storyboard ja tarkista että Group on projektin nimi ja tarkista että Targets kohdassa projektinnimi on valittuna ja Create
  • Asetetaan storyboard pääkäyttöliittymäksi.
    • Navigointialueella valitse ylin kohta, projekti ja navigointialueen oikealta puolelta editorin yläreunasta pieni kolmio avaa uuden palkin editorin sivuun. Kolmio on suorakulmion sisällä ja tätä kutsutaan Outline alue.
    • Valitse Targets kohdasta projektisi nimi ja editorin yläpalkista General.
    • Deployment info kohdassa valitse Main Interface kohtaan Main.storyboard

Lisätään tekstikenttä[muokkaa]

  • Sisältöä ovat esimerkiksi käyttöliittymän elementit kuten painikkeet. Ne ovat Xcoden kirjastossa, josta niitä lisätää storyboard tiedostoon. Osa niistä ei tule näkyviin käyttäjälle.
  • Navigointialueelta valitse Main.storyboard Tyhjälle alueelle lisätään ja asetellaan elementit.
  • Avaa objektikirjasto. Se on oikealla alakulmassa Utilitypalkissa. Valitse otsikkoriviltä painike jossa on laatikon kuva (kolmas). Jos Utility näkymää ei näy se saadaan Views -valikosta näkyviin.
  • Vedä hiirellä View Controller editorialueelle. Nuoli ilmaisee että tämä näyttö (scene) avautuu kun sovellus käynnistetään.
    • Tehdään väliaikainen testi. Vedä hiirellä Label editorialueelle ja vie se keskelle View Controlleria niin että siniset merkkiviivat auttavat kohdistamaan sen keskelle näkymää. Kaksoisklikkaa sitä ja kirjoita Hei Maailma! . Tarvittaessa siirrä se taas hiirellä keskelle näyttöä. Tarvittaessa voit muuttaa tekstiä utilityalueella valitsemalla alueen yläreunasta neljännen kohdan kuvion jossa kärki osoittaa alaspäin.
    • Testaa iOS Simulaattorissa nyt ja muutoinkin mahdollisimman usein tämän ohjeen aikana.
    • Poista testikenttä valitsemalla se painamalla delete.
  • Vedä Text Field skenen vasempaan laitaan hiukan siitä irti skeneen ilmestyvään siniseen apuviivaan kiinni ja pystysuunnassa 1/3 ylhäältä. Vedä kenttää pitemmäksi kentässä olevasta pienestä ruudusta oikeaan laitaan kunnes ilmestyy sininen apuviiva.
    • Valitse utilityalueelta sama kentän ominaisuuksien muokkauspalkki kuten edellä. Kirjoita Placeholder kohtaan Uusi tehtävä
  • Testaa simulaattorissa. Tekstikenttään voi syöttää tekstiä kun sitä ensi klikkaa hiirellä.
  • Kokeile simulaattorissa pyörittää näyttöä painamalla cmd-nuoli vasemmalle

Säädetään tekstikentän etäisyys reunoihin[muokkaa]

  • Tarkista navigointipalkista että Main.storyboard on valittuna
  • Tartu hiirellä ctrl alas painettuna tekstikenttään ja vedä hiirellä esiin tullu näkymä näytön yläosaan reunaviivaan jolloin näyttö vaihtuu siniseksi, irrota ensin ctrl ja sitten hiiren painike. Valitse avautuvasta mustasta valikosta Top Space to Top Layout Guide.
  • Tee samoin oikealle ja valitse Trailing Space to Container ja vasemmalle Leading Space to Container.
  • Tarvittaessa apua löytyy Editor/Resolve Auto Layout Issues

Luodaan uusi näyttö (Table View)[muokkaa]

  • Tarkista navigointipalkista että Main.storyboard on valittuna
  • Vedä oliokirjastosta Table View Controller toisen näytön viereen sen VASEMMALLE puolen taustalle (canvas). Editorin oikeassa alareunassa on suurennuslasit ja = -merkki joilla voit säätää näyttöjen kokoa.
  • Tee tästä näyttö, joka näkyy käyttäjälle ensimmäisenä. Tartu hiirellä nuoleen editorissa ja siirrä se uuden näytön kylkeen tai avaa Outline view eli editorin vasemmassa alareunassa nuoli neliön sisällä ja valitse Table View Controller ja säädä ominaisuusvalikossa oikealla Is Initial View Controller ja editorissa nuoli vaihtuu uuden näytön reunalle

Näytetään staattista tietoa näytöllä[muokkaa]

  • Testataan miltä sisältö näyttää. Seuraavat voi tehdä mös Outline valikkos -kohdassa ja se onkin hyvä olla auki oppiaksesi sen käyttöä.
  • Valitse Outline valikosta kohta Table View
  • Valitse ominaisuuksista Table View kohdasta Content / Static Cells ja näytön yläosaan tulee kolme solua.
  • Valitse hiirellä ylin solu jolloin ainoastaan se on sininen. Ominaisuuksista valitse Table View Cell kohdasta Style / Basic
  • Klikkaa Titleä ja kirjoita esim. Paranna maailmaa tai valitse hiirellä Title -teksti ja ominaisuuksissa Label kohdasta kirjoita tekti. Saattaa olla myös ettei Title-teksti ilmesty, jolloin outline valikosta valitse Table View / Content View / Label ja ominaisuuskissa kirjoita Label / Text -kohtaan.
  • Toista kaksi edellistä kohtaa kahdelle muulle riville samoin

Lisätään siirtyminen näytöstä toiseen (seques)[muokkaa]

  • Valitse Outline valikosta Table View Controller
  • Valitse ylhäältä Editor / Embed In / Navigation Controller ja näytöt yhdistyvät nuolella toisiinsa.
  • Jos kokeilet simulaattorilla, huomaat että näytän yläreunaan on ilmestynyt tyhjä alue navigointia varten.

Säädetään navigointialueita[muokkaa]

  • Lisätään otsikko listanäyttöön
  • Valitse Outline View:ssa Table View Controller Scene kohdasta Navigation Item
  • Ominaisuuksissa lisää kohtaan Title Tehtävälista

Lisätään lisäyspainike (+) listanäyttöön[muokkaa]

  • Olioluokasta vedä hiirellä Bar Button Item navigointialueen oikeaan reunaan eli otsikon perään
  • Valitse Outline View:ssa Bar Button Item - Item ja ominaisuuksissa Bar Button Item kohdassa valitse Identifier / Add jolloin painike muuttu + -merkiksi

Tehdään ohjaus lisäysnäyttöön[muokkaa]

  • Paina ctrl-näppäintä ja tartu hiirellä + -painikkeeseen ja vedä se näytön päälle joka luotiin ihan alussa eli missä uusi tehtävä lisätään. Valitse avautuvasta valikosta Push
  • Syntyy virheilmoituksia, joita voit tarkastella vasemman palkissa valitsemalla kolmion jossa on huutomerkki sisällä.
  • Virheilmoitukset saadaan poistettua tässä tapauksessa valitsemalla Uusi tehtävä -tekstikenttä ja näytön alapuolella olevista painikkeista sellainen jossa on pyöreä pallo kahden merkin välissä (4. painike) ja valitsemalla valikosta Update Constraits. Tai Editor / Resolve Auto Layout Issues / Update Constraits.
  • Testaa taas simulaattorilla
  • Valitse näyttöjen välille tulleessa nuolessa oleva kuvake ja aseta ominaisuuksissa Style / Modal. Nyt Uusi tehtävä -näytöstä ei pääse enää taaksepäin navigoimalla.
  • Valitse Outline valikosta View Controller Scene:stä View Controller ja ylhäältä Editor / Embed In / Navigation Controller.

Lisätään otsikko ja painikkeita (Done ja Cancel) lisäysnäyttöön[muokkaa]

  • Valitse View Controller Scene:stä Navigation Item ja ominaisuuksissa kirjoita Title kohtaan Lisää tehtävä
  • Olioluokasta vedä hiirellä Bar Button Item navigointialueen oikeaan reunaan eli otsikon perään
  • Valitse Outline valikosta Bar Button Item - Item ja ominaisuuksissa Bar Button Item kohdassa valitse Identifier / Done
  • Olioluokasta vedä hiirellä Bar Button Item navigointialueen vasempaan reunaan eli otsikon eteen
  • Valitse Outline View:ssa Bar Button Item - Item ja ominaisuuksissa Bar Button Item kohdassa valitse Identifier / Cancel

Lisätään alaluokat UIViewControllerille[muokkaa]

  • cmd-n
  • iOS / Cocoa Touch / Objective-C class / Next
  • Class -kenttään kirjoita Class kohtaan XYZ heti perään kiinni AddtoDoItem ja valitse Sublcalss of UIViewController. Tarkista ettei ruudut ole valittuina. Next ja Create
  • Valitse navigointipalkista Main.storyboard
  • Valitse Outline valikosta View Controller valikon alta keltaisella kuvakkeella View Controller - Lisää tehtävä
  • Valitse Identity inspector joka on ominaisuudet valikon vasemmalla puolen oleva kuvake ja valitse Custom Class kohdassa Class ja viimeinen kohta XYZAddToDoItemViewController. Jos kohta ei heti tule näkyviin. Kokeile vaihtaa Outline View:ssa eri kohtia tms. kunnes valikkoon tulee kyseinen kohta näkyviin.


  • cmd-n
  • iOS / Cocoa Touch / Objective-C class / Next
  • Class -kenttään kirjoita XYZ ja ViewController väliin ToDoList ja valitse Sublclass of UITableViewController ja Next ja Create. Huomaa että Class-kentässä on nyt kuitenkin ViewController -teksti.
  • Valitse navigointipalkista Main.storyboard
  • Valitse Outline View:ssa Table View Controller valikon alta keltaisella kuvakkeella Table View Controller - Tehtävälista
  • Valitse Identity inspector:ssa Custom Class kohdassa Class ja viimeinen kohta ToDoListViewController

Lisätään palaaminen (Cancel ja Done)[muokkaa]

  • Unwind segue. Navigointipalkissa valitse XYZToDoListViewController.m
  • LIsää seuraava @implementation rivin alapuolelle. ToList voidaan korvata muulla sanalla.
- (IBAction)unwindToList:(UIStoryboardSegue *)segue
{
 
}
  • Valitse Main.storyboard
  • Vedä Cancel -painike samalla pitäen ctrl-näppäin alhaalla näytön alareunassa olevan vihreän kuvakkeen päälle. Valitse avautuvasta valikosta unwindToList eli painiketta painettaessa kutsutaan metodia.
  • Tee sama Done -painikkeelle.
  • Simulaattorissa Cancel ja Done näppäimet palauttavat nyt Tehtävälistanäyttöön lisäysnäytöstä.
  • Tässä kohtaa on nähtävissä kaksi virheilmoitusta XYZToDoListViewController.m koodissa.

Koodin lisääminen[muokkaa]

Lisätään luokka[muokkaa]

Lisätään luokka jota käytetään yksittäisten tehtäväolioiden luomiseen ja näin tehtävän varastointiin

  • cmd-n / iOS Cocoa Touch / Objective-C Class / Next
  • Class kohtaan kirjoita XYZ kiinni ToDoItem ja valitse Subclass of NSObject ja Next ja Create
  • Navigointivalikosta valitse ToDoItem.h ja lisää seuraava ennen @end sanaa
@property NSString *itemName;
@property BOOL completed;
@property (readonly) NSDate *creationDate;
  • cmd-b (tai Product / Build) kääntää koodin ja vastuaus pitää olla Succeeded. Näet sen ikkunan keskellä ylhäällä.

Pidetään listaa yksittäisistä tehtävistä[muokkaa]

  • Navigointivalikosta valitse XYZToDoListViewController.m
  • Lisää alkuun seuraava ennen @end sanaa
@property NSMutableArray *toDoItems;
  • Lisää rivin [super viewDidLoad]; jälkeen
self.toDoItems = [[NSMutableArray alloc] init];
  • Lisää alkuun seuraava @implementation kohdan jälkeen.
- (void)loadInitialData {
    XYZToDoItem *item1 = [[XYZToDoItem alloc] init];
    item1.itemName = @"Osta maitoa";
    [self.toDoItems addObject:item1];
    XYZToDoItem *item2 = [[XYZToDoItem alloc] init];
    item2.itemName = @"Osta kananmunia";
    [self.toDoItems addObject:item2];
    XYZToDoItem *item3 = [[XYZToDoItem alloc] init];
    item3.itemName = @"Paranna maailmaa";
    [self.toDoItems addObject:item3];
}
  • Lisää edellä lisäämäsi self.toDoItems = [[NSMutableArray alloc] init]; jälkeen
[self loadInitialData];
  • Lisää alkuun #import "XYZToDoListViewController.h" jälkeen.
#import "XYZToDoItem.h"
  • cmd-b ja vastuaus pitää olla Succeeded

Näytetään tehtävät[muokkaa]

  • Navigointivalikosta valitse XYZToDoListViewController.m
  • Etsi kohta - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView jonka alla on return 0;
  • Vaihda return 1;
  • Edellisen alapuolelta etsi kohta - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
  • Vaihda return
     return [self.toDoItems count];


  • Navigointipalkista valitse Main.storyboard ja Outline valikosta To Do List View Controller alta Table View
  • Ominaisuuksissa vaihda Table View Content arvoon Dynamic Prototypes
  • Valitse Outline valikosta ensimmäinen Table View Cell ja ominaisuuksissa kirjoita Table View Cell / Identifier kohtaan ListPrototypeCell ja aseta Selection arvoksi None


  • Navigointipalkista valitse XYZToDoListViewController.m
  • Etsi alempaa koodista kohta static NSString *CellIdentifier = @"Cell"; ja vaihda se
static NSString *CellIdentifier = @"ListPrototypeCell";
  • Lisää tämän jälkeen kohtaan jossa lukee // Configure the cell..
XYZToDoItem *toDoItem = [self.toDoItems objectAtIndex:indexPath.row];
cell.textLabel.text = toDoItem.itemName;
  • Kokeile simulaattorissa. Esimerkkitehtävät pitää nyt näkyä.

Merkitään tehdyt tehdyiksi[muokkaa]

Merkitään tehtävät, jotka on saatu tehtyä valmiiksi.

  • Navigointipalkista valitse XYZToDoListViewController.m
  • Lisää koodin loppuun ennen @end
#pragma mark - Table view delegate
 
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:NO];
    XYZToDoItem *tappedItem = [self.toDoItems objectAtIndex:indexPath.row];
    tappedItem.completed = !tappedItem.completed;
    [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
}
  • Lisää ylemmäs koodia kohtaan jossa aikaisemmin kirjoitit "ListPrototypeCell" seuraavat rivit rivin cell.textLabel.text = toDoItem.itemName; jälkeen
    if (toDoItem.completed) {
        cell.accessoryType = UITableViewCellAccessoryCheckmark;
    } else {
        cell.accessoryType = UITableViewCellAccessoryNone;
    }
  • Kokeile simulaattorissa. Esimerkkitehtävää painettaessa ilmestyy väkänen ja uudelleenpainettaessa häviää.

Uuden tehtävän lisääminen[muokkaa]

  • Navigointipalkista valitse XYZAddToDoItemViewController.m
  • Lisää #import <UIKit/UIKit.h> jälkeen rivi #import "XYZToDoItem.h"
  • Lisää ennen @end riviä @property XYZToDoItem *toDoItem;
  • Navigointipalkista valitse Main.storyboard ja Outline valikosta Add To Do Item View Controller olio.
  • Valitse editorin oikeasta yläkulmasta kuvake jossa näkyy "puvun rinnus", jolloin XYZAddToDoItemViewController.m ohjelmakoodi aukeaa Storyboardin viereen.
  • Valitse, paina ctrl-alas ja vedä Storyboard:sta Uusi tehtävä-tekstikenttä ohjelmakoodiin rivin @interface alle. Ponnahdusikkunaan kirjoita kohtaan Name textField ja paina Connect
  • Vedä samoin Done -painike ohjelmakoodiin äsken ilmestyneen *textField; -rivin alle. Ponnahdusikkunaan kirjoita kohtaan Name doneButton ja paina Connect
  • Navigointipalkista valitse XYZAddToDoItemViewController.m
  • Lisää @implementation rivin alle
- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if (sender != self.doneButton) return;
    if (self.textField.text.length > 0) {
        self.toDoItem = [[XYZToDoItem alloc] init];
        self.toDoItem.itemName = self.textField.text;
        self.toDoItem.completed = NO;
    }
}
  • Navigointipalkista valitse XYZToDoListViewController.m
  • Lisää #import "XYZToDoItem.h" alle #import "XYZAddToDoItemViewController.h"
  • Lisää rivin - (IBAction)unwindToList:(UIStoryboardSegue *)segue alle
    XYZAddToDoItemViewController *source = [segue sourceViewController];
    XYZToDoItem *item = source.toDoItem;
    if (item != nil) {
        [self.toDoItems addObject:item];
        [self.tableView reloadData];
    }