Android Academy · Lección

Navegación inferior

Cree una navegación inferior con pestañas

Navegación inferior es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

Barras de navegación inferior

Muchas aplicaciones colocan sus secciones principales en una barra de navegación inferior. Compose proporciona NavigationBar y NavigationBarItem para esto.

NavigationBar

NavigationBar es el contenedor, que normalmente se coloca en el espacio bottomBar de un Scaffold. Contiene varios elementos NavigationBarItem.

NavigationBar {
    // items go here
}

NavigationBarItem

Cada pestaña es un NavigationBarItem con un icon, un label opcional, un indicador selected y un onClick.

NavigationBarItem(
    selected = true,
    onClick = { },
    icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
    label = { Text("Home") }
)

Modelar las pestañas

Defina las pestañas como datos para poder recorrerlas en un bucle. Una clase de datos sencilla con una ruta, una etiqueta y un icono funciona bien.

data class Tab(val route: String, val label: String, val icon: ImageVector)

val tabs = listOf(
    Tab("home", "Home", Icons.Default.Home),
    Tab("profile", "Profile", Icons.Default.Person)
)

Seguir la ruta actual

Para resaltar la pestaña activa necesita conocer la ruta actual. Léala de la entrada actual de la pila de retroceso del controlador.

val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route

Marcar la pestaña seleccionada

Compare la ruta de cada pestaña con currentRoute para establecer el indicador selected y lograr que la barra resalte el elemento correcto.

NavigationBarItem(
    selected = currentRoute == tab.route,
    onClick = { navController.navigate(tab.route) },
    icon = { Icon(tab.icon, contentDescription = tab.label) },
    label = { Text(tab.label) }
)

Evitar que crezca la pila de retroceso

Al pulsar las pestañas repetidamente no deberían acumularse destinos. Use popUpTo hasta el destino inicial y launchSingleTop al navegar entre pestañas.

navController.navigate(tab.route) {
    popUpTo(navController.graph.startDestinationId) { saveState = true }
    launchSingleTop = true
    restoreState = true
}

saveState / restoreState

saveState y restoreState conservan la posición de desplazamiento y el estado de cada pestaña al cambiar a otra y volver, que es el comportamiento esperado de las pestañas inferiores.

Integración con Scaffold

Envuelva todo en un Scaffold. Coloque la barra en bottomBar y el NavHost en el contenido, usando el relleno proporcionado para que la barra no oculte el contenido.

Scaffold(
    bottomBar = { BottomBar(navController) }
) { padding ->
    NavHost(
        navController,
        startDestination = "home",
        modifier = Modifier.padding(padding)
    ) { /* destinations */ }
}

Recorrer los elementos

Construya la barra recorriendo la lista de pestañas, lo que mantiene el código breve y coherente.

NavigationBar {
    tabs.forEach { tab ->
        NavigationBarItem(
            selected = currentRoute == tab.route,
            onClick = { navController.navigate(tab.route) },
            icon = { Icon(tab.icon, contentDescription = tab.label) },
            label = { Text(tab.label) }
        )
    }
}

Integrarlo todo

Barra inferior completa conectada a un controlador que resalta la pestaña activa.

@Composable
fun BottomBar(navController: NavController) {
    val entry by navController.currentBackStackEntryAsState()
    val current = entry?.destination?.route
    NavigationBar {
        tabs.forEach { tab ->
            NavigationBarItem(
                selected = current == tab.route,
                onClick = { navController.navigate(tab.route) },
                icon = { Icon(tab.icon, contentDescription = tab.label) },
                label = { Text(tab.label) }
            )
        }
    }
}

Comprobación rápida

¿Cómo sabe qué NavigationBarItem debe marcar como selected?

Resumen

Navegación inferior:

NavigationBar contiene elementos NavigationBarItem.
Siga la pestaña activa mediante currentBackStackEntryAsState() y establezca selected.
Use popUpTo + launchSingleTop + saveState/restoreState para cambiar de pestaña de forma ordenada.
Aloje la barra en bottomBar de un Scaffold.

Preguntas frecuentes

¿La lección «Navegación inferior» es gratis?

Sí — el texto completo de «Navegación inferior» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Navegación inferior»?

Cree una navegación inferior con pestañas Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Navegación inferior»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Android Academy