Schede

Le schede ti consentono di organizzare gruppi di contenuti correlati. Esistono due tipi di schede:

  • Schede principali: posizionate nella parte superiore del riquadro dei contenuti sotto una barra dell'app in alto. Mostrano le destinazioni dei contenuti principali e devono essere utilizzate quando è necessario un solo set di schede.
  • Schede secondarie: utilizzate all'interno di un'area di contenuti per separare ulteriormente i contenuti correlati e stabilire la gerarchia. Sono necessarie quando una schermata richiede più di un livello di schede.
Sono mostrate tre schede principali con le icone associate (Voli, Viaggi ed Esplora). Vengono visualizzate due schede secondarie (Panoramica, Specifiche) senza icone associate.
Figura 1. Schede principali (1) e schede secondarie (2).

Questa pagina mostra come visualizzare le schede principali nella tua app con schermate correlate e navigazione di base.

Piattaforma API

Utilizza i composable Tab, PrimaryTabRow e SecondaryTabRow per implementare le schede. Il composable Tab rappresenta una singola scheda all'interno della riga e viene in genere utilizzato all'interno di un PrimaryTabRow (per le schede indicatore principali) o SecondaryTabRow (per le schede indicatore secondarie).

Tab include i seguenti parametri chiave:

  • selected: determina se la scheda corrente è evidenziata visivamente.
  • onClick(): una funzione lambda obbligatoria che definisce l'azione da eseguire quando l'utente fa clic sulla scheda. In genere qui gestisci gli eventi di navigazione, aggiorni lo stato della scheda selezionata o carichi i contenuti corrispondenti.
  • text: mostra il testo all'interno della scheda. Facoltativo.
  • icon: mostra un'icona all'interno della scheda. Facoltativo.
  • enabled: controlla se la scheda è abilitata e se è possibile interagire con essa. Se impostata su false, la scheda viene visualizzata in stato disattivato e non risponde ai clic.

Esempio: navigazione basata su schede

Il seguente snippet implementa una barra di navigazione in alto con schede per spostarsi tra le diverse schermate di un'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

Punti chiave

  • PrimaryTabRow mostra una riga orizzontale di schede, ognuna delle quali corrisponde a una Destination.
  • val navController = rememberNavController() crea e memorizza un' istanza di NavHostController, che gestisce la navigazione all'interno di un' NavHost.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } gestisce lo stato della scheda selezionata.
    • startDestination.ordinal recupera l'indice numerico (posizione) della voce enum Destination.SONGS.
  • Quando fai clic su una scheda, la lambda onClick chiama navController.navigate(route = destination.route) per passare alla schermata corrispondente.
  • La lambda onClick di Tab aggiorna lo stato selectedDestination per evidenziare visivamente la scheda su cui hai fatto clic.
  • Chiama il composable AppNavHost, passando navController e startDestination, per visualizzare i contenuti effettivi della schermata selezionata.

Risultato

L'immagine seguente mostra il risultato dello snippet precedente:

Tre schede disposte orizzontalmente nella parte superiore della schermata dell'app. Le schede sono Brani, Album e Playlist. La scheda Brani è selezionata e sottolineata.
Figura 2. Tre schede (Songs, Album e Playlist) disposte orizzontalmente.

Risorse aggiuntive