Navigation Compose: mi ez, felépítése és működése a fejlesztésben

Mi az a Navigation Compose?

Navigation Compose — egy könyvtár a Jetpack csomagból, amely navigációs keretrendszert biztosít Compose-alkalmazásokhoz. A könyvtár ugyanazokon az elveken alapul, mint a Navigation Component a View rendszerhez, de alkalmazkodik a Compose deklaratív természetéhez: FragmentTransaction helyett composable függvényeket használ, a navigációs gráf pedig Kotlin DSL segítségével épül fel.

A Navigation Compose és a klasszikus navigáció közötti kulcsfontosságú különbség — a FragmentManager hiánya. Minden képernyő egy composable függvény, amely a NavHost-ban renderelődik az útvonal egyezésekor. A back stack nem Fragment-et tárol, hanem egy rekordot route-tal, argumentumokkal és állapottal. Ez leegyszerűsíti az architektúrát és kiküszöböli a Fragment-navigációra jellemző életciklus-konfliktusokat.

A Google (2025) adatai szerint a Navigation Compose végigjárta az experimental-tól a stable-ig vezető utat, és a 2.8.0 verziótól kezdve a Jetpack részét képezi. A könyvtár támogatja a Material3-at, a Type-Safe Navigation-t (Kotlin Serialization segítségével), a beágyazott gráfokat és a modularizációt. Az egyetlen korlátozás — a könyvtár nem támogatja a multi-back stack-et a BottomNavigation számára manuális konfiguráció nélkül, bár a Google dolgozik ezen.

A Navigation Compose architektúrája három entitás köré épül: NavController (veremkezelés), NavHost (gráf tároló) és NavDestination (egyedi útvonal composable-lal). A köztük lévő interakció deklaratív: a fejlesztő leírja az útvonalakat és argumentumokat, a könyvtár pedig kezeli a betöltési, megőrzési és visszaállítási állapotokat.

NavController: létrehozás és navigációs metódusok

NavController — a Navigation Compose központi eleme, amely a navigációs vermet kezeli. A rememberNavController() segítségével jön létre, és átadásra kerül a NavHost-nak. A NavController tárolja a back stack-et, a jelenlegi belépési pontot, és támogatja a késleltetett műveleteket (deeplink a gráf inicializálása után).

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("profile/{userId}") { backStackEntry ->
            ProfileScreen(
                userId = backStackEntry.arguments?.getString("userId") ?: ""
            )
        }
    }
}

A NavController fő metódusai: navigate(route) — navigáció egy útvonalra, popBackStack() — visszatérés az előző képernyőre, navigateAndClear(route) — navigáció a verem törlésével. A NavOptions határozza meg a viselkedést: a launchSingleTop megakadályozza a duplikációt, a popUpTo törli a vermet a megadott útvonalig, a restoreState visszaállítja az előző állapotot.

A mélyen beágyazott composable függvényekből a NavController eléréséhez használja a NavHostController-t a CompositionLocal segítségével. A LocalNavController a ScopedNavController-ban érhető el a NavHost-on belül. A NavHost-on kívül (pl. BottomNavigation-ben) a vezérlő paramétereken vagy ViewModel-en keresztül kerül átadásra.

NavHost: az útvonalgráf felépítése

NavHost — egy composable tároló, amely összeköti a NavController-t az útvonalgráffal. Minden útvonal a composable(route, arguments, deepLinks) segítségével kerül deklarálásra, ahol a route egy útvonal sztring opcionális {param} helyőrzőkkel. Amikor a jelenlegi útvonal egyezik a route-tal, a NavHost rendereli a megfelelő composable blokkot.

Az útvonalgráf hierarchikusan épül fel: a gráfok beágyazhatók a navigation() segítségével az útvonalak modulon belüli csoportosításához. A beágyazott gráfok saját startDestination-nel rendelkeznek, és egy közös route-előtag alatt egyesülnek. Ez lehetővé teszi a moduláris architektúra megszervezését, ahol minden feature-modul regisztrálja a saját algráfját.

NavHost(
    navController = navController,
    startDestination = "main"
) {
    composable("main") { MainScreen(navController) }
    navigation(
        route = "auth",
        startDestination = "auth/login"
    ) {
        composable("auth/login") { LoginScreen(navController) }
        composable("auth/register") { RegisterScreen(navController) }
    }
}

A NavHost automatikusan kezeli a rendszer Vissza gombját (back press) a LocalBackDispatcher segítségével. A Material3 Scaffold-ban alapértelmezés szerint átveszi a NavController-t a BottomNavigation helyes működéséhez. A NavHost újrateremti a composable-t az útvonal változásakor, de megőrzi az állapotot a rememberSaveable segítségével a beviteli mezők és görgetés esetén.

Argumentumok átadása a képernyők között

A Navigation Compose támogatja a típusos argumentumok átadását a képernyők között útvonalparamétereken és NavType-on keresztül. A paraméterek a route-ban {paramName} formában kerülnek meghatározásra a típus megadásával az arguments segítségével a composable()-ban. A NavType támogatja a String, Int, Long, Float, Boolean, Parcelable és Serializable típusokat.

Az argumentumok a NavBackStackEntry-ből kerülnek kinyerésre az arguments?.getType(key) segítségével. A kötelező paraméterekhez használjon defaultValue-t, az opcionálisakhoz — nullable-t. A Parcelable támogatás csak a Kotlin Parcelize vagy a kotlinx.parcelize könyvtárral működik. Összetett objektumok esetén ajánlott az ID átadása és az adatok ViewModel-en keresztüli betöltése, nem a teljes objektum szerializálása.

A Navigation 2.8.0 verziótól kezdve elérhető a Type-Safe Navigation Kotlin Serialization-nel: az útvonalak adatosztályokként, az argumentumok pedig mezőkként kerülnek meghatározásra. Ez sztring route-okat típusos objektumokkal helyettesíti, és kiküszöböli az útvonalnevek hibáit. A migrációhoz Kotlin Serialization pluginre és navigation-compose-typesafe függőségre van szükség.

@Serializable
/* sealed class Route */
sealed class ProfileRoute(val route: String) {
    data object Home : ProfileRoute("home")
    data class Profile(val userId: String) : ProfileRoute("profile/{userId}")
}

Mélyhivatkozások (Deep Links) a Navigation Compose-ban

Deep Links — navigációs mechanizmus, amely lehetővé teszi egy alkalmazás adott képernyőjének megnyitását URL vagy intent-filter segítségével. A Navigation Compose-ban a mélyhivatkozások a deepLinks paraméteren keresztül kerülnek konfigurálásra a composable()-ban, és automatikusan feldolgozásra kerülnek, amikor az URI egyezik a mintával.

A Deep Link UriPattern listaként kerül meghatározásra: "https://example.com/profile/{userId}". Az URI-ból származó paraméterek automatikusan hozzárendelődnek az útvonal argumentumaihoz. A NavController feldolgozza a mélyhivatkozást az alkalmazás indításakor (intent segítségével) és működés közben (implicit deep links segítségével). A függőben lévő mélyhivatkozások feldolgozásához a handleDeepLink() használatos a NavController-ben a gráf inicializálása után.

A Google szerint a mélyhivatkozások konfigurálása ajánlott: push értesítésekhez (Firebase Dynamic Links), e-mail megerősítéshez, tartalommegosztáshoz és webes linkekből történő navigációhoz. Android 12+ esetén a Digital Asset Links használatos a mélyhivatkozás hitelességének ellenőrzéséhez. Az AndroidManifest.xml-nek tartalmaznia kell egy intent-filter-t autoVerify="true" paraméterrel a linkek párbeszédablak nélküli megnyitásához.

composable(
    route = "profile/{userId}",
    arguments = listOf(navArgument("userId") { type = NavType.StringType }),
    deepLinks = listOf(
        navDeepLink { uriPattern = "https://example.com/profile/{userId}" }
    )
) { backStackEntry ->
    ProfileScreen(userId = backStackEntry.arguments?.getString("userId") ?: "")
}

A mélyhivatkozások korlátozásai a Navigation Compose-ban: a könyvtár nem támogatja a késleltetett mélyhivatkozásokat — a mélyhivatkozás csak azután kerül feldolgozásra, hogy a NavHost teljesen felépítette a gráfot. Ha a mélyhivatkozás a gráf inicializálása előtt érkezik, azt el kell halasztani az intent?.data segítségével, és a LaunchedEffect-ben kell feldolgozni. A Firebase Dynamic Links esetén használja a Firebase Dynamic Links SDK-t a Navigation Compose-zal együtt.

Átmeneti animáció a képernyők között

A Navigation Compose támogatja az átmeneti animációt a enterTransition, exitTransition, popEnterTransition és popExitTransition paramétereken keresztül a composable()-ban. Az animációk a Compose Animation API segítségével valósulnak meg: fadeIn, slideInHorizontally, expandIn és mások. Alapértelmezés szerint az animáció ki van kapcsolva — a képernyők azonnal cserélődnek.

Tipikus animációs forgatókönyvek: slideInHorizontally az előre navigációhoz (a képernyő jobbról belép), slideOutHorizontally a visszatéréshez (a képernyő jobbra távozik). A BottomNavigation esetén gyakrabban használatos fade animáció csúsztatás nélkül. Az animációk a NavHost-on keresztül kerülnek beállításra, és minden composable-ra alkalmazódnak, ha nincsenek egyediek megadva.

NavHost(
    navController = navController,
    startDestination = "home",
    enterTransition = { slideInHorizontally() + fadeIn() },
    exitTransition = { slideOutHorizontally() + fadeOut() },
    popEnterTransition = { fadeIn() },
    popExitTransition = { slideOutHorizontally() + fadeOut() }
) { /* composable */ }

Az animációk minden composable esetében egyedileg felülírhatók az animációs paraméterek közvetlen composable()-ban történő átadásával. Fontos: az animációk nem ütközhetnek a rendszer back press animációjával. A shared element transitionhez az accompanist-navigation-animation könyvtárra vagy egyedi implementációra van szükség a Modifier.graphicsLayer segítségével. Az Android Developers (2025) szerint a termelési alkalmazások 80%-a horizontális slide animációt használ a szabványos navigációhoz.