Zo toon je een ios alert (pop-up) in je app

Alerts zijn kleine ‘vensters’ waarin je informatie kunt tonen die de gebruiker van je app móet zien voordat hij verder gaat. De iPhone-app die we in dit artikel maken, zet zo’n iOS alert op het scherm.

1. Maak, in Xcode, een Single View Application voor de iOS Alert

Kies File → New → Project (of druk op ⌘⇧N):

Kies een template voor onze ios alert-demo

Kies, in de categorie iOS, de optie Single View Application. Geef je App een naam (bijvoorbeeld AlertApp) en een (unieke) Organization Identifier:

De opties voor dit project

Bewaar je app-project, bijvoorbeeld op het Bureaublad.

2. Open het ViewController.swift-bestand

Het bestand ViewController.swift bevat programmacode die bij het eerste (witte) scherm hoort dat wordt getoond: de eerste viewcontroller. In dit bestand voegen we regels toe om de alert te tonen.

3. Overschrijf de viewDidAppear()-methode

Vervang de complete inhoud van het ViewController-.swift-bestand door deze code:

Onze viewcontroller bevat nu één methode: viewDidAppear(_:).

4. Maak de iOS Alert

Een iOS alert is zelf ook weer een viewcontroller. Je maakt er eentje met de functie UIAlertController(title:message:preferredStyle:).

Wijzig de viewDidAppear()-methode als volgt:

Achter title staat de tekst die bovenaan in de Alert moet worden getoond. De tekst achter message wordt daaronder geplaatst.

Bij preferredStyle staat nu .alert, om aan te geven dat we een alert willen maken. Je kunt ook een Action Sheet laten tonen: een ‘paneel’ dat onderaan op het scherm verschijnt. Zet dan achter preferredStyle niet .alert, maar .actionSheet.

5. Toon de Alert

Om de Alert op het scherm te laten verschijnen, gebruik je de present()-functie. Voeg deze regel toe aan de viewDidAppear()-methode:

De complete viewDidAppear()-methode ziet er nu als volgt uit:

En de complete inhoud van ViewController.swift is:

Zie je waarschuwingen (gele badges) of foutmeldingen (rode badges)? Vergelijk je code dan goed met de versie hierboven.

6. Start je app!

Start je app, door op de ‘Play’-knop (links bovenaan op het scherm) te drukken, door Product → Run te kiezen of door op de toetscombinatie ⌘R te drukken. De Simulator wordt gestart, waarna je app in de Simulator wordt ‘afgespeeld’:

De alert, getoond in de iPhone Simulator

We komen in de buurt… De alert wordt getoond, maar we hem nog niet sluiten. Er is immers geen ‘OK’-optie om dat te doen.

Ga terug naar Xcode (druk bijvoorbeeld op ⌘Tab) en stop je app daar door Product → Stop te kiezen. (Je kunt ook op de ‘Stop’-knop linksboven drukken of de toetscombinatie ⌘. (‘Command punt’) gebruiken.)

7. Voeg een ‘OK’-optie toe

Opties die je aan iOS alerts toevoegt, worden in iOS actions genoemd. We voegen één zo’n actie toe: een OK-actie. We maken die actie vlak vóór de regel waarin de alert wordt gepresenteerd:

Nu we de actie hebben, kunnen we hem aan onze alert koppelen:

De complete viewDidAppear()-methode ziet er nu als volgt uit:

Start je app opnieuw (druk op ⌘R):

De Alert in de iPhone Simulator, nu met een OK-button

Gelukt! Je iOS alert wordt keurig getoond, meteen nadat je app is gestart.

Meer weten? Maak zelf apps

Wil je leren hoe je apps maakt voor je iPhone of iPad? Wellicht is het eBook iOS Apps bouwen met Swift – Programmeren met Swift iets voor je: ruim 400 pagina’s met alles wat je moet weten om zelf apps te kunnen bouwen – ook als je nog nooit eerder hebt geprogrammeerd.

Klik hier voor meer informatie over het eBook iOS Apps bouwen met Swift – Programmeren met Swift.