Full Screen Cover: wat is het, volledige-schermpresentatie en UIKit

Wat is Full Screen Cover in iOS?

Full Screen Cover — een stijl van modale presentatie in iOS waarbij de gepresenteerde controller het hele scherm van het apparaat inneemt. De bovenliggende inhoud wordt volledig verborgen, wat een immersief effect creëert en de gebruiker op de huidige taak focust.

Vóór iOS 13 was Full Screen Cover de enige stijl van modale presentatie op de iPhone. Alle aanroepen van present(_:animated:completion:) gebruikten standaard .fullScreen. Vanaf iOS 13 veranderde Apple de standaardstijl naar .automatic, die voor iPhone .pageSheet kiest. Full Screen Cover blijft echter beschikbaar en wordt gebruikt voor scenario's waar volledige focus belangrijk is.

In tegenstelling tot Page Sheet laat Full Screen Cover geen interactie met bovenliggende inhoud toe en toont deze niet onder het modale venster. De gebruiker kan Full Screen Cover niet sluiten door naar beneden te vegen — voor sluiten is een programmatische aanroep van dismiss(animated:completion:) of een sluitknop op het scherm zelf nodig. Dit gedrag is belangrijk om te overwegen bij UX-ontwerp.

Full Screen Cover vs Page Sheet: stijlen vergelijken

Page Sheet — de tweede belangrijke stijl van modale presentatie, verschenen in iOS 13. Page Sheet wordt weergegeven als een kaart met een opening aan de bovenkant, waaronder het bovenliggende scherm zichtbaar is. De gebruiker kan Page Sheet sluiten door naar beneden te vegen. Full Screen Cover daarentegen verbergt de bovenliggende inhoud en ondersteunt geen sluiten door te vegen.

De keuze tussen Full Screen Cover en Page Sheet hangt af van de inhoud en context. Aanbevolen wordt om Full Screen Cover te gebruiken voor inhoud die volledige aandacht vereist: video in volledige-schermmodus, fotovoorbeeld, documentscannen. Page Sheet — voor taken waar de context van het bovenliggende scherm belangrijk is: bewerkingsformulieren, optieselectie, detailweergave.

Implementatie op UIKit: UIModalPresentationStyle

UIKit biedt de constante UIModalPresentationStyle.fullScreen voor het configureren van de modale presentatiestijl. Het instellen van deze eigenschap op UIViewController vóór de present-aanroep garandeert dat de controller op volledig scherm wordt weergegeven. De controller beheert ook het gedrag bij het verschijnen van het toetsenbord en de verwerking van systeemgebeurtenissen.

Configuratie en delegate

Na het instellen van de .fullScreen-stijl wordt aanbevolen om presentationController?.delegate te configureren voor het afhandelen van sluitgebeurtenissen. De delegate UIAdaptivePresentationControllerDelegate maakt het mogelijk om een sluitpoging te onderscheppen en gegevensverlies te voorkomen. In tegenstelling tot Page Sheet wordt de delegate voor Full Screen Cover alleen geactiveerd bij een programmatische dismiss-aanroep.

Rotatie en toetsenbord afhandelen

Full Screen Cover handelt schermrotatie en het verschijnen van het toetsenbord correct af. Bij rotatie past de modale controller zich automatisch aan de nieuwe oriëntatie aan. UIKeyboardWillShowNotification maakt het mogelijk om inhoud omhoog te schuiven bij het verschijnen van het toetsenbord, zodat tekstvelden zichtbaar blijven. In tegenstelling tot Page Sheet verandert Full Screen Cover zijn afmetingen niet bij het verschijnen van het toetsenbord.

let playerVC = VideoPlayerViewController()
playerVC.modalPresentationStyle = .fullScreen
playerVC.modalTransitionStyle = .crossDissolve
present(playerVC, animated: true) {
    playerVC.startPlayback()
}

// Sluiten
dismiss(animated: true) {
    print("Speler gesloten")
}

SwiftUI: modifier .fullScreenCover

SwiftUI biedt de modifier .fullScreenCover voor het declaratief maken van modale vensters op volledig scherm. In tegenstelling tot .sheet (Page Sheet) creëert .fullScreenCover de .fullScreen-stijl met analoog gedrag: volledige bedekking van inhoud en geen sluiten door te vegen.

Gebruik met binding en gegevens

De modifier accepteert een binding op Bool of een optioneel identificeerbaar object. Wanneer de binding op true wordt gezet, animeert SwiftUI het verschijnen van het volledige-schermvenster. Voor gegevensoverdracht wordt de parameter onDismiss en een closure met inhoud gebruikt. De omgevingswaarde \.dismiss maakt het mogelijk om het modale venster van binnenuit te sluiten.

Full Screen Cover vs Sheet

De keuze tussen .fullScreenCover en .sheet in SwiftUI is analoog aan UIKit: .fullScreenCover voor immersieve inhoud, .sheet voor kaarten. SwiftUI selecteert automatisch het juiste sluitgedrag: .sheet kan worden gesloten door te vegen, .fullScreenCover — alleen programmatisch. Modifiers kunnen worden gecombineerd in dezelfde View-hiërarchie.

struct CameraView: View {
    @State private var showCamera = false

    var body: some View {
        Button("Camera openen") {
            showCamera = true
        }
        .fullScreenCover(isPresented: $showCamera) {
            CameraPreviewView()
                .ignoresSafeArea()
        }
    }
}

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

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            VStack {
                Spacer()
                Button("Vastleggen") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Aangepaste animaties en overgangen

Full Screen Cover ondersteunt aangepaste animaties via UIModalTransitionStyle in UIKit en aangepaste overgangen in SwiftUI. Standaard stijlen: .coverVertical (van onder naar boven), .crossDissolve (geleidelijk verschijnen), .flipHorizontal (omdraaien) en .partialCurl (pagina-effect).

UIKit: UIViewControllerAnimatedTransitioning

Implementeer voor volledig aangepaste animatie het protocol UIViewControllerAnimatedTransitioning. Hiermee kunt u de animatieduur en de overgang zelf definiëren via de methode animateTransition(using:). De animatiecontroller wordt toegewezen via de delegate UINavigationControllerDelegate of UIViewControllerTransitioningDelegate.

SwiftUI: Matched Geometry Effect

In SwiftUI worden aangepaste overgangen voor .fullScreenCover gemaakt via matchedGeometryEffect. Deze modifier animeert de verplaatsing van een element van de bovenliggende View naar het volledige-schermvenster. Bijvoorbeeld, bij het klikken op een fotominiatuur wordt deze soepel uitgevouwen naar het volledige scherm, wat een continuïteitseffect creëert. MatchedGeometryEffect werkt met id en namespace, die het element in de bron- en doelpositie verbinden.

struct PhotoViewer: View {
    @State private var selectedPhoto: String?
    @Namespace private var animation

    var body: some View {
        HStack {
            ForEach(["photo1", "photo2"], id: \.self) { photo in
                Image(photo)
                    .matchedGeometryEffect(id: photo, in: animation)
                    .onTapGesture { selectedPhoto = photo }
            }
        }
        .fullScreenCover(item: $selectedPhoto) { photo in
            Image(photo)
                .matchedGeometryEffect(id: photo, in: animation)
                .ignoresSafeArea()
        }
    }
}

Wanneer Full Screen Cover gebruiken?

Full Screen Cover wordt aanbevolen voor scenario's waar inhoud het hele scherm moet innemen zonder afleiding van de bovenliggende interface. Apple HIG onderscheidt drie hoofdcategorieën: mediacontent, tools voor het maken van content en tijdelijke systeeminterfaces.

Media en entertainment

Videospelers, fotoweergave, PDF-lezen en strips — typische voorbeelden van Full Screen Cover-gebruik. AVPlayerViewController in iOS gebruikt automatisch de volledige-schermmodus bij overschakeling naar landscape. Fotobewerkers zoals Adobe Lightroom openen een volledige-schermbewerker boven de fotobibliotheek.

Tools voor het maken van content

Camera, documentscanner, spraakopname — taken die volledige aandacht van de gebruiker vereisen. UIImagePickerController gebruikte tot iOS 14 Full Screen Cover voor de camera. Vanaf iOS 14 gebruikt de systeempicker Page Sheet, maar de ontwikkelaar kan .fullScreen forceren voor een aangepaste camera.

Wat te vermijden

Gebruik Full Screen Cover niet voor: registratieformulieren (Page Sheet heeft de voorkeur), schermen met tekstinvoer waar de context van de bovenliggende pagina belangrijk is, en sequentiële navigatie binnen het modale venster. Material Design raadt ook aan om het blokkeren van de systeem-terugknop te vermijden — in iOS is dit toegestaan, maar de gebruiker moet een duidelijke manier van sluiten hebben via een UI-element.