Navigation Compose: qué es, arquitectura y trabajo en el desarrollo

¿Qué es Navigation Compose?

Navigation Compose es una biblioteca del conjunto Jetpack que proporciona un marco de navegación para aplicaciones Compose. La biblioteca se basa en los mismos principios que el Componente de Navegación para el sistema View, pero está adaptada a la naturaleza declarativa de Compose: en lugar de FragmentTransaction se utilizan funciones composables, y el grafo de navegación se construye mediante Kotlin DSL.

La diferencia clave entre Navigation Compose y la navegación clásica es la ausencia de FragmentManager. Cada pantalla es una función composable que se renderiza en NavHost cuando la ruta coincide. La pila de retroceso almacena no un Fragment, sino un registro con ruta, argumentos y estado. Esto simplifica la arquitectura y elimina los conflictos de ciclo de vida típicos de la navegación basada en Fragment.

Según Google (2025), Navigation Compose ha pasado de experimental a estable y forma parte de Jetpack desde la versión 2.8.0. La biblioteca admite Material3, navegación con seguridad de tipos (a través de Kotlin Serialization), grafos anidados y modularización. La única limitación es que la biblioteca no admite la pila de retroceso múltiple para BottomNavigation sin configuración manual, aunque Google está trabajando en ello.

La arquitectura de Navigation Compose gira en torno a tres entidades: NavController (gestión de la pila), NavHost (contenedor del grafo) y NavDestination (ruta individual con composable). La interacción entre ellas es declarativa: el desarrollador describe las rutas y los argumentos, y la biblioteca maneja los estados de carga, conservación y restauración.

NavController: creación y métodos de navegación

NavController es el elemento central de Navigation Compose, que gestiona la pila de navegación. Se crea mediante rememberNavController() y se pasa a NavHost. NavController almacena la pila de retroceso, el punto de entrada actual y admite acciones diferidas (deeplink después de la inicialización del grafo).

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

Métodos principales de NavController: navigate(route) — navegar a una ruta, popBackStack() — volver a la pantalla anterior, navigateAndClear(route) — navegar y limpiar la pila. NavOptions especifican el comportamiento: launchSingleTop evita duplicados, popUpTo limpia la pila hasta la ruta especificada, restoreState restaura el estado anterior.

Para acceder a NavController desde funciones composables profundamente anidadas, use NavHostController a través de CompositionLocal. LocalNavController se proporciona en ScopedNavController dentro de NavHost. Fuera de NavHost (por ejemplo, en BottomNavigation), el controlador se pasa a través de parámetros o ViewModel.

NavHost: construcción del grafo de rutas

NavHost es un contenedor composable que vincula NavController con el grafo de rutas. Cada ruta se declara mediante composable(route, arguments, deepLinks), donde route es una cadena de ruta con marcadores de posición {param} opcionales. Cuando la ruta actual coincide, NavHost renderiza el bloque composable correspondiente.

El grafo de rutas se construye jerárquicamente: los grafos se pueden anidar mediante navigation() para agrupar rutas dentro de un módulo. Los grafos anidados tienen su propio startDestination y se combinan bajo un prefijo de ruta común. Esto permite organizar una arquitectura modular donde cada módulo de funcionalidad registra su propio subgrafo.

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 maneja automáticamente el botón de retroceso del sistema (back press) a través de LocalBackDispatcher. En Material3 Scaffold, por defecto recoge NavController para el correcto funcionamiento de BottomNavigation. NavHost recrea el composable cuando la ruta cambia, pero conserva el estado mediante rememberSaveable para campos de entrada y desplazamiento.

Paso de argumentos entre pantallas

Navigation Compose admite el paso de argumentos tipificados entre pantallas a través de parámetros de ruta y NavType. Los parámetros se especifican en la ruta como {paramName} con el tipo indicado mediante arguments en composable(). NavType admite String, Int, Long, Float, Boolean, Parcelable y Serializable.

Los argumentos se extraen de NavBackStackEntry a través de arguments?.getType(key). Para parámetros obligatorios use defaultValue, para opcionales — nullable. El soporte de Parcelable funciona solo con Kotlin Parcelize o la biblioteca kotlinx.parcelize. Para objetos complejos, se recomienda pasar un ID y cargar datos a través de ViewModel, en lugar de serializar el objeto completo.

Desde Navigation 2.8.0, se introdujo la navegación con seguridad de tipos con Kotlin Serialization: las rutas se definen como clases de datos y los argumentos como campos. Esto reemplaza las rutas de cadena con objetos tipificados y elimina errores en los nombres de las rutas. La migración requiere el plugin de Kotlin Serialization y la dependencia 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}")
}

Enlaces profundos en Navigation Compose

Enlaces profundos es un mecanismo de navegación que permite abrir una pantalla específica de la aplicación a través de una URL o intent-filter. En Navigation Compose, los enlaces profundos se configuran mediante el parámetro deepLinks en composable() y se procesan automáticamente cuando la URI coincide con el patrón.

Un enlace profundo se especifica como una lista de UriPattern: "https://example.com/profile/{userId}". Los parámetros de URI se asignan automáticamente a los argumentos de la ruta. NavController procesa los enlaces profundos al iniciar la aplicación (a través de intent) y durante la operación (a través de enlaces profundos implícitos). Para manejar enlaces profundos pendientes, use handleDeepLink() en NavController después de la inicialización del grafo.

Según Google, se recomiendan enlaces profundos para: notificaciones push (Firebase Dynamic Links), verificación de correo electrónico, compartir contenido y navegación transversal desde enlaces web. Para Android 12+, se utilizan Digital Asset Links para verificar la autoridad del enlace profundo. AndroidManifest.xml debe contener un intent-filter con autoVerify="true" para abrir enlaces sin diálogo.

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

Limitaciones de los enlaces profundos en Navigation Compose: la biblioteca no admite enlaces profundos diferidos — un enlace profundo se procesa solo después de que NavHost haya construido completamente el grafo. Si un enlace profundo llega antes de la inicialización del grafo, debe diferirse mediante intent?.data y procesarse en LaunchedEffect. Para Firebase Dynamic Links, use el SDK de Firebase Dynamic Links junto con Navigation Compose.

Animaciones de transición entre pantallas

Navigation Compose admite animaciones de transición mediante los parámetros enterTransition, exitTransition, popEnterTransition y popExitTransition en composable(). Las animaciones se implementan usando la API de animación de Compose: fadeIn, slideInHorizontally, expandIn y otras. Por defecto, la animación está desactivada — las pantallas se reemplazan instantáneamente.

Escenarios típicos de animación: slideInHorizontally para navegación hacia adelante (la pantalla entra desde la derecha), slideOutHorizontally para retroceder (la pantalla sale hacia la derecha). Para BottomNavigation, se usa más comúnmente la animación de desvanecimiento sin deslizamiento. Las animaciones se configuran a través de NavHost y se aplican a todos los composables a menos que se especifiquen individuales.

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

Las animaciones se pueden anular para cada composable individualmente pasando parámetros de animación directamente en composable(). Es importante que las animaciones no entren en conflicto con la animación de retroceso del sistema. Para la transición de elementos compartidos, se requiere la biblioteca accompanist-navigation-animation o una implementación personalizada mediante Modifier.graphicsLayer. Según Android Developers (2025), el 80% de las aplicaciones de producción utilizan animación de deslizamiento horizontal para la navegación estándar.