Modal Presentation in mobiele ontwikkeling: wat is het, schermtypen

Wat is Modal Presentation?

Modal Presentation — is een navigatiepatroon waarbij een nieuw scherm boven het huidige verschijnt en tijdelijk de interactie met de bovenliggende inhoud blokkeert. De gebruiker moet de modale taak expliciet voltooien (annuleren, opslaan, sluiten) om terug te keren naar de vorige staat.

Modaliteit lost een cognitieve taak op: het richt de aandacht van de gebruiker op één actie zonder afleiding van de rest van de interface. Dit is cruciaal voor registratieformulieren, bevestigingsdialogen, bestandsselectie en authenticatie via externe services. Human Interface Guidelines van Apple raden aan modaliteit alleen te gebruiken voor taken die voltooid moeten worden voordat verder wordt gewerkt.

In tegenstelling tot webmodale vensters, kan mobiele Modal Presentation volledig schermvullend zijn (het hele scherm innemen) of gedeeltelijk (Page Sheet, Bottom Sheet). De keuze van het type hangt af van de taakcontext en platformconventies. iOS neigt naar Page Sheet voor de meeste scenario's, en laat Full Screen over voor videospelers en fotobewerkers.

Hoe verschilt modale presentatie van Push?

Push Presentation (stapelnavigatie) voegt een scherm toe aan de navigatiestapel en toont automatisch een terugknop. De gebruiker kan op elk moment terugkeren naar het vorige scherm. Modal Presentation vereist daarentegen expliciete voltooiing: de terugknop ontbreekt of sluit het modale venster, maar keert niet terug naar het vorige scherm.

Belangrijkste verschillen tussen modale en push-presentatie: Modal Presentation blokkeert terugnavigatie zonder gegevensverlies, vereist een actie om te sluiten (Save, Cancel, Done) en presenteert meestal een aparte taak. Push Presentation behoudt de navigatiehiërarchie, voegt automatisch een terugknop toe en is geschikt voor sequentiële inhoudsweergave.

In de praktijk hangt de keuze tussen Modal en Push af van de context. Het wordt aanbevolen modaliteit te gebruiken voor taken die de gebruiker moet voltooien voordat verder wordt gegaan, en Push voor het sequentieel verkennen van inhoud. Het mengen van patronen op één scherm leidt tot verwarring en verslechtert de UX.

Modale presentatie in iOS: UIKit en SwiftUI

iOS biedt verschillende stijlen van modale presentatie via de enumeratie UIModalPresentationStyle. UIKit ondersteunt .fullScreen (volledig scherm), .pageSheet (kaart met marge bovenaan), .formSheet (gecentreerd venster op iPad) en .automatic (systeemkeuze op basis van context). Vanaf iOS 13 is de standaardstijl .automatic geworden, die voor iPhone .pageSheet kiest.

UIViewController.present

De basismethode van UIKit voor modale presentatie — present(_:animated:completion:). De controller die de methode aanroept, wordt presentingViewController en de nieuwe wordt presentedViewController. Sluiten gebeurt via dismiss(animated:completion:). SwiftUI biedt de modifier .sheet voor vergelijkbaar gedrag.

SwiftUI .sheet

De declaratieve benadering van SwiftUI gebruikt de modifiers .sheet en .fullScreenCover. De eerste maakt een Page Sheet, de tweede — een volledig schermvullende modale presentatie. Beide accepteren een binding naar Bool of een identificeerbaar object dat de zichtbaarheid van het modale venster beheert. Sluiten gebeurt door binding op false te zetten of dismiss aan te roepen uit de environment.

struct ContentView: View {
    @State private var showModal = false

    var body: some View {
        Button("Formulier openen") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

struct RegistrationForm: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        Button("Opslaan") { dismiss() }
    }
}

Modale presentatie in Android: Fragment en Compose

Android heeft geen enkele API voor modale presentatie zoals iOS. In plaats daarvan biedt het platform verschillende mechanismen: DialogFragment voor dialoogvensters, BottomSheetDialogFragment voor onderste panelen en Activity met NEW_TASK en CLEAR_TOP vlaggen voor modale schermen. In Jetpack Compose is een uniforme component Dialog verschenen voor alle soorten modale vensters.

DialogFragment

DialogFragment — de basisklasse voor modale vensters in Android SDK. Het beheert de levenscyclus van de dialoog, verwerkt schermrotatie en slaat de status op. Het fragment wordt boven Activity weergegeven zonder de navigatiestapel te blokkeren. Sluiten gebeurt via dismiss() of klikken buiten het dialooggebied als setCancelable(true).

Modal Bottom Sheet

BottomSheetDialogFragment toont een modaal venster als een paneel dat van onder omhoog komt. Dit patroon is populair in Material Design voor optieselectie, delen en snelle acties. BottomSheet kan een vaste hoogte hebben of uitbreidbaar zijn (peek height + full height). In Compose wordt ModalBottomSheet uit de Material3-bibliotheek gebruikt.

@Composable
fun ModalScreen(onDismiss: () -> Unit) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            modifier = Modifier.padding(16.dp)
        ) {
            Column {
                Text("Modaal formulier", style = MaterialTheme.typography.headlineSmall)
                Button(onClick = onDismiss) {
                    Text("Sluiten")
                }
            }
        }
    }
}

Beste praktijken voor modale presentatie

Modale vensters — een krachtig UX-hulpmiddel, maar overmatig gebruik ervan verslechtert de gebruikerservaring. Apple HIG en Google Material Design zijn het eens in de aanbevelingen: modaliteit moet worden toegepast voor gefocuste taken en niet meer dan 20% van het totale aantal navigatieacties bedragen.

Wanneer modale presentatie gebruiken

Modale vensters zijn geschikt voor scenario's: gegevensinvoer (registratieformulieren, profiel), bevestiging (verwijderen, verzenden), selectie (datumkiezer, bestandsbeheer) en authenticatie (OAuth, Firebase Auth). Als de taak minder dan 30 seconden duurt en contextblokkering vereist — kies dan voor modaliteit.

Wat te vermijden

Gebruik geen modale presentatie voor: sequentiële inhoudsweergave (gebruik Push), foutmeldingen (gebruik Toast of Snackbar), advertenties en promotionele aanbiedingen zonder expliciet verzoek van de gebruiker. Material Design raadt aan geneste modale vensters te vermijden — dit desoriënteert de gebruiker en schendt de navigatiehiërarchie.

Voor modale vensters met tekstvelden moet het verlies van toetsenbordfocus worden afgehandeld. Wanneer het toetsenbord verschijnt, moet het modale venster omhoog schuiven zodat de gebruiker de ingevoerde tekst kan zien. UIKeyboardWillShowNotification in iOS en adjustResize in Android lossen dit probleem op.

Codevoorbeelden in Swift en Kotlin

Laten we de implementatie van modale presentatie op beide platforms bekijken. Het Swift-voorbeeld toont de configuratie van UIModalPresentationStyle.pageSheet met een delegate voor het afhandelen van sluiten. Het Kotlin-voorbeeld demonstreert DialogFragment met aangepaste layout en statusopslag.

let modalVC = ModalViewController()
modalVC.modalPresentationStyle = .pageSheet

if let sheet = modalVC.sheetPresentationController {
    sheet.detents = [.medium(), .large()]
    sheet.prefersGrabberVisible = true
}

modalVC.presentationController?.delegate = self
present(modalVC, animated: true)

// MARK: - UIAdaptivePresentationControllerDelegate
extension ViewController: UIAdaptivePresentationControllerDelegate {
    func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
        print("Modaal venster gesloten")
    }
}

class ModalDialogFragment : DialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_modal, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        view.findViewById<Button>(R.id.closeButton).setOnClickListener {
            dismiss()
        }
    }
}