Full Screen Cover: Was ist das, Vollbild-Präsentation und UIKit

Was ist Full Screen Cover in iOS?

Full Screen Cover ist ein modaler Präsentationsstil in iOS, bei dem der dargestellte Controller den gesamten Gerätebildschirm einnimmt. Der Elterninhalt wird vollständig ausgeblendet, was einen immersiven Effekt erzeugt und den Benutzer auf die aktuelle Aufgabe konzentriert.

Vor iOS 13 war Full Screen Cover der einzige modale Präsentationsstil auf dem iPhone. Alle Aufrufe von present(_:animated:completion:) verwendeten standardmäßig .fullScreen. Ab iOS 14 änderte Apple den Standardstil zu .automatic, der für das iPhone .pageSheet auswählt. Full Screen Cover bleibt jedoch verfügbar und wird für Szenarien verwendet, in denen vollständige Fokussierung wichtig ist.

Im Gegensatz zu Page Sheet erlaubt Full Screen Cover keine Interaktion mit dem Elterninhalt und zeigt ihn nicht unter dem modalen Fenster an. Der Benutzer kann Full Screen Cover nicht durch Wischen nach unten schließen — zum Schließen ist ein programmatischer Aufruf von dismiss(animated:completion:) oder ein Schließen-Button auf dem Bildschirm selbst erforderlich. Dieses Verhalten ist bei der Gestaltung der UX zu berücksichtigen.

Full Screen Cover vs Page Sheet: Stilvergleich

Page Sheet ist der zweite Hauptstil der modalen Präsentation, der in iOS 13 eingeführt wurde. Page Sheet wird als Karte mit einem oberen Rand angezeigt, unter dem der Elternbildschirm sichtbar ist. Der Benutzer kann Page Sheet durch Wischen nach unten schließen. Full Screen Cover hingegen blendet den Elterninhalt aus und unterstützt kein Schließen durch Wischen.

Die Wahl zwischen Full Screen Cover und Page Sheet hängt vom Inhalt und Kontext ab. Es wird empfohlen, Full Screen Cover für Inhalte zu verwenden, die volle Aufmerksamkeit erfordern: Vollbild-Video, Foto-Vorschau, Dokumentenscan. Page Sheet ist für Aufgaben, bei denen der Kontext des Elternbildschirms wichtig ist: Bearbeitungsformulare, Optionsauswahl, Detailansichten.

Implementierung in UIKit: UIModalPresentationStyle

UIKit stellt die Konstante UIModalPresentationStyle.fullScreen zur Konfiguration des modalen Präsentationsstils bereit. Das Setzen dieser Eigenschaft auf UIViewController vor dem Aufruf von present stellt sicher, dass der Controller im Vollbild angezeigt wird. Der Controller verwaltet auch das Verhalten bei Tastatureinblendung und behandelt Systemereignisse.

Konfiguration und Delegat

Nach dem Setzen des .fullScreen-Stils wird empfohlen, presentationController?.delegate zu konfigurieren, um Schließereignisse zu behandeln. Der Delegat UIAdaptivePresentationControllerDelegate ermöglicht es, Schließversuche abzufangen und Datenverlust zu verhindern. Im Gegensatz zu Page Sheet wird der Delegat bei Full Screen Cover nur bei programmatischen dismiss-Aufrufen ausgelöst.

Rotations- und Tastaturbehandlung

Full Screen Cover behandelt Bildschirmrotation und Tastatureinblendung korrekt. Beim Drehen passt sich der modale Controller automatisch an die neue Ausrichtung an. UIKeyboardWillShowNotification ermöglicht es, den Inhalt nach oben zu verschieben, wenn die Tastatur erscheint, sodass Textfelder sichtbar bleiben. Im Gegensatz zu Page Sheet ändert Full Screen Cover seine Größe bei Tastatureinblendung nicht.

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

// Schließen
dismiss(animated: true) {
    print("Player geschlossen")
}

SwiftUI: der .fullScreenCover-Modifikator

SwiftUI stellt den Modifikator .fullScreenCover zur deklarativen Erstellung von modalen Vollbildfenstern bereit. Im Gegensatz zu .sheet (Page Sheet) erstellt .fullScreenCover den Stil .fullScreen mit ähnlichem Verhalten: vollständige Inhaltsabdeckung und kein Schließen durch Wischen.

Verwendung mit Binding und Daten

Der Modifikator akzeptiert ein Binding auf Bool oder ein optionales identifizierbares Element. Wenn das Binding auf true gesetzt wird, animiert SwiftUI das Erscheinen des Vollbildfensters. Zur Datenübergabe werden der Parameter onDismiss und ein Closure mit Inhalt verwendet. Der Umweltwert \.dismiss ermöglicht das Schließen des modalen Fensters von innen.

Full Screen Cover vs Sheet

Die Wahl zwischen .fullScreenCover und .sheet in SwiftUI ist analog zu UIKit: .fullScreenCover für immersive Inhalte, .sheet für Karten. SwiftUI wählt automatisch das korrekte Schließverhalten: .sheet kann durch Wischen geschlossen werden, .fullScreenCover nur programmatisch. Die Modifikatoren können in einer einzigen View-Hierarchie kombiniert werden.

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

    var body: some View {
        Button("Kamera öffnen") {
            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("Aufnehmen") { dismiss() }
                    .foregroundColor(.white)
            }
        }
    }
}

Benutzerdefinierte Animationen und Übergänge

Full Screen Cover unterstützt benutzerdefinierte Animationen über UIModalTransitionStyle in UIKit und benutzerdefinierte Übergänge in SwiftUI. Zu den Standardstilen gehören: .coverVertical (von unten nach oben), .crossDissolve (allmähliches Erscheinen), .flipHorizontal (Umdrehen) und .partialCurl (Seiteneffekt).

UIKit: UIViewControllerAnimatedTransitioning

Für vollständig benutzerdefinierte Animationen implementieren Sie das Protokoll UIViewControllerAnimatedTransitioning. Es ermöglicht die Definition der Animationsdauer und des Übergangs selbst über die Methode animateTransition(using:). Der Animations-Controller wird über UINavigationControllerDelegate oder UIViewControllerTransitioningDelegate zugewiesen.

SwiftUI: Matched Geometry Effect

In SwiftUI werden benutzerdefinierte Übergänge für .fullScreenCover mit matchedGeometryEffect erstellt. Dieser Modifikator animiert die Bewegung eines Elements von der Eltern-View zum Vollbildfenster. Beim Tippen auf ein Foto-Thumbnail expandiert es beispielsweise sanft auf Vollbild und erzeugt einen Kontinuitätseffekt. MatchedGeometryEffect arbeitet mit id und namespace, die das Element in Ausgangs- und Zielpositionen 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()
        }
    }
}

Wann sollte man Full Screen Cover verwenden?

Full Screen Cover wird für Szenarien empfohlen, in denen der Inhalt den gesamten Bildschirm ohne Ablenkung durch die Elternoberfläche einnehmen soll. Apple HIG identifiziert drei Hauptkategorien: Medieninhalte, Tools zur Inhaltserstellung und temporäre Systemschnittstellen.

Medien und Unterhaltung

Videoplayer, Fotobetrachtung, PDF- und Comic-Lesen sind typische Anwendungsfälle für Full Screen Cover. AVPlayerViewController in iOS verwendet automatisch den Vollbildmodus beim Wechsel ins Querformat. Fotobearbeitungsprogramme wie Adobe Lightroom öffnen einen Vollbild-Editor über der Fotobibliothek.

Tools zur Inhaltserstellung

Kamera, Dokumentenscanner, Sprachaufnahme — Aufgaben, die die volle Aufmerksamkeit des Benutzers erfordern. UIImagePickerController verwendete vor iOS 14 Full Screen Cover für die Kamera. Ab iOS 14 verwendet der System-Picker Page Sheet, aber der Entwickler kann für eine benutzerdefinierte Kamera .fullScreen erzwingen.

Was vermeiden

Verwenden Sie Full Screen Cover nicht für: Registrierungsformulare (Page Sheet ist vorzuziehen), Bildschirme mit Texteingabe, bei denen der Kontext der Elterngruppe wichtig ist, und sequenzielle Navigation innerhalb des modalen Fensters. Material Design empfiehlt auch, die System-Zurück-Taste nicht zu blockieren — dies ist in iOS akzeptabel, aber der Benutzer sollte eine klare Möglichkeit zum Schließen über ein UI-Element haben.