Pestañas

Las pestañas te permiten organizar grupos de contenido relacionado. Existen dos tipos de pestañas:

• Pestañas principales: Se colocan en la parte superior del panel de contenido, debajo de la barra de la app superior. Muestran los destinos de contenido principales y deben usarse cuando solo se necesita un conjunto de pestañas.
• Pestañas secundarias: Se usan dentro de un área de contenido para separar aún más el contenido relacionado y establecer una jerarquía. Son necesarias cuando una pantalla requiere más de un nivel de pestañas.

Figura 1: Pestañas principales (1) y secundarias (2).

En esta página, se muestra cómo mostrar pestañas principales en tu app con pantallas relacionadas y navegación básica.

Superficie de la API

Usa los elementos componibles Tab, PrimaryTabRow y SecondaryTabRow para implementar pestañas. El elemento de componibilidad Tab representa una pestaña individual dentro de la fila y, por lo general, se usa dentro de un PrimaryTabRow (para las pestañas de indicadores principales) o SecondaryTabRow (para las pestañas de indicadores secundarios).

Tab incluye los siguientes parámetros clave:

• selected: Determina si la pestaña actual se destaca visualmente.
• onClick(): Es una función lambda obligatoria que define la acción que se realizará cuando el usuario haga clic en la pestaña. Aquí es donde sueles controlar los eventos de navegación, actualizar el estado de la pestaña seleccionada o cargar el contenido correspondiente.
• text: Muestra texto dentro de la pestaña. Opcional.
• icon: Muestra un ícono dentro de la pestaña. Opcional.
• enabled: Controla si la pestaña está habilitada y se puede interactuar con ella. Si se establece en falso, la pestaña aparece en un estado inhabilitado y no responderá a los clics.

Ejemplo: Navegación basada en pestañas

En el siguiente fragmento, se implementa una barra de navegación superior con pestañas para navegar entre diferentes pantallas de una app:

Nota: El código fuente completo incluye el código que establece la estructura de navegación básica para el siguiente ejemplo.

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Puntos clave

• PrimaryTabRow muestra una fila horizontal de pestañas, en la que cada una corresponde a un Destination.
• val navController = rememberNavController() crea y recuerda una instancia de NavHostController, que administra la navegación dentro de un NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } administra el estado de la pestaña seleccionada.
  • startDestination.ordinal obtiene el índice numérico (posición) de la entrada de enumeración Destination.SONGS.
• Cuando haces clic en una pestaña, la lambda onClick llama a navController.navigate(route = destination.route) para navegar a la pantalla correspondiente.
• La lambda onClick de Tab actualiza el estado selectedDestination para destacar visualmente la pestaña en la que se hizo clic.
• Llama al elemento de componibilidad AppNavHost y pasa navController y startDestination para mostrar el contenido real de la pantalla seleccionada.

Resultado

En la siguiente imagen, se muestra el resultado del fragmento anterior:

Figura 2: 3 pestañas (Canciones, Álbum y Playlist) dispuestas de forma horizontal

Recursos adicionales

• Material 3 - Tabs
• Navegación con Compose