Le barre delle app sono contenitori che forniscono all'utente l'accesso a funzionalità chiave elementi di navigazione. Esistono due tipi di barre delle app: in alto e in basso. barre. 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 TopAppBar
e
BottomAppBar
componibili, rispettivamente. Ti consentono di creare contenuti coerenti
che incapsulano i controlli di navigazione e azioni e che sono
in linea con i 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 componenti componibili che consentono di implementare le quattro diverse barre sono abbastanza simili. Condividono diversi parametri chiave:
title
: il testo visualizzato nella barra delle app.navigationIcon
: l'icona principale per la navigazione. Viene visualizzato nella 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 di contenuto interno dello scaffold.colors
: determina l'aspetto della barra delle app.
Comportamento di scorrimento
Puoi controllare la risposta della barra delle app quando l'utente fa scorrere i contenuti
i contenuti che li creano. Per farlo, crea un'istanza di
TopAppBarScrollBehavior
e passalo alla barra delle app in alto per
scrollBehavior
.
Esistono tre tipi di TopAppBarScrollBehavior
. Sono i seguenti:
enterAlwaysScrollBehavior
: quando l'utente solleva l'interno dell'impalcatura contenuti, la barra delle app in alto si comprime. La barra delle app si espande quando l'utente abbassa il contenuto interno.exitUntilCollapsedScrollBehavior
: simile aenterAlwaysScrollBehavior
, la barra delle app si espande ulteriormente quando l'utente raggiunge la fine i contenuti che li creano.pinnedScrollBehavior
: la barra delle app rimane in posizione e non reagisce a scorrere.
I seguenti esempi implementano diverse di queste opzioni.
Esempi
Le seguenti sezioni illustrano le implementazioni per i quattro diversi tipi di barre principali delle app, inclusi vari esempi di come controllare il comportamento di scorrimento.
Piccolo
Per creare una barra delle app piccola, utilizza il componibile TopAppBar
. Questo è il
nella barra delle app più semplice possibile e in questo esempio contiene soltanto un titolo.
L'esempio seguente non trasmette un valore a TopAppBar
per
scrollBehavior
e quindi non reagisce allo scorrimento della parte interna
contenuti.
@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:
![Un esempio di una barra delle app piccola in alto.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-small.png?authuser=9&hl=it)
Allineato al centro
La barra superiore, allineata al centro, è essenzialmente la stessa della piccola barra delle app,
anche se il titolo è centrato all'interno del componente. Per implementarla, utilizza
componibile CenterAlignedTopAppBar
dedicato.
In questo esempio viene utilizzato enterAlwaysScrollBehavior()
per ottenere il valore che trasmette
per scrollBehavior
. In questo modo, la barra si comprime quando l'utente fa scorrere il
i contenuti che li creano.
@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:
![Scrivi il testo alternativo qui](https://developer.android.com/static/develop/ui/compose/images/components/appbar-centered.png?authuser=9&hl=it)
Medio
La barra delle app in alto di medie dimensioni posiziona il titolo sotto eventuali icone aggiuntive. Per creare
Uno, utilizza il componibile MediumTopAppBar
.
Come lo snippet precedente, questo esempio utilizza enterAlwaysScrollBehavior()
per
ottiene 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 si presenta come segue, con una dimostrazione di come lo scorrimento
il comportamento di enterAlwaysScrollBehavior()
viene visualizzato:
Grande
Una grande barra superiore delle app è simile al mezzo, sebbene la spaziatura interna tra
e le icone sono più grandi e occupano più spazio sullo schermo. A
per crearne uno, utilizza il componibile LargeTopAppBar
.
A differenza degli snippet precedenti, questo esempio utilizza
exitUntilCollapsedScrollBehavior()
per ottenere il valore trasmesso
scrollBehavior
. In questo modo, la barra si comprime quando l'utente fa scorrere il
i contenuti interni dello scaffold, ma poi si espande quando l'utente scorre fino alla fine
contenuto interno.
@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:
![Schermata di un'app con una barra in basso che contiene le icone di azione a sinistra e un pulsante di azione mobile a destra.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-large.png?authuser=9&hl=it)
Barra dell'app in basso
Per creare una barra delle app in basso, usa il componibile BottomAppBar
. Utilizzo di questo
componibile è molto simile ai componibili della barra delle app in alto descritti nell'articolo
sezioni precedenti di questa pagina. Passi componibili per la seguente chiave
parametri:
actions
: una serie di icone visualizzate sul lato sinistro della barra. Questi sono spesso azioni chiave per la schermata o elementi di navigazione.floatingActionButton
: il pulsante di azione mobile visualizzato nella a destra 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:
![Schermata di un'app con una barra in basso che contiene le icone di azione a sinistra e un pulsante di azione mobile a destra.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-bottom.png?authuser=9&hl=it)
Risorse aggiuntive
- Documenti Material3 - Barra delle app in alto
- Documenti Material3 - Barra delle app in basso
- Trappola