Serie: Een iOS-app maken in vijf stappen: Stap 3

In Stap 3 uit deze serie gaan we aan de slag met de iPhone Simulator van Xcode.

In deze serie van vijf artikelen leer je, met de gratis Xcode-app voor je Mac, zelf een app maken voor je iPhone. Je maakt niet alleen kennis met Xcode; ook een aantal aspecten van App-ontwerp komt aan de orde.

Een advies: werk deze artikelen in de juiste volgorde door en sla niets over. Na afloop heb je uitgebreid kennisgemaakt met Xcode en heb je je eerste app gebouwd!

Het vorige artikel uit deze serie, Stap 2, vind je hier.

De iPhone Simulator van Xcode

Nu we kennis hebben gemaakt met het werkvenster van Xcode, is het tijd geworden om onze eerste app te starten. Xcode heeft immers al, op basis van het sjabloon dat we aan het begin van deze stap hebben gekozen, een kant-en-klare app gemaakt. Veel doet deze app nog niet, maar we kunnen hem al starten en stoppen. En dat is precies wat we nu gaan doen. We gebruiken daarvoor de iPhone Simulator van Xcode.

Zorg dat als target de iPhone SE-Simulator is geselecteerd:

Klik, in de werkbalk van Xcode, op de Play-knop. Je kunt ook Product → Run kiezen of op ⌘R drukken.

Achter elkaar gebeuren nu de volgende dingen:

Stap 1

Xcode bouwt een uitvoerbare versie van onze app:

Stap 2

Xcode kopieert onze app naar de Simulator, een bij Xcode behorend programma, waarmee een iPhone en iPad kunnen worden nagebootst.

Stap 3

De iPhone Simulator wordt gestart.

Stap 4

De iPhone Simulator start onze app:

Bevat jouw Simulator-scherm scrollbalken omdat niet alles past? Kies dan, in de iPhone Simulator, één van de opties uit het menu Window → Scale, bijvoorbeeld 50%.

Inderdaad: een wit scherm is alles wat je op dit ogenblik ziet. Maar Xcode heeft wel degelijk een app gebouwd. Dat kun je zien als je, uit het Hardware-menu van de iPhone Simulator, de optie Home kiest (je kunt ook op ⇧⌘H drukken).

Onze App is keurig zichtbaar op het tweede Home-scherm van de Simulator, met de naam die we in de vorige stap hebben gegeven: DemoApp.

Meer over de Simulator

De Simulator is een heel handige, eigenlijk onmisbare app om je eigen apps te kunnen testen zonder dat je deze telkens op een echte iPhone of iPad hoeft te installeren. Hoewel de Simulator een Mac-app is, gedraagt hij zich als een echte iPhone of iPad. Je kunt alle bewegingen die je op je iPhone of iPad met je vinger doet, met de muis uitvoeren. Voor de Home-knop en de Vergrendel-knop zijn zowel menu-opties als toetscombinaties beschikbaar.

Met de muis ergens naar wijzen en erop klikken heeft hetzelfde effect als wanneer je op een echte iPhone/iPad met je vinger iets aanraakt. Probeer dat maar eens door op het DemoApp-pictogram te klikken.

Je kunt de Home-knop ‘indrukken’ met behulp van de toetscombinatie ⇧⌘H.

Slepen doe je door de linker muisknop ingedrukt te houden en de muis te bewegen. Knijpen (de ‘pinch’-beweging) doe je door, terwijl je ⌥ ingedrukt houdt, de muis te bewegen. Er verschijnen dan twee grijze cirkels op het scherm van de Simulator, die aangeven waar de twee voor de knijpbeweging gebruikte vingers zich bevinden.

Je kunt de Simulator ook ‚kantelen’, waarmee je doet alsof je je iPhone of iPad naar links of rechts draait. Hiervoor kun je de opties uit het Hardware-menu gebruiken: Rotate Left en Rotate Right. Er zijn ook twee toetscombinaties voor beschikbaar: ⌘← en ⌘→.

De Simulator als ander apparaat gebruiken

In de voorgaande afbeeldingen werd de Simulator gebruikt om een Engelstalige iPhone SE na te bootsen. Je kunt echter ook voor een ander apparaat kiezen, bijvoorbeeld een iPhone 5. Dit doe je met de Device-optie uit het Hardware-menu. In de volgende afbeelding zie je hoe het Home-scherm van de iPhone 5 wordt gesimuleerd, door de optie iPhone 5 te kiezen.

De taal instellen

Het instellen van de taal doe je, net als op een echte iPhone, via de Instellingen-app (in het Engels Settings). Standaard staat de iPhone Simulator op Engels ingesteld, maar niets houdt je tegen om er een Nederlandse versie van te maken.

De iPhone Simulator stoppen

Om de app in de iPhone Simulator te stoppen, ga je terug naar Xcode en druk je, op de werkbalk, op de Stoppen-knop. Je kunt ook, nadat je met ⌘Tab naar Xcode bent teruggegaan, op ⌘. drukken of Product → Stop kiezen. Niet alleen stop je hiermee de Simulator, ook activeer je de Editor van Xcode, zodat je verder kunt werken aan je app.

En dat is precies wat we in de volgende stap gaan doen. Onze App doet het, maar er is nog niet veel te zien; een leeg, wit scherm. In de volgende stap zie je hoe je dat scherm met behulp van Xcode kunt aanpassen.

LET OP: stop niet de Simulator, maar de app! Ga dus eerst terug naar Xcode en druk pas dan, in Xcode, op de toetscombinatie ⌘. (‘Command punt’), of kies Product → Stop. Sluit de Simulator niet af; de volgende keer dat je de app wilt uitvoeren, hoeft de Simulator dan niet eerst te worden gestart.

Klik hier voor stap 4 uit deze serie, waarin we het uiterlijk van de app gaan veranderen.

Dit artikel komt uit de gratis Startersgids van de iOS Academie.

Klik hier om de gratis Startersgids te downloaden.