Sheet in der mobilen Entwicklung — Wesen, Arten und Funktionsweise

Was ist ein Sheet in mobilen Anwendungen

Sheet ist eine oberflächliche UI-Komponente, die vom unteren Bildschirmrand hochgleitet und zusätzliche Inhalte oder Aktionen anzeigt, ohne den Benutzer vom aktuellen Bildschirm wegzubringen. Im Gegensatz zu Vollbildübergängen bewahrt ein Sheet den Kontext: Der Benutzer sieht den Hintergrundbildschirm und versteht, woher das Sheet erschienen ist.

Die Architektur eines Sheets basiert auf einem Behälter mit einstellbarer Höhe. Im minimalen Zustand (collapsed) ist nur ein Teil des Inhalts sichtbar — normalerweise ein Titel oder ein kleines Bedienfeld. Der Benutzer kann das Sheet nach oben ziehen, um es zu erweitern (expanded), oder nach unten wischen, um es zu schließen. Dieses Verhalten erinnert an ein physisches Blatt Papier, das unter einem Stapel hervorgezogen wird — daher der Name.

Google hebt in den Material Design 3-Richtlinien (2024) zwei Schlüsselszenarien für die Verwendung von Sheet hervor: Anzeigen zusätzlicher Aktionen, die nicht in die Hauptsymbolleiste passen, und Anzeigen von Formularen oder detaillierten Informationen, ohne zu einem separaten Bildschirm zu navigieren. Auf iOS hat Apple ab iOS 15 systemweite Sheet-Unterstützung über UISheetPresentationController hinzugefügt, was die Universalität des Musters bestätigt.

Arten von Bottom Sheet: Standard, Modal und Erweitert

Material Design definiert drei Arten von Bottom Sheet, jede mit eigenem Verhalten und Anwendungsbereich. Die Wahl des richtigen Typs wirkt sich direkt auf die Benutzererfahrung und die Einhaltung der Plattformrichtlinien aus.

Standard Bottom Sheet

Standard Bottom Sheet ist eine nicht-modale Komponente: Der Benutzer kann mit dem Hintergrundbildschirm interagieren, ohne das Sheet zu schließen. Beim Durchsuchen einer Produktliste im Hintergrund sieht der Benutzer beispielsweise Filter in einem Bottom Sheet und kann sie ändern, ohne das Bedienfeld zu schließen. Das Sheet passt seine Höhe an den Inhalt an — von 30% bis 90% des Bildschirms.

Das Standard Bottom Sheet blockiert den Hintergrund nicht und ermöglicht die Interaktion mit dem Hauptinhalt. Dies ist der Hauptunterschied zu einem modalen Sheet, das eine obligatorische Aktion zum Fortfahren erfordert. Verwenden Sie ein Standard-Sheet, wenn die zusätzlichen Informationen für das Hauptszenario nicht kritisch sind.

Modales Bottom Sheet

Modales Bottom Sheet blockiert die Interaktion mit dem Hintergrundbildschirm, bis der Benutzer eine Aktion innerhalb des Sheets ausführt. Ein solches Sheet wird immer im erweiterten Zustand angezeigt und erfordert ein explizites Schließen — durch eine Schaltfläche, eine Aktion oder Wischen nach unten. Material Design empfiehlt ein modales Sheet für Anmeldeformulare, Bestätigungen und kritische Einstellungen.

Auf Android wird das modale Bottom Sheet über BottomSheetDialogFragment implementiert, das automatisch den Hintergrund blockiert. Auf iOS bietet die modale Variante von UISheetPresentationController mit dem Parameter .mediumDetent ein ähnliches Verhalten. Ein modales Sheet sollte nur verwendet werden, wenn der Kontext die Aufmerksamkeit des Benutzers erfordert.

Erweitertes Bottom Sheet

Erweitertes Bottom Sheet kombiniert die Eigenschaften von Standard und Modal: Es beginnt als nicht-modal im collapsed-Zustand, wird aber beim Hochziehen modal. In der Praxis bedeutet dies, dass der Benutzer zunächst einen Blick auf den Inhalt werfen und dann entscheiden kann — das Sheet zum detaillierten Studium erweitern oder schließen.

Dieses Muster ist besonders beliebt in Karten und Navigations-Apps, wo das untere Bedienfeld kurze Informationen über einen Routenpunkt anzeigt und beim Hochwischen mit Details erweitert wird. Google Maps verwendet genau dieses erweiterte Sheet, um Informationen über Orte und Routen anzuzeigen.

Bottom Sheet auf Android: Material Design und Jetpack Compose

Android SDK bietet mehrere APIs zur Implementierung von Bottom Sheet, angefangen vom klassischen View-basierten Ansatz bis hin zu modernem Jetpack Compose. Die Material Components Library für Android enthält fertige Implementierungen von BottomSheetDialogFragment und BottomSheetBehavior.

BottomSheetBehavior im XML-Layout

BottomSheetBehavior ist eine Klasse aus Material Components, die an jede View angehängt wird und deren Position auf dem Bildschirm steuert. Der Entwickler legt drei Zustände fest: STATE_COLLAPSED, STATE_EXPANDED und STATE_HIDDEN. Behavior verarbeitet automatisch Ziehgesten und Animationen.

val sheet = findViewById<View>(R.id.bottom_sheet)
val behavior = BottomSheetBehavior.from(sheet)
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
behavior.peekHeight = 200

Bottom Sheet in Jetpack Compose

Jetpack Compose bietet eine deklarativere API über die ModalBottomSheet-Komponente aus Material 3. Im Gegensatz zum View-basierten Ansatz ist Bottom Sheet in Compose eine composable-Funktion, die Zustand und Inhalt akzeptiert. Das Sheet animiert automatisch das Erscheinen, das Ausblenden und Höhenänderungen beim Ziehen.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterSheet(onDismiss: () -> Unit) {
    ModalBottomSheet(onDismissRequest = onDismiss) {
        Text("Filter")
        Button(onClick = onDismiss) { Text("Anwenden") }
    }
}

BottomSheetDialogFragment für modale Szenarien

BottomSheetDialogFragment ist ein spezialisiertes DialogFragment, das als Bottom Sheet angezeigt wird. Es verarbeitet automatisch Modalität, Lebenszyklus und Konfigurationsänderungen. Der Entwickler muss nur onCreateView überschreiben und das Sheet-Layout zurückgeben. Laut Google-Dokumentation (Android Developers, 2024) ist BottomSheetDialogFragment der empfohlene Ansatz für modale Bottom Sheets in klassischem Android.

Sheet auf iOS: UISheetPresentationController und SwiftUI

Apple hat ab iOS 15 systemweite Sheet-Unterstützung über UISheetPresentationController eingeführt. Davor implementierten Entwickler Bottom Sheet manuell über benutzerdefinierte Übergänge oder Drittanbieter-Bibliotheken. Apples natives Sheet unterstützt detents — vordefinierte Erweiterungsstufen.

UISheetPresentationController in UIKit

UISheetPresentationController ist ein integrierter Präsentationscontroller, der einen View Controller als Sheet anzeigt. Der Entwickler gibt ein Array von detents an — Höhenwerte, bei denen das Sheet anhalten kann. iOS 16 fügte benutzerdefinierte detents mit beliebiger Höhe hinzu. Apple empfiehlt, medium (.medium) und large (.large) als primäre detents zu verwenden.

let viewController = MySheetViewController()
if let sheet = viewController.sheetPresentationController {
    sheet.detents = [.medium, .large]
    sheet.prefersGrabberVisible = true
    sheet.preferredCornerRadius = 16
}
present(viewController, animated: true)

.sheet-Modifikator in SwiftUI

SwiftUI bietet den .sheet-Modifikator, der die Sheet-Anzeige an einen Zustand bindet. Wenn eine published-Variable true wird, zeigt SwiftUI automatisch das Sheet an. SwiftUI unterstützt auch detents über den .presentationDetents-Modifikator, der in iOS 16 hinzugefügt wurde.

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

    var body: some View {
        Button("Sheet anzeigen") { showSheet = true }
            .sheet(isPresented: $showSheet) {
                FilterView()
                    .presentationDetents([.medium, .large])
            }
    }
}

Sheet in plattformübergreifenden Frameworks: Flutter und React Native

Plattformübergreifende Frameworks unterstützen ebenfalls Bottom Sheet und passen das Verhalten an die Zielplattform an. Flutter und React Native bieten eingebaute und benutzerdefinierte Implementierungen mit unterschiedlicher Flexibilität.

Bottom Sheet in Flutter

Flutter SDK enthält zwei Methoden zum Anzeigen von Bottom Sheet: showBottomSheet (Standard) und showModalBottomSheet (Modal). Material Design in Flutter folgt denselben Prinzipien wie in Android — das Sheet erscheint von unten, unterstützt Ziehen und hat einstellbare Höhe. Für erweitertes Verhalten mit detents wird DraggableScrollableSheet verwendet.

Scaffold.of(context).showBottomSheet((context) {
    return Container(
        padding: EdgeInsets.all(16),
        child: Column(
            children: [
                Text("Sheet-Inhalt"),
                ElevatedButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text("Schließen")
                )
            ]
        )
    );
})

Bottom Sheet in React Native

React Native hat keine eingebaute Bottom Sheet-Komponente im Kern, daher verwenden Entwickler Drittanbieter-Bibliotheken. Die beliebteste ist @gorhom/bottom-sheet (über 7.000 Sterne auf GitHub, 2024). Sie bietet ein gestengesteuertes Bottom Sheet mit Unterstützung für Snap Points, Animationen und fixierte Kopfzeilen. Die Bibliothek basiert auf Reanimated 2 und Gesture Handler für 60 FPS Leistung.

Bewährte Verfahren und häufige Fehler

Die korrekte Verwendung von Bottom Sheet erfordert die Einhaltung der Plattformrichtlinien und das Verständnis der Szenarien, in denen ein Sheet angemessen ist. Lassen Sie uns die wichtigsten Empfehlungen und häufigen Fehler beim Entwerfen von Sheets durchgehen.

Wann Bottom Sheet verwenden

Bottom Sheet ist optimal für Aktionen, die ergänzend zum Hauptinhalt auf dem Bildschirm sind. Filter, Sortierung, Optionenauswahl, kurze Informationen zu einem Element — typische Szenarien. Material Design empfiehlt die Verwendung von Bottom Sheet für Werkzeuge, die nicht den gesamten Bildschirm einnehmen sollen, aber mehr Platz benötigen als ein Action Sheet oder Popup-Menü.

Wann Bottom Sheet NICHT verwenden

Verwenden Sie Bottom Sheet nicht für kritische Warnungen oder Fehler — dafür sind Dialogfenster besser geeignet. Vermeiden Sie Sheets mit vielen Eingabefeldern, die Scrollen erfordern: Der Benutzer hat Schwierigkeiten, die Tastatur zu erreichen, und verliert den Kontext. Wenn ein Sheet mehr als sieben Aktionspunkte enthält, ziehen Sie einen separaten Bildschirm anstelle eines Sheets in Betracht.

Fehler: collapsed-Modus zu hoch

Ein typischer Fehler ist die Einstellung von peekHeight (Höhe im eingeklappten Zustand) auf mehr als 40% des Bildschirms. Der Benutzer weiß nicht, ob er das Sheet vollständig sieht oder ob es erweitert werden kann. Material Design empfiehlt peekHeight zwischen 15-30% der Bildschirmhöhe, um einen merklichen Teil des Inhalts verborgen zu lassen und zum Ziehen zu motivieren.

Fehler: Wischgeste auf iOS ignorieren

Auf iOS erwarten Benutzer, dass ein Sheet durch Wischen nach unten von jeder Position geschlossen werden kann. Wenn Sie diese Geste deaktivieren (über UISheetPresentationController.prefersEdgeAttachedInCompactHeight), ist der Benutzer frustriert, wenn er versucht, das Sheet auf die gewohnte Weise zu schließen. Die Apple Human Interface Guidelines (2024) betonen, dass Wischen zum Schließen eine grundlegende Erwartung von iOS-Benutzern ist.