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 insieme di schede.
  • Schede secondarie: utilizzate all'interno di un'area di contenuti per separare ulteriormente i contenuti correlati e stabilire una gerarchia. Sono necessarie quando una schermata richiede più di un livello di schede.
Vengono visualizzate 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 componibili 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 degli indicatori principali) o di un SecondaryTabRow (per le schede degli indicatori secondari).

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 che gestisci gli eventi di navigazione, aggiorni lo stato della scheda selezionata o carichi i contenuti corrispondenti.
  • text: visualizza il testo all'interno della scheda. Facoltativo.
  • icon: mostra un'icona all'interno della scheda. Facoltativo.
  • enabled: controlla se la scheda è attiva e se è possibile interagirvi. Se impostata su false, la scheda viene visualizzata in uno stato disattivato e non risponde ai clic.

Esempio: navigazione basata su schede

Lo snippet seguente 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)
    }
}

Punti chiave

  • PrimaryTabRow mostra una riga orizzontale di schede, ognuna corrispondente a un 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 ottiene l'indice numerico (posizione) della voce enum Destination.SONGS.
  • Quando fai clic su una scheda, l'espressione lambda onClick chiama navController.navigate(route = destination.route) per passare alla schermata corrispondente.
  • La funzione lambda onClick di Tab aggiorna lo stato di selectedDestination per evidenziare visivamente la scheda selezionata.
  • 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:

3 schede disposte orizzontalmente nella parte superiore della schermata dell'app. Le schede sono Brani, Album e Playlist, con la scheda Brani selezionata e sottolineata.
Figura 2. 3 schede (Brani, Album e Playlist) disposte in orizzontale.

Risorse aggiuntive