Push Presentation mobilfejlesztésben: mi ez, képernyőverem

Mi az a Push Presentation?

Push Presentation — egy navigációs mechanizmus, amelyben minden új képernyő a verem tetejére kerül, míg az előző képernyő alatta marad a memóriában. A felhasználó egymás után nyitja meg a részletes képernyőket, mélyebbre hatolva a tartalomban, a visszagomb pedig visszaviszi az előző lépéshez.

A Push navigáció architektúrája a LIFO (Last In, First Out) adatszerkezeten alapul. Az új képernyő mindig a verem végére kerül, az eltávolítás pedig csak a tetejéről történik. Ez kiszámítható viselkedést garantál: a felhasználó mindig tudja, hogy a visszagomb pontosan egy lépéssel viszi vissza. A navigációs verem 2-től 10+ képernyőt tartalmazhat az alkalmazás összetettségétől függően.

A Push Presentation az elsődleges minta a hierarchikus tartalmú alkalmazásokban: hírcsatornák, termékkatalógusok, többszintű menük és dokumentáció. A Material Design szerint a vermes navigáció olyan forgatókönyvekhez alkalmas, ahol a felhasználó általánosról specifikusra haladva fedezi fel a tartalmat, és minden következő képernyő elmélyíti a téma megértését.

Navigációs verem: működési elv

A navigációs verem — képernyők rendezett halmaza, ahol minden elem tárolja a saját ViewController vagy Fragment állapotát. Push művelet során az új képernyő hozzáadódik a veremhez, megjelenése animált (jobbról csúszás iOS-ben, alulról csúszás vagy Fade Androidban), és aktívvá válik.

Pop művelet során (visszagomb megnyomása) a felső képernyő eltávolításra kerül a veremből, megsemmisül vagy memóriába kerül, az előző képernyő pedig aktívvá válik. iOS alapértelmezés szerint megsemmisíti a popped ViewController-t, felszabadítva a memóriát. Android megőrizheti a Fragment-et a back stack-ben, lehetővé téve a visszaállítást újralétrehozás nélkül.

A verem mélysége befolyásolja a teljesítményt: minden képernyő a veremben memóriát fogyaszt. Ajánlott legfeljebb 10 képernyőt tárolni a veremben. Mély navigációhoz használja a PopToRoot-ot vagy a verem újraindítását új root képernyővel. Az Android Navigation Component automatikusan kezeli a verem állapotát a SavedStateHandle segítségével.

Push navigáció iOS-ben: UINavigationController

UINavigationController — egy iOS konténervezérlő, amely a UIViewController vermet kezeli. Automatikusan megjeleníti a navigációs sávot (navigation bar) az aktuális képernyő címével és egy visszagombbal. Az alapértelmezett Push animáció — jobbról balra csúszás, amely a felhasználóban a tartalomba merülés érzetét kelti.

Verem kezelése

A képernyő hozzáadása a pushViewController(_:animated:) segítségével történik. Eltávolítás — a popViewController(animated:) segítségével. A root képernyőre való visszatéréshez a popToRootViewController(animated:) használatos. Az UINavigationController támogatja a verem programozott kezelését is a viewControllers tulajdonságon keresztül — ez a veremben lévő összes vezérlő tömbje.

Navigation Bar és Large Titles

A navigációs sáv tartalmazza a képernyő címét (title), a visszagombot és opcionális műveleti gombokat. Az iOS 11-től kezdve a Large Titles (prefersLargeTitles) lehetővé teszi a cím nagyobb betűmérettel történő megjelenítését, amely görgetéskor animáltan összezsugorodik. Ez javítja a navigációs hierarchiát és tájékoztatja a felhasználót az aktuális szakaszról.

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

// Vissza az előző képernyőre
navigationController?.popViewController(animated: true)

// Vissza a root képernyőre
navigationController?.popToRootViewController(animated: true)

Push navigáció Androidban: Navigation Component

Navigation Component — egy Android Jetpack könyvtár deklaratív navigációhoz. Biztosítja a NavController-t, amely fragmenteket vagy compose képernyőket kezel egy navigációs gráfon (nav_graph) keresztül. Az Androidban a Push analóg az iOS-szel: minden új Fragment hozzáadódik a back stack-hez, és a visszagomb visszaállítja az előzőt.

NavHost és NavGraph

NavHost — egy konténer, amely az aktuális célt jeleníti meg a NavGraph-ból. NavGraph — egy XML fájl, amely leírja az alkalmazás összes képernyőjét és a köztük lévő kapcsolatokat. Az átmenetek actions segítségével definiálhatók a destination és opcionális argumentumok megadásával. A Navigation Component automatikusan kezeli a rendszer visszagombot, az animációkat és az állapotmentést.

Argumentumok és Safe Args

A képernyők közötti adatátvitelhez a Navigation Component támogatja a Safe Args-ot — type-safe argumentumosztályok kódgenerálását. Ahelyett, hogy manuálisan helyezné az adatokat Bundle-be, a fejlesztő argumentumokat deklarál a NavGraph-ban, és azokat a generált Directions és Args osztályokon keresztül kapja meg. A Safe Args kiküszöböli a típus-eltérési hibákat és leegyszerűsíti a refaktorálást.

// NavGraph definíció XML-ben
<!-- 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) }
    }
}

// Programozott navigáció
navController.navigate("detail/42")

BottomNavigation Push veremmel

A Bottom Navigation és a Push navigáció kombinációja — gyakori minta mobilalkalmazásokban. A Bottom Navigation minden lapjának saját képernyő verme van. Navigation Component ezt NavHost per tab vagy egyetlen NavHost segítségével támogatja, külön gráfokkal minden laphoz. A lapok váltása nem állítja vissza a Push vermek állapotát.

Push Presentation vs Modal Presentation

Push Presentation és Modal Presentation különböző navigációs feladatokat oldanak meg. A Push szekvenciális tartalommegtekintésre szolgál, ahol minden új képernyő elmélyíti a kontextust. A Modal — olyan fókuszált feladatokra, amelyek befejezést igényelnek. A gyakorlatban fontos a megfelelő minta kiválasztása az adott forgatókönyvhöz.

Fő kiválasztási szempontok: ha a felhasználónak szabadon vissza kell tudnia térnie a kontextus elvesztése nélkül — válassza a Push-t. Ha a feladat átmeneti és blokkolja a fő tartalmat (űrlap, hitelesítés) — használja a Modal-t. A minták keverése egy képernyőn (Push Modal-on belül) megengedett, de egyértelmű vizuális hierarchiát igényel.

Hiba a Modal használata olyan képernyősorozatokhoz, amelyek logikailag a fő folyamat részét képezik. Például a rendeléslétrehozó varázsló (1. lépés → 2. lépés → 3. lépés) jobban megvalósítható Push segítségével egy modális konténeren belül, mint modális ablakok láncolatával. Ez megőrzi a navigációs hierarchiát és a visszatérés kiszámíthatóságát.

Implementációs példák Swiftben és Kotlinban

Tekintsük át a Push navigáció teljes implementációját mindkét platformon. A Swift példa az UINavigationController-t mutatja be programozott veremkezeléssel és mély linkek feldolgozásával. A Kotlin példa a Navigation Component-et mutatja be NavHost-tal, argumentumokkal és animációkkal.

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

A példák az alap Push navigációt mutatják: lista → részletek. iOS storyboard-okat és UINavigationController-t használ manuális adatátvitellel. Android NavHost-t használ type-safe argumentumokkal és automatikus back stack kezeléssel. Mindkét megközelítés támogatja a mély linkeket, egyéni animációkat és az állapotmentést elforgatáskor.