Navigation Compose: ano ito, arkitektura at paggamit sa pag-develop

Ano ang Navigation Compose?

Navigation Compose — ay isang library mula sa Jetpack suite na nagbibigay ng navigation framework para sa Compose applications. Ang library ay batay sa parehong prinsipyo tulad ng Navigation Component para sa View system, ngunit inangkop sa deklaratibong kalikasan ng Compose: sa halip na FragmentTransaction, ginagamit ang composable functions, at ang graph ng nabigasyon ay binuo sa pamamagitan ng Kotlin DSL.

Ang pangunahing pagkakaiba sa pagitan ng Navigation Compose at klasikong nabigasyon — ang kawalan ng FragmentManager. Ang bawat screen ay isang composable function na nire-render sa NavHost kapag nagtugma ang route. Ang back stack ay nag-iimbak hindi ng Fragment, kundi isang talaan na may route, argumento, at estado. Pinapasimple nito ang arkitektura at inaalis ang mga lifecycle conflict na katangian ng Fragment navigation.

Ayon sa datos ng Google (2025), ang Navigation Compose ay dumaan sa landas mula experimental hanggang stable at bahagi ng Jetpack mula sa bersyon 2.8.0. Sinusuportahan ng library ang Material3, Type-Safe Navigation (sa pamamagitan ng Kotlin Serialization), nested graphs, at modularization. Ang tanging limitasyon — hindi sinusuportahan ng library ang multi-back stack para sa BottomNavigation nang walang manual na configuration, bagama't ginagawa ito ng Google.

Ang arkitektura ng Navigation Compose ay binuo sa paligid ng tatlong entity: NavController (pamamahala ng stack), NavHost (container ng graph), at NavDestination (indibidwal na ruta na may composable). Ang interaksyon sa pagitan nila ay deklaratibo: inilalarawan ng developer ang mga ruta at argumento, at pinangangasiwaan ng library ang mga estado ng pag-load, preserve, at restore.

NavController: paggawa at mga pamamaraan ng nabigasyon

NavController — ang sentral na elemento ng Navigation Compose na namamahala sa navigation stack. Ginagawa ito sa pamamagitan ng rememberNavController() at ipinapasa sa NavHost. Nag-iimbak ang NavController ng back stack, kasalukuyang entry point, at sumusuporta sa mga naantalang aksyon (deeplink pagkatapos ng initialization ng graph).

@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") ?: ""
            )
        }
    }
}

Mga pangunahing pamamaraan ng NavController: navigate(route) — nabigasyon sa ruta, popBackStack() — pagbabalik sa nakaraang screen, navigateAndClear(route) — nabigasyon na may pag-clear ng stack. Tinutukoy ng NavOptions ang pag-uugali: pinipigilan ng launchSingleTop ang pagdoble, nililinis ng popUpTo ang stack hanggang sa tinukoy na ruta, pinapanumbalik ng restoreState ang nakaraang estado.

Para sa pag-access sa NavController mula sa malalim na nested composable functions, gamitin ang NavHostController sa pamamagitan ng CompositionLocal. Ang LocalNavController ay ibinibigay sa ScopedNavController sa loob ng NavHost. Sa labas ng NavHost (hal. sa BottomNavigation), ang controller ay ipinapasa sa pamamagitan ng mga parameter o ViewModel.

NavHost: pagbuo ng graph ng ruta

NavHost — ay isang composable container na nag-uugnay ng NavController sa graph ng ruta. Ang bawat ruta ay idineklara sa pamamagitan ng composable(route, arguments, deepLinks), kung saan ang route ay isang string ng ruta na may opsyonal na placeholder na {param}. Kapag nagtugma ang kasalukuyang ruta sa route, nire-render ng NavHost ang kaukulang composable block.

Ang graph ng ruta ay binuo nang hierarchical: ang mga graph ay maaaring i-nest sa pamamagitan ng navigation() para sa pagpapangkat ng mga ruta sa loob ng isang module. Ang mga nested graph ay may sariling startDestination at pinag-iisa sa ilalim ng isang karaniwang route-prefix. Pinapayagan nito ang pag-organisa ng modular architecture, kung saan ang bawat feature module ay nagrerehistro ng sarili nitong subgraph.

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

Awtomatikong pinangangasiwaan ng NavHost ang system Back button (back press) sa pamamagitan ng LocalBackDispatcher. Sa Material3 Scaffold, bilang default ay kinukuha ang NavController para sa tamang paggana ng BottomNavigation. Muling ginagawa ng NavHost ang composable sa pagbabago ng ruta, ngunit pinapanatili ang estado sa pamamagitan ng rememberSaveable para sa mga input field at scroll.

Pagpapadala ng argumento sa pagitan ng mga screen

Sinusuportahan ng Navigation Compose ang pagpapadala ng mga naka-type na argumento sa pagitan ng mga screen sa pamamagitan ng mga parameter ng ruta at NavType. Ang mga parameter ay tinutukoy sa route bilang {paramName} na may pagtukoy ng uri sa pamamagitan ng arguments sa composable(). Sinusuportahan ng NavType ang String, Int, Long, Float, Boolean, Parcelable, at Serializable.

Ang mga argumento ay kinukuha mula sa NavBackStackEntry sa pamamagitan ng arguments?.getType(key). Para sa mga mandatoryong parameter gamitin ang defaultValue, para sa opsyonal — nullable. Ang suporta sa Parcelable ay gumagana lamang sa Kotlin Parcelize o library na kotlinx.parcelize. Para sa mga kumplikadong bagay, inirerekomenda ang pagpapadala ng ID at pag-load ng data sa pamamagitan ng ViewModel, hindi ang serialization ng buong bagay.

Mula sa Navigation 2.8.0, available ang Type-Safe Navigation na may Kotlin Serialization: ang mga ruta ay tinutukoy bilang data classes, ang mga argumento bilang fields. Pinapalitan nito ang mga string route ng mga naka-type na bagay at inaalis ang mga error sa pangalan ng ruta. Para sa migration, kinakailangan ang Kotlin Serialization plugin at dependency navigation-compose-typesafe.

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

Malalalim na link (Deep Links) sa Navigation Compose

Deep Links — mekanismo ng nabigasyon na nagpapahintulot sa pagbukas ng isang tiyak na screen ng application sa pamamagitan ng URL o intent-filter. Sa Navigation Compose, ang malalalim na link ay kino-configure sa pamamagitan ng parameter na deepLinks sa composable() at awtomatikong pinoproseso kapag nagtugma ang URI sa pattern.

Ang Deep Link ay tinutukoy bilang isang listahan ng UriPattern: "https://example.com/profile/{userId}". Ang mga parameter mula sa URI ay awtomatikong nai-map sa mga argumento ng ruta. Pinoproseso ng NavController ang malalim na link sa pagsisimula ng application (sa pamamagitan ng intent) at sa panahon ng operasyon (sa pamamagitan ng implicit deep links). Para sa pagproseso ng mga nakabinbing malalim na link, ginagamit ang handleDeepLink() sa NavController pagkatapos ng initialization ng graph.

Ayon sa Google, ang pag-configure ng malalalim na link ay inirerekomenda para sa: push notification (Firebase Dynamic Links), verification ng email, pagbabahagi ng content, at nabigasyon mula sa web link. Para sa Android 12+, ginagamit ang Digital Asset Links para sa verification ng awtoridad ng malalim na link. Ang AndroidManifest.xml ay dapat maglaman ng intent-filter na may autoVerify="true" para sa pagbukas ng mga link nang walang dialog.

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") ?: "")
}

Mga limitasyon ng malalalim na link sa Navigation Compose: hindi sinusuportahan ng library ang naantalang malalalim na link — ang malalim na link ay pinoproseso lamang pagkatapos na ganap na mabuo ng NavHost ang graph. Kung ang malalim na link ay dumating bago ang initialization ng graph, dapat itong antalahin sa pamamagitan ng intent?.data at iproseso sa LaunchedEffect. Para sa Firebase Dynamic Links, gamitin ang Firebase Dynamic Links SDK kasama ng Navigation Compose.

Animation ng transition sa pagitan ng mga screen

Sinusuportahan ng Navigation Compose ang animation ng transition sa pamamagitan ng mga parameter na enterTransition, exitTransition, popEnterTransition, at popExitTransition sa composable(). Ang mga animation ay ipinapatupad sa pamamagitan ng Compose Animation API: fadeIn, slideInHorizontally, expandIn, at iba pa. Bilang default, ang animation ay naka-disable — ang mga screen ay agad na pinapalitan.

Mga karaniwang senaryo ng animation: slideInHorizontally para sa pasulong na nabigasyon (pumapasok ang screen mula sa kanan), slideOutHorizontally para sa pagbabalik (lumalabas ang screen sa kanan). Para sa BottomNavigation, mas madalas ginagamit ang fade animation nang walang slide. Ang mga animation ay itinatakda sa pamamagitan ng NavHost at inilalapat sa lahat ng composable kung hindi tinukoy ang indibidwal.

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

Ang mga animation ay maaaring i-override para sa bawat composable nang indibidwal sa pamamagitan ng pagpapasa ng mga animation parameter nang direkta sa composable(). Mahalaga: ang mga animation ay hindi dapat sumalungat sa system animation ng back press. Para sa shared element transition, kinakailangan ang library na accompanist-navigation-animation o custom na implementasyon sa pamamagitan ng Modifier.graphicsLayer. Ayon sa Android Developers (2025), 80% ng production applications ay gumagamit ng horizontal slide animation para sa standard navigation.