Navigation Compose: vad det är, arkitektur och funktion i utveckling

Vad är Navigation Compose?

Navigation Compose — är ett bibliotek från Jetpack-sviten som tillhandahåller ett navigeringsramverk för Compose-applikationer. Biblioteket är baserat på samma principer som Navigation Component för View-systemet, men anpassat till Compose deklarativa natur: istället för FragmentTransaction används composable-funktioner och navigeringsgrafen byggs via Kotlin DSL.

Den viktigaste skillnaden mellan Navigation Compose och klassisk navigering — frånvaron av FragmentManager. Varje skärm är en composable-funktion som renderas i NavHost när rutten matchar. Back stack lagrar inte ett Fragment, utan en post med route, argument och status. Detta förenklar arkitekturen och eliminerar livscykelkonflikter som är typiska för Fragment-navigering.

Enligt Google (2025)-data har Navigation Compose gått från experimental till stable och ingår i Jetpack från version 2.8.0. Biblioteket stöder Material3, Type-Safe Navigation (via Kotlin Serialization), kapslade grafer och modularisering. Den enda begränsningen — biblioteket stöder inte multi-back stack för BottomNavigation utan manuell konfiguration, även om Google arbetar på detta.

Arkitekturen för Navigation Compose bygger kring tre enheter: NavController (stackhantering), NavHost (grafbehållare) och NavDestination (separat rutt med composable). Interaktionen mellan dem är deklarativ: utvecklaren beskriver rutter och argument, biblioteket hanterar laddnings-, bevarande- och återställningstillstånd.

NavController: skapande och navigeringsmetoder

NavController — det centrala elementet i Navigation Compose som hanterar navigeringsstacken. Skapas via rememberNavController() och skickas till NavHost. NavController lagrar back stack, aktuell ingångspunkt och stöder fördröjda åtgärder (deeplink efter grafinitialisering).

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

Huvudmetoder för NavController: navigate(route) — navigera till rutt, popBackStack() — återgå till föregående skärm, navigateAndClear(route) — navigera med rensning av stacken. NavOptions bestämmer beteendet: launchSingleTop förhindrar duplicering, popUpTo rensar stacken till angiven rutt, restoreState återställer tidigare status.

För åtkomst till NavController från djupt kapslade composable-funktioner, använd NavHostController via CompositionLocal. LocalNavController tillhandahålls i ScopedNavController inuti NavHost. Utanför NavHost (t.ex. i BottomNavigation) skickas kontrollern via parametrar eller ViewModel.

NavHost: bygga ruttgrafen

NavHost — är en composable-behållare som kopplar NavController till ruttgrafen. Varje rutt deklareras via composable(route, arguments, deepLinks), där route är en ruttsträng med valfria platshållare {param}. När den aktuella rutten matchar route, renderar NavHost motsvarande composable-block.

Ruttgrafen byggs hierarkiskt: grafer kan kapslas via navigation() för gruppering av rutter inom en modul. Kapslade grafer har egen startDestination och förenas under ett gemensamt route-prefix. Detta möjliggör organisering av modulär arkitektur, där varje feature-modul registrerar sin subgraf.

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

NavHost hanterar automatiskt systemets Tillbaka-knapp (back press) via LocalBackDispatcher. I Material3 Scaffold tar den som standard emot NavController för korrekt funktion av BottomNavigation. NavHost återskapar composable vid ruttändring, men bevarar status via rememberSaveable för inmatningsfält och scrollning.

Överföra argument mellan skärmar

Navigation Compose stöder överföring av typade argument mellan skärmar via ruttparametrar och NavType. Parametrar definieras i route som {paramName} med angivelse av typ via arguments i composable(). NavType stöder String, Int, Long, Float, Boolean, Parcelable och Serializable.

Argument extraheras från NavBackStackEntry via arguments?.getType(key). För obligatoriska parametrar använd defaultValue, för valfria — nullable. Parcelable-stöd fungerar endast med Kotlin Parcelize eller biblioteket kotlinx.parcelize. För komplexa objekt rekommenderas att överföra ID och ladda data via ViewModel, inte serialisera hela objektet.

Från Navigation 2.8.0 är Type-Safe Navigation med Kotlin Serialization tillgänglig: rutter definieras som dataklasser, argument som fält. Detta ersätter strängrutter med typade objekt och eliminerar fel i ruttnamn. För migrering krävs Kotlin Serialization-plugin och beroendet 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}")
}

Djupa länkar (Deep Links) i Navigation Compose

Deep Links — navigeringsmekanism som gör det möjligt att öppna en specifik skärm i applikationen via en URL eller intent-filter. I Navigation Compose konfigureras djupa länkar via parametern deepLinks i composable() och bearbetas automatiskt när URI matchar mönstret.

En Deep Link definieras som en lista UriPattern: "https://example.com/profile/{userId}". Parametrar från URI mappas automatiskt till ruttargument. NavController bearbetar den djupa länken vid applikationsstart (via intent) och under drift (via implicita deep links). För bearbetning av väntande djupa länkar används handleDeepLink() i NavController efter grafinitialisering.

Enligt Google rekommenderas konfigurering av djupa länkar för: push-notiser (Firebase Dynamic Links), e-postverifiering, innehållsdelning och navigering från webblänkar. För Android 12+ används Digital Asset Links för verifiering av den djupa länkens auktoritet. AndroidManifest.xml måste innehålla intent-filter med autoVerify="true" för att öppna länkar utan dialogruta.

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

Begränsningar av djupa länkar i Navigation Compose: biblioteket stöder inte fördröjda djupa länkar — den djupa länken bearbetas först efter att NavHost fullständigt byggt grafen. Om den djupa länken anländer före grafinitialisering måste den fördröjas via intent?.data och bearbetas i LaunchedEffect. För Firebase Dynamic Links, använd Firebase Dynamic Links SDK i kombination med Navigation Compose.

Övergångsanimering mellan skärmar

Navigation Compose stöder övergångsanimering via parametrarna enterTransition, exitTransition, popEnterTransition och popExitTransition i composable(). Animeringar implementeras via Compose Animation API: fadeIn, slideInHorizontally, expandIn och andra. Som standard är animering avaktiverad — skärmar ersätts omedelbart.

Typiska animeringsscenarier: slideInHorizontally för framåtnavigering (skärmen kommer in från höger), slideOutHorizontally för återgång (skärmen går ut till höger). För BottomNavigation används oftare fade-animering utan förskjutning. Animeringar ställs in via NavHost och tillämpas på alla composable om inte individuella anges.

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

Animeringar kan åsidosättas för varje composable individuellt genom att skicka animeringsparametrar direkt i composable(). Viktigt: animeringar bör inte konfliktera med systemets back press-animering. För shared element transition krävs biblioteket accompanist-navigation-animation eller anpassad implementering via Modifier.graphicsLayer. Enligt Android Developers (2025) använder 80% av produktionsapplikationer horisontell slide-animering för standardnavigering.