Tabs

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

  • Lengüetas principales: Se colocan en la parte superior del panel de contenido debajo de una barra superior de la app. Muestran los destinos de contenido principales y se deben usar cuando solo se necesita un set 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 necesarios cuando una pantalla requiere más de un nivel de pestañas.
Se muestran 3 pestañas principales con íconos asociados (Vuelos, Viajes y Explorar). Se muestran 2 pestañas secundarias (Descripción general y Especificaciones) sin íconos asociados.
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 una navegación básica.

Plataforma de la API

Usa los elementos componibles Tab, PrimaryTabRow y SecondaryTabRow para implementar pestañas. El elemento componible Tab representa una pestaña individual dentro de la fila y, por lo general, se usa dentro de un PrimaryTabRow (para pestañas de indicadores principales) o SecondaryTabRow (para 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. Por lo general, es aquí donde se controlan los eventos de navegación, se actualiza el estado de la pestaña seleccionada o se carga 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 si se puede interactuar con ella. Si se establece como falso, la pestaña se mostrará 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:

@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, cada una de las cuales 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 actualmente.
    • startDestination.ordinal obtiene el índice numérico (posición) de la entrada de enumeración Destination.SONGS.
  • Cuando se hace clic en una pestaña, se 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 componible 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:

3 pestañas dispuestas horizontalmente en la parte superior de la pantalla de la app. Las pestañas son Canciones, Álbum y Playlist, y la pestaña Canciones está seleccionada y subrayada.
Figura 2: 3 pestañas: Canciones, Álbumes y Playlists, organizadas horizontalmente.

Recursos adicionales