Push Presentation in der mobilen Entwicklung: Was es ist, Bildschirm-Stack

Was ist Push Presentation?

Push Presentation ist ein Navigationsmechanismus, bei dem jeder neue Bildschirm oben auf den Stapel gelegt wird, während der vorherige Bildschirm darunter im Speicher bleibt. Der Benutzer taucht tiefer in den Inhalt ein, indem er nacheinander Detailbildschirme öffnet, und die Zurück-Taste bringt ihn zum vorherigen Schritt zurück.

Die Architektur der Push-Navigation basiert auf der LIFO-Datenstruktur (Last In, First Out). Ein neuer Bildschirm wird immer am Ende des Stapels hinzugefügt, und das Entfernen erfolgt nur von der Spitze. Dies garantiert ein vorhersagbares Verhalten: Der Benutzer weiß immer, dass die Zurück-Taste ihn genau einen Schritt zurückbringt. Der Navigationsstapel kann je nach Komplexität der Anwendung 2 bis 10+ Bildschirme enthalten.

Push Presentation ist das primäre Muster in Anwendungen mit hierarchischem Inhalt: Nachrichtenfeeds, Produktkataloge, mehrstufige Menüs und Dokumentation. Laut Material Design eignet sich die Stapelnavigation für Szenarien, in denen der Benutzer Inhalte vom Allgemeinen zum Spezifischen erkundet und jeder nachfolgende Bildschirm das Verständnis des Themas vertieft.

Navigationsstapel: Funktionsprinzip

Der Navigationsstapel ist eine geordnete Menge von Bildschirmen, wobei jedes Element den Zustand seines ViewControllers oder Fragments speichert. Während einer Push-Operation wird ein neuer Bildschirm zum Stapel hinzugefügt, sein Erscheinen wird animiert (Schieben von rechts in iOS, Schieben von unten oder Fade in Android), und er wird aktiv.

Während einer Pop-Operation (Zurück-Taste drücken) wird der oberste Bildschirm vom Stapel entfernt, zerstört oder in den Speicher verschoben, und der vorherige Bildschirm wird aktiv. iOS zerstört standardmäßig den entfernten ViewController und gibt Speicher frei. Android kann das Fragment im Rückwärtsstapel mit der Möglichkeit der Wiederherstellung ohne Neuerstellung speichern.

Die Stapeltiefe beeinflusst die Leistung: Jeder Bildschirm im Stapel verbraucht Speicher. Es wird empfohlen, nicht mehr als 10 Bildschirme im Stapel zu halten. Verwenden Sie für tiefe Navigation PopToRoot oder starten Sie den Stapel mit einem neuen Root-Bildschirm neu. Das Navigation Component in Android verwaltet den Stapelzustand automatisch über SavedStateHandle.

Push-Navigation in iOS: UINavigationController

UINavigationController ist ein iOS-Container-Controller, der einen Stapel von UIViewControllern verwaltet. Er zeigt automatisch eine Navigationsleiste mit dem Titel des aktuellen Bildschirms und einer Zurück-Taste an. Die Standard-Push-Animation ist ein Schieben von rechts nach links, das beim Benutzer ein Gefühl des Eintauchens in den Inhalt erzeugt.

Stapelverwaltung

Das Hinzufügen eines Bildschirms erfolgt über pushViewController(_:animated:). Das Entfernen erfolgt über popViewController(animated:). Um zum Root-Bildschirm zurückzukehren, verwenden Sie popToRootViewController(animated:). UINavigationController unterstützt auch die programmatische Stapelverwaltung über die Eigenschaft viewControllers — ein Array aller Controller im Stapel.

Navigationsleiste und Large Titles

Die Navigationsleiste enthält den Bildschirmtitel, eine Zurück-Taste und optionale Aktionsschaltflächen. Ab iOS 11 ermöglichen Large Titles (prefersLargeTitles) die Anzeige des Titels in einer vergrößerten Schriftart, die beim Scrollen animiert schrumpft. Dies verbessert die Navigationshierarchie und informiert den Benutzer über den aktuellen Abschnitt.

let detailVC = DetailViewController()
detailVC.title = "Item Details"
navigationController?.pushViewController(detailVC, animated: true)

// Zum vorherigen Bildschirm zurück
navigationController?.popViewController(animated: true)

// Zum Root zurück
navigationController?.popToRootViewController(animated: true)

Push-Navigation in Android: Navigation Component

Navigation Component ist eine Android Jetpack-Bibliothek für deklarative Navigation. Sie bietet NavController, der Fragmente oder Compose-Bildschirme über einen Navigationsgraphen (nav_graph) verwaltet. Push in Android ist ähnlich wie in iOS: Jedes neue Fragment wird zum Rückwärtsstapel hinzugefügt, und die Zurück-Taste kehrt zum vorherigen zurück.

NavHost und NavGraph

NavHost ist ein Container, der das aktuelle Ziel aus dem NavGraph anzeigt. NavGraph ist eine XML-Datei, die alle Anwendungsbildschirme und Verbindungen zwischen ihnen beschreibt. Übergänge werden über actions mit Angabe des Ziels und optionaler Argumente definiert. Navigation Component behandelt automatisch System-Zurück, Animationen und Zustandsspeicherung.

Argumente und Safe Args

Zur Datenübergabe zwischen Bildschirmen unterstützt Navigation Component Safe Args — Codegenerierung typsicherer Argumentklassen. Anstatt Daten manuell in ein Bundle zu legen, deklariert der Entwickler Argumente im NavGraph und erhält sie über generierte Directions- und Args-Klassen. Safe Args beseitigt Typkonflikte und vereinfacht die Refaktorisierung.

// NavGraph-Definition in XML
<!-- res/navigation/nav_graph.xml -->
@navigation {
    NavHost(startDestination = "list") {
        composable("list") { ListScreen() }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { DetailScreen(it.arguments()?.getInt("itemId") ?: 0) }
    }
}

// Programmatisch navigieren
navController.navigate("detail/42")

BottomNavigation mit Push-Stapel

Die Kombination von Bottom Navigation und Push-Navigation ist ein häufiges Muster in mobilen Anwendungen. Jeder Bottom Navigation-Tab hat seinen eigenen Bildschirmstapel. Navigation Component unterstützt dies über NavHost pro Tab oder einen einzelnen NavHost mit getrennten Graphen für jeden Tab. Das Umschalten von Tabs setzt den Zustand der Push-Stapel nicht zurück.

Push Presentation vs Modal Presentation

Push Presentation und Modal Presentation lösen unterschiedliche Navigationsaufgaben. Push ist für die sequenzielle Inhaltsansicht konzipiert, bei der jeder neue Bildschirm den Kontext vertieft. Modal ist für fokussierte Aufgaben, die abgeschlossen werden müssen. In der Praxis ist es wichtig, das richtige Muster für das jeweilige Szenario zu wählen.

Die Hauptauswahlkriterien: Wenn der Benutzer frei zurückkehren können soll, ohne den Kontext zu verlieren — wählen Sie Push. Wenn die Aufgabe temporär ist und den Hauptinhalt (Formular, Autorisierung) blockiert — verwenden Sie Modal. Das Mischen von Mustern auf einem Bildschirm (Push innerhalb von Modal) ist akzeptabel, erfordert jedoch eine klare visuelle Hierarchie.

Ein häufiger Fehler ist die Verwendung von Modal für Bildschirmsequenzen, die logisch Teil des Hauptflusses sind. Beispielsweise wird ein Bestellerstellungs-Assistent (Schritt 1 → Schritt 2 → Schritt 3) besser über Push innerhalb eines modalen Containers implementiert als über eine Kette von modalen Fenstern. Dies bewahrt die Navigationshierarchie und die Vorhersagbarkeit der Rückkehr.

Implementierungsbeispiele in Swift und Kotlin

Betrachten wir eine vollständige Implementierung der Push-Navigation auf beiden Plattformen. Das Swift-Beispiel demonstriert UINavigationController mit programmatischer Stapelverwaltung und Deep-Link-Verarbeitung. Das Kotlin-Beispiel zeigt Navigation Component mit NavHost, Argumenten und Animationen.

class ListViewController: UIViewController {
    func showDetail(_ itemId: Int) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let detailVC = storyboard.instantiateViewController(
            withIdentifier: "DetailViewController"
        ) as! DetailViewController
        detailVC.itemId = itemId
        navigationController?.pushViewController(detailVC, animated: true)
    }
}

class DetailViewController: UIViewController {
    var itemId: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Item #\(itemId)"
    }
}

@Composable
fun PushNavigationApp() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            ListScreen(
                onItemClick = { id -> navController.navigate("detail/$id") }
            )
        }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments()?.getInt("itemId") ?: 0
            DetailScreen(itemId = itemId, onBack = { navController.popBackStack() })
        }
    }
}

Die Beispiele zeigen grundlegende Push-Navigation: Liste → Details. iOS verwendet Storyboards und UINavigationController mit manueller Datenübergabe. Android verwendet NavHost mit typsicheren Argumenten und automatischer Rückwärtsstapelverwaltung. Beide Ansätze unterstützen Deep Links, benutzerdefinierte Animationen und Zustandsspeicherung bei Drehung.