Le barre delle app sono contenitori che forniscono all'utente l'accesso a funzionalità chiave ed elementi di navigazione. Esistono due tipi di barre delle app: in alto e in basso. L'aspetto e lo scopo sono i seguenti:
Tipo |
Aspetto |
Finalità |
---|---|---|
Barra delle app in alto |
Nella parte superiore dello schermo. |
Fornisce l'accesso ad attività e informazioni chiave. In genere ospita un titolo, le attività principali e alcuni elementi di navigazione. |
Barra dell'app in basso |
Nella parte inferiore dello schermo. |
In genere include gli elementi di navigazione principali. Potrebbe anche fornire l'accesso ad altre azioni chiave, ad esempio tramite un pulsante di azione mobile contenuto. |
Per implementare una barra delle app superiore e una barra delle app in basso, utilizza rispettivamente i componenti componibili TopAppBar
e BottomAppBar
. Consentono di creare interfacce coerenti che incapsulano i controlli di navigazione e delle azioni e che sono allineate ai principi di Material Design.
Barre delle app in alto
Nella tabella seguente vengono descritti i quattro tipi di barre delle app principali:
Tipo |
Esempio |
---|---|
Piccole: per schermate che non richiedono molta navigazione o azioni. |
|
Allineata al centro: per le schermate che hanno una singola azione principale. |
|
Medio: per le schermate che richiedono un numero moderato di navigazione e azioni. |
|
Grandi: per le schermate che richiedono molte navigazione e azioni. |
Piattaforma API
I vari componibili che consentono di implementare le quattro diverse barre delle app principali sono abbastanza simili. Condividono diversi parametri chiave:
title
: il testo visualizzato nella barra delle app.navigationIcon
: l'icona principale per la navigazione. Viene visualizzata a sinistra della barra delle app.actions
: icone che forniscono all'utente l'accesso alle azioni chiave. Vengono visualizzati a destra della barra delle app.scrollBehavior
: determina la risposta della barra superiore delle app allo scorrimento dei contenuti interni dello scaffold.colors
: determina l'aspetto della barra delle app.
Comportamento di scorrimento
Puoi controllare il modo in cui la barra delle app risponde quando l'utente fa scorrere i contenuti interni dello
scaffold specificato. Per farlo, crea un'istanza di TopAppBarScrollBehavior
e passala alla barra delle app in alto per il parametro scrollBehavior
.
Esistono tre tipi di TopAppBarScrollBehavior
. Sono i seguenti:
enterAlwaysScrollBehavior
: quando l'utente visualizza i contenuti interni dello scaffold, la barra delle app in alto si comprime. La barra delle app si espande quando l'utente tira verso il basso i contenuti interni.exitUntilCollapsedScrollBehavior
: simile aenterAlwaysScrollBehavior
, anche se la barra delle app si espande ulteriormente quando l'utente raggiunge la fine dei contenuti interni dello strumento.pinnedScrollBehavior
: la barra delle app rimane in posizione e non reagisce allo scorrimento.
I seguenti esempi implementano diverse di queste opzioni.
Esempi
Le sezioni seguenti illustrano le implementazioni per i quattro diversi tipi di barre principali delle app, inclusi diversi esempi di come controllare il comportamento di scorrimento.
Piccolo
Per creare una barra delle app piccola, utilizza il componibile TopAppBar
. Questa è la barra delle app in alto più semplice possibile e in questo esempio contiene solo un titolo.
L'esempio seguente non trasferisce un valore a TopAppBar
per
scrollBehavior
e, pertanto, non reagisce allo scorrimento dei contenuti
interni.
@Composable fun SmallTopAppBarExample() { Scaffold( topBar = { TopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text("Small Top App Bar") } ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Questa implementazione si presenta nel seguente modo:
Allineato al centro
La barra delle app in alto allineata al centro è essenzialmente la stessa della piccola barra delle app,
sebbene il titolo sia centrato all'interno del componente. Per implementarlo, utilizza
l'apposito modulo componibile CenterAlignedTopAppBar
.
Questo esempio utilizza enterAlwaysScrollBehavior()
per ottenere il valore che passa
per scrollBehavior
. Di conseguenza, la barra si comprime quando l'utente scorre i contenuti interni del supporto.
@Composable fun CenterAlignedTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { CenterAlignedTopAppBar( colors = TopAppBarDefaults.centerAlignedTopAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Centered Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior, ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Questa implementazione si presenta nel seguente modo:
Medium
La barra delle app in alto di medie dimensioni posiziona il titolo sotto eventuali icone aggiuntive. Per crearne uno, utilizza il componibile MediumTopAppBar
.
Come lo snippet precedente, questo esempio utilizza enterAlwaysScrollBehavior()
per
ottenere il valore che passa per scrollBehavior
.
@Composable fun MediumTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { MediumTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Medium Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Questa implementazione ha il seguente aspetto, con una dimostrazione del comportamento di scorrimento da enterAlwaysScrollBehavior()
:
Large
Una grande barra delle app in alto è simile al mezzo, anche se la spaziatura interna tra il titolo e le icone è maggiore e occupa più spazio sullo schermo nel complesso. Per crearne uno, utilizza il componibile LargeTopAppBar
.
A differenza degli snippet precedenti, questo esempio utilizza
exitUntilCollapsedScrollBehavior()
per ottenere il valore che passa per
scrollBehavior
. Di conseguenza, la barra si comprime quando l'utente scorre i contenuti interni dello
scaffold, per poi espandersi quando l'utente scorre fino
alla fine dei contenuti interni.
@Composable fun LargeTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Large Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Questa implementazione si presenta nel seguente modo:
Barra dell'app in basso
Per creare una barra delle app in basso, usa il componibile BottomAppBar
. L'utilizzo di questo
componibile è molto simile ai componibili della barra dell'app in alto descritti nelle
sezioni precedenti di questa pagina. Passi i componibili per i seguenti parametri chiave:
actions
: una serie di icone visualizzate sul lato sinistro della barra. Di solito, si tratta di azioni chiave per la schermata specifica o di elementi di navigazione.floatingActionButton
: il pulsante di azione mobile visualizzato sul lato destro della barra.
@Composable fun BottomAppBarExample() { Scaffold( bottomBar = { BottomAppBar( actions = { IconButton(onClick = { /* do something */ }) { Icon(Icons.Filled.Check, contentDescription = "Localized description") } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Edit, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Mic, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Image, contentDescription = "Localized description", ) } }, floatingActionButton = { FloatingActionButton( onClick = { /* do something */ }, containerColor = BottomAppBarDefaults.bottomAppBarFabColor, elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation() ) { Icon(Icons.Filled.Add, "Localized description") } } ) }, ) { innerPadding -> Text( modifier = Modifier.padding(innerPadding), text = "Example of a scaffold with a bottom app bar." ) } }
Questa implementazione si presenta nel seguente modo:
Risorse aggiuntive
- Documenti Material3 - Barra delle app in alto
- Documenti Material3 - Barra delle app in basso
- Trappola