Modale Präsentation in der mobilen Entwicklung: Was ist das, Bildschirmarten

Was ist eine modale Präsentation?

Modale Präsentation ist ein Navigationsmuster, bei dem ein neuer Bildschirm über dem aktuellen erscheint und vorübergehend die Interaktion mit dem übergeordneten Inhalt blockiert. Der Benutzer muss die modale Aufgabe (Abbrechen, Speichern, Schließen) explizit abschließen, um zum vorherigen Zustand zurückzukehren.

Modalität löst eine kognitive Aufgabe: Sie konzentriert die Aufmerksamkeit des Benutzers auf eine einzelne Aktion, ohne Ablenkung durch die restliche Oberfläche. Dies ist besonders wichtig für Registrierungsformulare, Bestätigungsdialoge, Dateiauswahl und Autorisierung über Dienste Dritter. Die Human Interface Guidelines von Apple empfehlen, Modalität nur für Aufgaben zu verwenden, die vor dem Fortfahren abgeschlossen werden müssen.

Im Gegensatz zu modalen Web-Fenstern kann die mobile modale Präsentation vollbildschirm (den gesamten Bildschirm einnehmend) oder teilweise (Page Sheet, Bottom Sheet) sein. Die Wahl des Typs hängt vom Aufgabenkontext und den Plattformkonventionen ab. iOS tendiert für die meisten Szenarien zu Page Sheet und lässt Full Screen für Videoplayer und Fotobearbeitungsprogramme.

Wie unterscheidet sich die modale Präsentation von Push?

Push-Präsentation (Stack-Navigation) fügt einen Bildschirm zum Navigationsstapel hinzu und zeigt automatisch eine Zurück-Schaltfläche an. Der Benutzer kann jederzeit zum vorherigen Bildschirm zurückkehren. Die modale Präsentation erfordert dagegen einen expliziten Abschluss: Die Zurück-Schaltfläche fehlt entweder oder schließt das modale Fenster, anstatt zum vorherigen Bildschirm zurückzukehren.

Die Hauptunterschiede zwischen modaler und Push-Präsentation: Modale Präsentation blockiert die Rückwärtsnavigation ohne Datenverlust, erfordert eine Aktion zum Schließen (Save, Cancel, Done) und stellt in der Regel eine separate Aufgabe dar. Push-Präsentation bewahrt die Navigationshierarchie, fügt automatisch eine Zurück-Schaltfläche hinzu und eignet sich für die sequenzielle Inhaltsbetrachtung.

In der Praxis hängt die Wahl zwischen Modal und Push vom Kontext ab. Es wird empfohlen, Modalität für Aufgaben zu verwenden, die der Benutzer vor dem Fortfahren abschließen muss, und Push für die sequenzielle Inhaltserkundung. Das Mischen von Mustern auf demselben Bildschirm führt zu Verwirrung und beeinträchtigt die Benutzererfahrung.

Modale Präsentation in iOS: UIKit und SwiftUI

iOS bietet mehrere modale Präsentationsstile über die Aufzählung UIModalPresentationStyle. UIKit unterstützt .fullScreen (Vollbild), .pageSheet (Karte mit oberem Rand), .formSheet (zentriertes Fenster auf iPad) und .automatic (System wählt basierend auf Kontext). Seit iOS 13 ist der Standardstil .automatic, der für iPhone .pageSheet auswählt.

UIViewController.present

Die grundlegende UIKit-Methode für die modale Präsentation ist present(_:animated:completion:). Der Controller, der die Methode aufruft, wird zum presentingViewController, und der neue wird zum presentedViewController. Das Schließen erfolgt über dismiss(animated:completion:). SwiftUI bietet den .sheet-Modifikator für ein ähnliches Verhalten.

SwiftUI .sheet

Der deklarative Ansatz von SwiftUI verwendet die Modifikatoren .sheet und .fullScreenCover. Ersterer erstellt ein Page Sheet, letzterer eine vollbildschirm-modale Präsentation. Beide akzeptieren ein Binding auf einen Bool oder ein identifizierbares Objekt, das die Sichtbarkeit des modalen Fensters steuert. Das Schließen erfolgt, wenn das Binding auf false gesetzt wird oder dismiss aus der Umgebung aufgerufen wird.

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

    var body: some View {
        Button("Formular öffnen") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

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

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

Modale Präsentation in Android: Fragment und Compose

Android hat keine einheitliche API für die modale Präsentation wie iOS. Stattdessen bietet die Plattform mehrere Mechanismen: DialogFragment für Dialogfenster, BottomSheetDialogFragment für untere Bedienfelder und Activity mit NEW_TASK- und CLEAR_TOP-Flags für modale Bildschirme. Jetpack Compose führte eine einheitliche Dialog-Komponente für alle Arten von modalen Fenstern ein.

DialogFragment

DialogFragment ist die Basisklasse für modale Fenster im Android SDK. Es verwaltet den Lebenszyklus des Dialogs, behandelt die Bildschirmdrehung und speichert den Zustand. Das Fragment wird über der Activity angezeigt, ohne den Navigationsstapel zu blockieren. Das Schließen erfolgt über dismiss() oder durch Antippen außerhalb des Dialogbereichs, wenn setCancelable(true) ist.

Modales Bottom Sheet

BottomSheetDialogFragment zeigt ein modales Fenster als Bereich an, der von unten aufsteigt. Dieses Muster ist in Material Design für die Optionenauswahl, Freigabe und Schnellaktionen beliebt. Das BottomSheet kann eine feste Höhe oder erweiterbar (Peek-Höhe + volle Höhe) sein. In Compose wird ModalBottomSheet aus der Material3-Bibliothek verwendet.

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

Bewährte Verfahren für modale Präsentation

Modale Fenster sind ein leistungsstarkes UX-Werkzeug, aber ihre übermäßige Verwendung beeinträchtigt die Benutzererfahrung. Apple HIG und Google Material Design stimmen in den Empfehlungen überein: Modalität sollte für fokussierte Aufgaben verwendet werden und 20 % aller Navigationsaktionen nicht überschreiten.

Wann man modale Präsentation verwendet

Modale Fenster eignen sich für Szenarien: Dateneingabe (Registrierungsformulare, Profile), Bestätigung (Löschung, Sendung), Auswahl (Datumsauswahl, Dateimanager) und Autorisierung (OAuth, Firebase Auth). Wenn die Aufgabe weniger als 30 Sekunden dauert und eine Kontextblockierung erfordert, wählen Sie Modalität.

Was zu vermeiden ist

Verwenden Sie keine modale Präsentation für: sequenzielle Inhaltsbetrachtung (Push verwenden), Fehleranzeige (Toast oder Snackbar verwenden), Werbung und Werbeangebote ohne explizite Benutzeranfrage. Material Design empfiehlt, verschachtelte modale Fenster zu vermeiden – dies verwirrt den Benutzer und stört die Navigationshierarchie.

Für modale Fenster mit Textfeldern muss der Verlust des Tastaturfokus behandelt werden. Wenn die Tastatur erscheint, sollte sich das modale Fenster nach oben verschieben, damit der Benutzer den eingegebenen Text sehen kann. UIKeyboardWillShowNotification in iOS und adjustResize in Android lösen diese Aufgabe.

Codebeispiele in Swift und Kotlin

Schauen wir uns die Implementierung der modalen Präsentation auf beiden Plattformen an. Das Swift-Beispiel zeigt die Konfiguration von UIModalPresentationStyle.pageSheet mit einem Delegaten zur Behandlung des Schließens. Das Kotlin-Beispiel zeigt DialogFragment mit einem benutzerdefinierten Layout und Zustandserhaltung.

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("Modal geschlossen")
    }
}

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()
        }
    }
}