Serie: Een iOS-app maken in vijf stappen: Stap 4, view

Xcode

In Stap 4 maak je kennis met de view en gaan we het uiterlijk van onze app veranderen.

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 3, vind je hier.

Ik ben in 5 stappen een app aan het maken! Klik om te Tweeten

In de vorige afleveringen hebben we gezien hoe je een app bouwt en hoe je deze kunt starten in de Simulator. De app die we hebben gebouwd, was gebaseerd op één van de eenvoudigste sjablonen (templates) van Xcode: een Single View Application (een app met één view: één scherm).

Nu gaan we het uiterlijk van onze app aanpassen. De achtergrondkleur van de app maken we geel en we zetten er een label met rode tekst op.

Views

Eén van de termen die je vanaf nu steeds vaker zult tegenkomen, is view. Een app is opgebouwd uit één of meer views. Een view is een rechthoek van willekeurige afmetingen, waarin informatie kan worden getoond. Het witte scherm dat we hebben gezien toen we onze app voor het eerst hebben gestart, is ook zo’n view: eentje die het gehele scherm van de iPhone beslaat en waarvan de achtergrondkleur wit is.

Zoals gezegd: alles wat je op het scherm van een iPhone/iPad ziet, bestaat uit één of meer views. De controls (buttons, sliders, pickers enzovoort) die je in apps tegenkomt, zijn dus ook views, die op hun beurt weer uit een aantal subviews bestaan. Een view kan dus één of meer subviews hebben, maar een view heeft altijd maar één superview (de view waar hij van afstamt).

Een (wat vereenvoudigd) voorbeeld zie je in de volgende afbeelding: een iPhone-app met slechts één button.

Een iPhone-app met een button

Subviews

De knop is een subview van de hoofd-view (in het Engels main view genoemd) van onze app: de view met de witte achtergrondkleur. De tekst op de knop is een subview van de knop zelf. Er is dus sprake van drie views:

De tekst Knop! is hier een subview van de knop zelf. De knop zelf is dus de superview van de tekst Knop!. De knop zelf is een subview van de hoofd-view van onze app: deze hoofd-view is dus de superview van de knop. In de volgende afbeelding zie je daarvan een schematische weergave.

De view-hiërarchie van onze app

Nog een voorbeeld: een app met twee buttons, Knop 1 en Knop 2.

Een app met twee buttons

Onze hoofdview heeft nu twee subviews: twee knoppen. Beide knoppen hebben elk ook weer een subview: de tekst die erop staat. Schematisch ziet de view-hiërarchie er nu dus uit zoals in de volgende afbeelding.

Een uitgebreidere view-hiërarchie. De hoofd-view heeft twee subviews.

  • De hoofd-view heeft twee subviews: Knop 1 en Knop 2.
  • Knop 1 heeft één subview: de tekst Knop 1. Ook Knop 2 heeft één subview: de tekst Knop 2.
  • De tekst Knop 1 heeft geen subviews. Wel heeft deze tekst een superview: Knop 1 zelf.
  • De tekst Knop 2 heeft ook geen subviews, maar wel een superview: Knop 2 zelf.
  • De knoppen Knop 1 en Knop 2 hebben beide dezelfde superview: de hoofd-view.

Zorg ervoor dat je de begrippen subview (een view die deel uitmaakt van een andere view) en superview (de view waarvan de huidige view deel uitmaakt) goed begrijpt: als je serieus met het ontwikkelen van apps aan de slag gaat, kom je ze namelijk nog tientallen malen tegen.

We passen onze app aan

Zoals gezegd, gaan we onze app nu op de volgende manieren aanpassen:

  1. We veranderen de achtergrondkleur van de hoofd-view (main view) in geel.
  2. We zetten er een label op, met een rode tekst.

Ga naar Xcode. Als je DemoApp nog actief is: stop hem door op de Stop-knop te drukken (of met behulp van de door de toetscombinatie ⌘. (‘Command punt’).

We maken nu kennis met het allereerste bestand van onze app: het Storyboard. Zorg dat de Navigator zichtbaar is en kies de Project Navigator door op het meest linkse pictogram in de Navigator-werkbalk te kiezen. (gebruik desnoods de toetscombinatie ⌘1). Vouw, indien nodig, de DemoApp-groep open.

De File Navigator van Xcode

In de DemoApp-groep zie je zes bestanden staan. Het gaat nu om het derde bestand, met de naam Main.storyboard. Klik op dat bestand, waarna de inhoud van de Editor verandert.

Het Storyboard in Xcode

Het Storyboard

Aan de rechterkant zie je het Storyboard: een schematische weergave van onze app. Links zie je de outline, met daarin de tekst View Controller Scene.

Zie je de kolom aan de linkerkant niet? Kies dan EditorShow Document Outline.

Klap nu, door met ⌥ ingedrukt op het driehoekje vóór View Controller Scene te klikken, de View Controller Scene open. Zorg dat het resultaat er uitziet zoals in de volgende afbeelding.

De Document Outline van de app, met daarin onder andere de hoofd-view

Je weet inmiddels dat onze app een hoofd-view heeft. Een View Controller is een object dat alles regelt wat met deze hoofd-view te maken heeft (vandaar ook de term View Controller). Je ziet dat er drie onderdelen bij de View Controller horen:

  • De Top Layout Guide
  • De Bottom Layout Guide
  • Een View: de hoofd-view van onze app.

Onze app bestaat, net als elke iPhone/iPad-app, uit tientallen objecten. Deze objecten zijn hiërarchisch met elkaar verbonden. Een (sterk vereenvoudigde) weergave zie je in de volgende afbeelding.

De view-hiërarchie uit de Document Outline

Viewcontrollers

Elke iOS-app bestaat uit ten minste één view. Bij deze ‘hoofd-view’ hoort een viewcontroller. Op het moment dat de hoofd-view zichtbaar is op het scherm, is de bijbehorende viewcontroller actief.

Een viewcontroller is een object (alweer zo’n woord dat je nog regelmatig zult tegenkomen). Ook een view is een object, net als de twee andere onderdelen van de viewcontroller die we nu niet zullen bespreken: de Top Layout Guide en de Bottom Layout Guide.

Onze app heeft op dit moment slechts één viewcontroller. Dat komt omdat onze app slechts één hoofd-view heeft die moet worden beheerd (het ‘witte scherm’). De viewcontroller zorgt ervoor dat deze hoofd-view, inclusief de bijbehorende subviews, op de juiste manier op het scherm wordt gezet en dat, als de gebruiker van onze app straks iets met deze view (en de subviews) gaat doen, alles netjes wordt afgehandeld.

We veranderen de achtergrondkleur van de hoofd-view

Tot zover de theorie: terug naar Xcode. We gaan de achtergrondkleur van de hoofd-view aanpassen. Daartoe selecteren we eerst de hoofd-view. Dat kan op een paar manieren: klik op het woordje View in de Outline (links in de Editor), of klik, in het Storyboard (rechts in de Editor), ergens binnen het scherm.

Zorg nu dat het Utilities-paneel (het paneel aan de rechterkant) zichtbaar is en kies de vierde knop in de knoppenbalk ervan: de Attributes Inspector. Je kunt ook op ⌥⌘4 drukken.

Onderaan in het Utilities-paneel staat de library: een ‘bibliotheek’ met elementen die je naar je app kunt kopiëren. Een voorbeeld van zo’n library zie je in de volgende afbeelding.

Kies een view uit de Object Library van Xcode

Xcode beschikt over vier libraries. De derde library, de Object Library, bevat objecten die we in de views van onze app kunnen gebruiken, zoals buttons, sliders enzovoort. Klik op het bijbehorende icoon (zie de vorige afbeelding) om deze library te activeren.

Als het goed is, lijkt je Xcode-werkvenster nu precies op dat uit de volgende afbeelding. Zo niet, lees nog even terug en zorg dat je op de juiste plekken hebt geklikt.

Xcode

We kunnen nu de achtergrondkleur van onze hoofd-view aanpassen. In de Attributes-inspector van het Utilities-paneel (druk eventueel op ⌥⌘4) zie je een aantal van de eigenschappen van de hoofd-view.

Het venster waarin we een view kunnen aanpassen

In het derde blokje zie je de eigenschap staan waar het ons om te doen is: het veld met de naam Background, voor de achtergrondkleur van onze view.

Wijzig hier de achtergrondkleur van de view

Klik in die wit gekleurde rechthoek, waarna een kleurenpalet verschijnt. Je kunt nu een kleur kiezen of er eentje samenstellen.

Kies een nieuwe achtergrondkleur voor de view

Kies een kleur; in ons voorbeeld hebben we voor een gele kleur gekozen. De kleur van de view verandert meteen; sluit het kleurenpalet en klik ergens buiten de view om hem niet langer te selecteren. Het resultaat zie je in de volgende afbeelding.

Onze hoofd-view heeft een nieuwe achtergrondkleur

Een tekstlabel toevoegen

Als we onze app nu opnieuw zouden starten, zou je zien dat de achtergrondkleur van onze hoofd-view daadwerkelijk is gewijzigd. Maar we doen eerst nog iets anders: we voegen een rood tekstlabel toe, precies in het midden van het scherm. Ga daartoe als volgt te werk:

Stap 1

Onder het scherm met de gele hoofd-view staat een grijze balk, met daarin de tekst View as:, gevolgd door de naam van een device. Dit is de apparaatconfiguratiebalk. In de volgende afbeelding wordt de iPhone 6s als apparaat genoemd, maar bij jou kan er iets anders staan.

De Device Configuration Bar van Xcode

Dubbelklik op de tekst met de device-naam. De apparaatconfiguratiebalk klapt nu uit en toont een overzicht van apparaten.

Kies een ander device om in het Storyboard te tonen

Klik op het symbool voor de iPhone SE: het één na rechtse symbool in de lijst (de blauwe iPhone in de volgende afbeelding).

Het Xcode Storyboard toont nu een iPhone SE

Dubbelklik tot slot op de tekst View as: iPhone SE om het overzicht in te klappen.

Stap 2

Rechts onderaan, in het Utilities-paneel, staat de Object Library.

De Xcode Object Library

Zie je de Object Library niet? Klik dan op het blauwe rondje met het vierkantje erin, bovenaan in de vorige afbeelding.

Scroll, in de Object Library, naar beneden totdat je bij Label bent gekomen. Als je het Label-object niet kunt vinden, kun je ook de tekst label in het zoekvakje onder de Object Library typen.

Kies de gewenste view: een UILabel

Stap 3

Sleep het Label-object vanuit de Object Library naar de view. Zodra je met het Label-object op de view komt, zie je een blauwe waas over de view, om aan te geven dat je de View hebt geselecteerd. Wanneer het Label-object precies in het midden staat (zowel horizontaal als verticaal), verschijnen twee blauwe stippellijnen. Laat het Label-object nu los.

Het label staat nu in de hoofd-view

Het scherm ziet er nu uit zoals in de volgende afbeelding: het Label-object is geselecteerd en in het Utilities-paneel worden een aantal eigenschappen van het label getoond.

De hoofd-view en het label, in het werkscherm van Xcode

Nu gaan we aan het werk in het Utilities-paneel.

Stap 4

Verander, in het tweede veld van het Utilities-paneel, de tekst van het label in Mijn eerste app!

Stap 5

Maak de tekst rood door middel van de Color-optie.

Stap 6

Centreer de tekst via de Alignment-optie.

Het uiterlijk van het UILabel wijzigen

Stap 7

Kijk nu naar de editor. Er is iets vreemds aan de hand: slechts een klein stukje van de tekst wordt weergegeven.

Het label is gewijzigd

Stap 8

Dubbelklik op de tekst, zodat deze er uitziet zoals in de volgende afbeelding. Druk daarna op Enter.

Dubbelklik op de tekst in het UILabel

Als alles goed is gegaan, is het label nu rood en bevat het de nieuwe tekst.

Het gewijzigde UILabel-object

We hebben zojuist een label aan onze app toegevoegd. Of, preciezer: we hebben een subview toegevoegd aan de hoofd-view van onze app. Dat is het beste te zien in de Outline, links in de Editor.

De Xcode Document Outline

We starten de gewijzigde app

Nu we onze app van een nieuwe achtergrondkleur hebben voorzien en er een label aan hebben toegevoegd, is het tijd om te kijken of alles is gelukt. We geven Xcode opdracht om de app opnieuw te bouwen (dat moet na elke wijziging, hoe klein ook, gebeuren) en daarna de app in de Simulator te starten. Het snelst gaat dat met de toetscombinatie ⌘R, maar je kunt ook op de Play-knop drukken of ProductRun kiezen. Na enkele ogenblikken verschijnt onze gewijzigde app in de simulator.

Een app met een hoofd-view en een UILabel

Alles lijkt prima te werken! Onze app doet het, de achtergrondkleur is geel en er is een label te zien, dat keurig in het midden staat. Er is echter nog wel een probleem: als we onze iPhone ‘draaien’ door op ⌘→ te drukken, staat het opeens niet meer goed…

Een app zonder Auto Layout

Dat er een probleem is, wordt nog duidelijker als we voor een andere iPhone kiezen. Stop de app (ga terug naar Xcode, kies daar ProductStop, druk op ⌘. of klik op de Stop-knop in de werkbalk). Kies nu, in de werkbalk, voor iPhone 6s en start de app opnieuw (ProductRun).

Kies een ander device

Zoals je ziet, wordt de zaak er niet veel beter op, zeker niet als je de app in landschapsmodus bekijkt. Het label staat nu opeens ergens links onderin.

De app zonder Auto Layout

We hebben dus nog iets te doen. We moeten zorgen dat het label keurig wordt gecentreerd, ongeacht op welk apparaat onze app wordt uitgevoerd. Dat doen we, met behulp van Auto Layout, in de volgende stap.

Stap 5 uit deze serie verschijnt op dinsdag 21 maart.

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

Klik hier om de gratis Startersgids te downloaden.