Push Presentation w tworzeniu aplikacji mobilnych: co to jest, stos ekranów

Co to jest Push Presentation?

Push Presentation — to mechanizm nawigacji, w którym każdy nowy ekran jest umieszczany na szczycie stosu, a poprzedni ekran pozostaje w pamięci pod nim. Użytkownik zagłębia się w treść, kolejno otwierając szczegółowe ekrany, a przycisk wstecz zwraca go do poprzedniego kroku.

Architektura nawigacji Push opiera się na strukturze danych LIFO (Last In, First Out). Nowy ekran jest zawsze dodawany na koniec stosu, a usuwanie następuje tylko ze szczytu. Gwarantuje to przewidywalne zachowanie: użytkownik zawsze wie, że przycisk wstecz wróci go dokładnie o jeden krok wstecz. Stos nawigacyjny może zawierać od 2 do 10+ ekranów w zależności od złożoności aplikacji.

Push Presentation to podstawowy wzorzec w aplikacjach z treścią hierarchiczną: kanały informacyjne, katalogi produktów, menu wielopoziomowe i dokumentacja. Według Material Design, nawigacja stosowa jest odpowiednia dla scenariuszy, w których użytkownik eksploruje treść od ogółu do szczegółu, a każdy kolejny ekran pogłębia zrozumienie tematu.

Stos nawigacyjny: zasada działania

Stos nawigacyjny — to uporządkowany zbiór ekranów, w którym każdy element przechowuje stan swojego ViewController lub Fragment. Podczas operacji Push nowy ekran jest dodawany do stosu, jego wyświetlanie jest animowane (slajd z prawej w iOS, slajd z dołu lub Fade w Android) i staje się aktywny.

Podczas operacji Pop (naciśnięcie wstecz) górny ekran jest usuwany ze stosu, niszczony lub przechodzi do pamięci, a poprzedni ekran staje się aktywny. iOS domyślnie niszczy popped ViewController, zwalniając pamięć. Android może zachować Fragment w back stack z możliwością przywrócenia bez ponownego tworzenia.

Głębokość stosu wpływa na wydajność: każdy ekran w stosie zużywa pamięć. Zaleca się nie przechowywać więcej niż 10 ekranów w stosie. Do głębokiej nawigacji używaj PopToRoot lub restartu stosu z nowym ekranem głównym. Navigation Component w Android automatycznie zarządza stanem stosu przez SavedStateHandle.

Nawigacja Push w iOS: UINavigationController

UINavigationController — kontroler kontenerowy iOS zarządzający stosem UIViewController. Automatycznie wyświetla pasek nawigacyjny (navigation bar) z tytułem bieżącego ekranu i przyciskiem powrotu. Domyślna animacja Push — slajd od prawej do lewej, tworząca u użytkownika wrażenie zagłębiania się w treść.

Zarządzanie stosem

Dodawanie ekranu odbywa się przez pushViewController(_:animated:). Usuwanie — przez popViewController(animated:). Aby wrócić do ekranu głównego, używa się popToRootViewController(animated:). UINavigationController obsługuje również programowe zarządzanie stosem przez właściwość viewControllers — tablicę wszystkich kontrolerów w stosie.

Navigation Bar i Large Titles

Pasek nawigacyjny zawiera tytuł ekranu (title), przycisk wstecz i opcjonalne przyciski akcji. Od iOS 11, Large Titles (prefersLargeTitles) umożliwiają wyświetlanie tytułu powiększoną czcionką, która animacyjnie zmniejsza się podczas przewijania. Poprawia to hierarchię nawigacyjną i informuje użytkownika o bieżącej sekcji.

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

// Powrót do poprzedniego ekranu
navigationController?.popViewController(animated: true)

// Powrót do głównego ekranu
navigationController?.popToRootViewController(animated: true)

Nawigacja Push w Android: Navigation Component

Navigation Component — biblioteka Android Jetpack do deklaratywnej nawigacji. Zapewnia NavController, który zarządza fragmentami lub ekranami Compose przez graf nawigacji (nav_graph). Push w Android jest analogiczny do iOS: każdy nowy Fragment jest dodawany do back stack, a przycisk wstecz przywraca poprzedni.

NavHost i NavGraph

NavHost — kontener wyświetlający bieżący cel z NavGraph. NavGraph — plik XML opisujący wszystkie ekrany aplikacji i połączenia między nimi. Przejścia są definiowane przez actions z określeniem destination i opcjonalnych argumentów. Navigation Component automatycznie obsługuje systemowy przycisk wstecz, animacje i zapisywanie stanu.

Argumenty i Safe Args

Do przesyłania danych między ekranami Navigation Component obsługuje Safe Args — generowanie kodu type-safe klas argumentów. Zamiast ręcznego umieszczania danych w Bundle, programista deklaruje argumenty w NavGraph i otrzymuje je przez wygenerowane klasy Directions i Args. Safe Args eliminuje błędy niezgodności typów i upraszcza refaktoryzację.

// Definicja NavGraph w 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) }
    }
}

// Nawiguj programowo
navController.navigate("detail/42")

BottomNavigation ze stosem Push

Połączenie Bottom Navigation i nawigacji Push — częsty wzorzec w aplikacjach mobilnych. Każda zakładka Bottom Navigation ma własny stos ekranów. Navigation Component obsługuje to przez NavHost per tab lub jeden NavHost z osobnymi grafami dla każdej zakładki. Przełączanie zakładek nie resetuje stanu stosów Push.

Push Presentation vs Modal Presentation

Push Presentation i Modal Presentation rozwiązują różne zadania nawigacji. Push jest przeznaczony do sekwencyjnego przeglądania treści, gdzie każdy nowy ekran pogłębia kontekst. Modal — do zadań wymagających skupienia i zakończenia. W praktyce ważne jest wybranie odpowiedniego wzorca dla konkretnego scenariusza.

Główne kryteria wyboru: jeśli użytkownik powinien swobodnie wracać bez utraty kontekstu — wybierz Push. Jeśli zadanie jest tymczasowe i blokuje główną treść (formularz, autoryzacja) — użyj Modal. Mieszanie wzorców na jednym ekranie (Push wewnątrz Modal) jest dopuszczalne, ale wymaga jasnej hierarchii wizualnej.

Błędem jest używanie Modal dla sekwencji ekranów, które logicznie są częścią głównego przepływu. Na przykład kreator tworzenia zamówienia (Krok 1 → Krok 2 → Krok 3) lepiej zrealizować przez Push wewnątrz kontenera modalnego, a nie przez łańcuch okien modalnych. Zachowuje to hierarchię nawigacyjną i przewidywalność powrotu.

Przykłady implementacji w Swift i Kotlin

Rozważmy pełną implementację nawigacji Push na obu platformach. Przykład w Swift demonstruje UINavigationController z programowym zarządzaniem stosem i obsługą głębokich linków. Przykład w Kotlin pokazuje Navigation Component z NavHost, argumentami i animacjami.

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

Przykłady pokazują podstawową nawigację Push: lista → szczegóły. iOS używa storyboardów i UINavigationController z ręcznym przesyłaniem danych. Android używa NavHost z type-safe argumentami i automatycznym zarządzaniem back stack. Oba podejścia obsługują głębokie linki, niestandardowe animacje i zapisywanie stanu przy obrocie.