Een eerste app in XCode

Een nieuw project

Open XCode en selecteer File, New, Project. De volgende dialoog verschijnt:

Kies in de linker kolom iOS , Application en dan rechts de Single View Application. Klik op de Next knop rechts beneden, en in het volgende scherm kun je een naam voor je project opgeven:

Je moet tevens een organisatienaam opgeven en een “organisation identifier”. Die laatste is meestal een omgekeerde URL, vaak afgeleid van de website van een organisatie. Voor mijn weblog DigitalNeurosurgeon.com heb ik ook de shortlink dign.eu gereserveerd, en die gebruik ik omgekeerd zoals je ziet. Klik daarna weer op Next en in het volgende scherm op Create nadat je je project op een geschikte lokatie hebt gezet (voor deze cursus is het bureaublad een prima plek).

Je komt nu uit in de projectomgeving van XCode. In dit scherm is veel te zien. Links in beeld zie je de Navigator, en met de icoontjes bovenin kun je kiezen wat je wilt zien. Het meest linkse icoontje is de Project Navigator en geeft een bestandenoverzicht.

In het midden zie je bovenaan wat versie-gegevens van je app, en een Bundle Identifier. Voor deze introductie workshop gaan we daar niets mee doen, maar de bundle identifier is belangrijk als je je app wilt registreren in de App Store. Gelukkig is dat proces aardig geautomatiseerd tegenwoordig, maar het vereist wel nog wat handwerk. De Bundle ID moet uniek zijn, vandaar de combinatie van een organisatie identifier en app name.

Voor deze eerste app gaan we niet (voor 99% dan) met code werken. Dat kan! Uiteraard ben je wat beperkt in wat die app kan doen, maar ik wil je laten zien (en laten ervaren) hoe je een visuele interface voor een app kunt bouwen zonder dat je code nodig hebt. En daar kun je al aardig wat mee doen tegenwoordig! In dit geval gaan we een beslissingsondersteunende app bouwen voor de behandeling van een impressiefractuur aan de schedel, dat wil zeggen dat (door een trauma) een stuk schedelbot naar binnen toe is verplaatst. Grofweg gezegd zijn er twee criteria om te bepalen of een patiënt geopereerd moet worden, namlijke of er een open wond is en of de impressie meer dan 1x de botdikte is. In dat geval bestaat er een verhoogd infectierisico en heeft operatieve behandeling meestal de voorkeur, anders kan een afwachtend beleid de beste keus zijn (ik hou een slag om de arm in mijn formulering omdat de werkelijkheid nooit zwart-wit is, maar de inhoudelijke nuances laat ik buiten deze cursus ;-) ). Als ik deze besluitvorming wil samenvatten in een stroomschema, ziet dat zo uit:

Ga in de Project Navigator naar het bestand Main.storyboard:

Een storyboard is precies wat de naam zegt: een grafische weergave van de schermen in je app. Laten we eerst wat extra overzicht krijgen door de Document outline te verbergen. Zoek beneden in beeld deze balk:

En klik op het linker icoontje zodat je scherm er zo uitziet:

Je ziet nu een View Controller welke de grafische weergave van een scherm (View) regelt (Controller). Die pijl links van je view controller geeft aan dat dit het startpunt van je app is. Je kunt namelijk meerdere viewcontrollers hebben, zoals je gaat zien, maar je moet ergens beginnen.

Wat verder opvalt, is dat de viewcontroller vierkant is. Gek… een iPhone is niet vierkant, een iPad ook niet. Wel kunnen beide apparaten in twee richtingen gebruikt worden (portrait of landscape modus). Deze vierkante weergave is gerelateerd aan de tekst wAny hAny die je beneden in beeld ziet, en duidt op het gebruik van Adaptive Layout. Dit is een fantastische feature die het je makkelijk maakt om apps te ontwikkelen die er op alle apparaten (ongeacht schermresolutie e.d.) goed uitzien, zelfs schermdimensies die nog ontwikkeld moeten worden! We gaan er nog mee werken deze ochtend.

Rechts bovenin zie je deze icoontjes:

Je hebt ze gisteren ook al gezien toen je de console wilde tonen (middelste icoontje). Het linker en rechter icoontje kun je gebruiken om de linker kolom (Navigator) resp. rechter kolom (Utilities) te tonen of te verbergen. Kan wel eens handig zijn als je wat meer ruimte wilt hebben op je scherm, b.v. om aan je storyboard te werken.

Zoek nu in de (rechter) Utilities kolom de Object Library op:

Hier staan alle user interface componenten die je kunt gebruiken in je storyboard. Als eerste gaan we een label gebruiken (die geeft een kort stuk tekst weer). Je kunt die zelf zoeken, of beneden in de zoekregel de eerste letters typen:

Sleep deze label naar de viewcontroller zodat je scherm er zo uitziet:

Je kunt het label een andere tekst geven door erop te dubbelklikken. Maak er dit van:

Sleep nu het label naar het midden van het scherm, de blauwe hulplijnen tonen je dat je in het midden zit:

Nu wordt het tijd om de app voor het eerst in werking te zien! Links boven in je beeld zie je deze icoontjes:

Je kunt een apparaat (simulator) van je keuze nemen en daarna op het pijltje drukken (Build and run). De simulator start op:

En daarna verschijnt je app in beeld:

Adaptive layout

Wat is hier aan de hand? Het label staat helemaal niet in het midden! Dat klopt… De breedte van het iPhone scherm is kleiner dan het Adaptive Layout scherm, dus het label staat relatief te ver naar links. We gaan dat direct oplossen. Sluit de simulator (ik gebruik de toetsencombinatie Cmd + Q maar je kunt ook in XCode op het vierkante stop-icoontje klikken naast het Run and build pijltje. Ga terug naar Main.storyboard in de Project Navigator als die niet nog geopend is, selecteer het label en zoek daarna beneden in beeld deze icoontjes:

Klik op het meest rechter driehoekje (Resolve Auto Layout issues) en kies de optie Reset to Suggested Constraints in het onderste deel (All Views in View Controller):

Het scherm ziet er nu zo uit:

Je kunt van alles handmatig doen aan de constraints, maar vaak werken de “suggested constraints” prima. Ik gebruik deze altijd eerst, en ga pas aanpassen als het resultaat me niet bevalt.

Run de app opnieuw en zie het resultaat… Bingo!

Nu gaan we knoppen (buttons) toevoegen waarmee de gebruiker de vraag kan beantwoorden, en afhankelijk van de vraag gaan we naar een ander vervolgscherm (zoals vastgelegd in het stroomschema). Sleep eerst het label naar boven, je ziet dan ook een waarschuwing van de auto layout (de oranje lijnen) die we nu even negeren:

Zoek in de object library de Button:

Sleep twee buttons naar je viewcontroller. Hernoem ze naar “Ja” en “Nee” zodat je scherm er zo uitziet:

Nu je scherm klaar is, is het handig om die Auto Layout even te updaten. Je moet daarvoor wel iets geselecteerd hebben (de viewcontroller zelf of een van de componenten daarop) anders kun je die optie niet kiezen;

Run de app opnieuw en geniet van een startscherm dat er al bruikbaar uit begint te zien:

Tja, het ziet er wel bruikbaar uit, maar als je op de knoppen klikt, gebeurt er niets. Dat klopt.. we hebben namelijk nog niet verteld wat er dan zou moeten gebeuren! Dat gaan we nu doen.

Ga terug naar je storyboard en zoom wat uit, dat maakt het overzichtelijker om nieuwe viewcontrollers toe te voegen:

Selecteer nu twee nieuwe viewcontrollers vanuit de object library naar je storyboard:

Overgangen

Nu komt de truuk! Houd de Ctrl-toets ingedrukt en sleep nu van de Ja-knop naar je nieuwe viewcontroller (je ziet dat deze blauw kleurt als je erover komt). De volgende popup verschijnt zodra je loslaat:

Kies de bovenste optie (Show) en herhaal dit voor de Nee-knop naar de andere viewcontroller. Als je klaar bent, zou je scherm er ongeveer zo moeten uitzien (het rangschikken doe ik voor mijn eigen overzicht, dat maakt de computer niet uit):

In de viewcontroller die door de Nee-knop geopend wordt, kunnen we een nieuw label plaatsen en met Auto Layout gelijk correct uitlijnen:

Mocht je twijfelen of dit scherm wel met die Nee-knop geassocieerd wordt, dan kun je op de pijl (die officieel een Segue heet) klikken:

Run de app opnieuw, klik op de Nee-knop en je komt bij het advies uit. Cool! Maarre… hoe kom je nu terug? Dat gaat niet automatisch, tenzij we de app een navigatiestructuur meegeven. Gelukkig kan dat heel eenvoudig: klik via het menu op Editor, Embed In, Navigation Controller:

Er wordt nu een navigation controller toegevoegd en automatisch ingesteld als initial controller (pijltje links van de viewcontroller):

Selecteer de balk (“Navigation Item”) boven in je viewcontroller:

Rechts boven in beeld kun je nu een titel ingeven:

Run opnieuw… ziet er goed uit, toch?

Klik nu opnieuw op de Nee-knop en bereid je voor op een teleurstelling:

Wat is er gebeurd? Het navigation item geeft een conflic (rode balk = error) met Auto Layout.

Inmiddels weet je hoe je het kunt oplossen, toch? Ga je gang en probeer opnieuw:

Nu irriteert alleen die tekst “Back” me nog… we bouwen een Nederlandstalige app en dan wil ik de navigatie ook in het Nederlands. Dat kun je oplossen in hetzelfde scherm waar je de titel van de navigatie hebt ingegeven. Daar staat ook een optie “Back Button” waar je een tekst kunt opgeven die de gebruiker ziet om terug te keren naar dat scherm:

Onderstaand resultaat vind ik beter;

Nu heb je al dat Auto Layout gedoe niet voor niets gedaan. Selecteer maar eens de iPad om je app op te draaien:

Of een iPhone 6 Plus in landscape modus (via het simulator menu klik je op Hardware, Rotate Left):

Hee, als je hier doorheen klikt, staat het label niet lekker in het Nee-resultaat. je kunt de suggested constraints wissen (Clear) via hetzelfde menu waar je ze instelt, doe dat voor de viewcontroller die met de nee-knop verbonden is.

Kies nu de knop Align (de tweede van links met die horizontale balkjes), selecteer de volgende opties en klik op Add 2 constraints:

Probeer ’t nu maar eens opnieuw:

Nu wordt het tijd om het scherm te bouwen wanneer de eerste vraag met “Ja” wordt beantwoord. Ik toon je het resultaat, succes! :-)

Ziet goed uit, maar kijk wat er gebeurt op de iPhone:

Aha… scherm net niet breed genoeg. Selecteer in XCode in de Utilities kolom (rechts) de Attribute inspector (derde icoontje van rechts, links naast het meetlatje):

En geef nu aan dat het label twee regels mag beslaan:

Daarna nog even wat ruimte hiervoor creëren in de viewcontroller:

Run opnieuw, et voila!

Als je de simulator nu draait, merk je dat het resutaat weer wat verwrongen is. Dit komt omdat Adaptive Layout tot nu toe alle constraints als even belangrijk beschouwt. Als je op de lijn onder de Nee-knop in het tweede scherm klikt, kun je via de Size inspector (meetlatje in de Utilities kolom) de priority van die constraint verlagen:

Et voila (un autre fois)!

Nu wordt het langzaam aan tijd om onze storyboard af te maken. Je moet een nieuwe viewcontroller toevoegen voor het antwoord Ja in het tweede scherm. Indien de gebruiker Nee klikt in het tweede scherm, kun je een segue maken naar de reeds bestaande viewcontroller die verbonden is aan het antwoord Nee in het eerste scherm:

Labeltje toevoegen:

Navigation item toevoegen om ook titels te kunnen geven in de andere schermen:

Bijvoorbeeld zo:

Oogt wel zo duidelijk:

En dan nu die ene procent code die ik beloofd had! Het is absoluut niet noodzakelijk, maar in dit geval geldt: kleine moeite, groot plezier. Je hebt gezien dat de standaard kleur voor de knoppen en navigatie-items blauw is. Je kunt dat eenvoudig veranderen voor de gehele app, en dat doe je in het AppDelegate.swift bestand dat je in de Project Inspector mag selecteren. Eerst verwijderen we de code die we hier niet nodig hebben, dat houdt het overzichtelijk:

In de overgebleven functie voeg je de volgende regel toe boven de regel return true:

window?.tintColor = UIColor.redColor()

zodat het resultaat zo uitziet:

Als je de app opnieuw draait, zie het het verschil:

Zo, je hebt zojuist je (eerste?) iOS app gemaakt! Een heuse beslissingsondersteunende app voor de neurochirurgie, die draait op de iPhone, iPod Touch en iPad! De app bevat interactie door de buttons, en middels Auto Layout ziet ’ie er op alle devices goed uit. Je kunt een tintColor instellen. En je hebt op eenvoudige wijze een navigatiestructuur toegevoegd waardoor de gebruiker zich makkelijk door de app kan bewegen. Well done!

Als je zo’n mooie app gemaakt hebt, wil je deze natuurlijk ook graag op je eigen iOS device draaien, en dat kan! Vanaf XCode 7 (de huidige versie) staat Apple het eindelijk toe dat ontwikkelaars de app op hun eigen apparaat kunnen testen zonder een betaalde account te hebben (die heb je wel nog steeds nodig om apps te plaatsen in de App Store).

Mocht het niet lukken, dan kun je een gratis Apple Developer account aanmaken en met die gegevens lukt het zeker! Die account wil je toch hebben als je verder gaat met deze materie.

Download

Je kunt de complete code van dit project hier downloaden.