Le barre delle app sono contenitori che forniscono all'utente l'accesso alle funzionalità principali e agli elementi di navigazione. Esistono due tipi di barre delle app: in alto e in basso. Sono indicati di seguito aspetti e finalità:
Tipo |
Aspetto |
Finalità |
|---|---|---|
Barra delle app superiore |
Nella parte superiore dello schermo. |
Fornisce l'accesso ad attività e informazioni chiave. In genere ospita un titolo, 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. Consente inoltre di accedere ad altre azioni chiave, ad esempio tramite un pulsante di azione mobile contenuto. |
Per implementare una barra dell'app superiore e una barra dell'app in basso, utilizza rispettivamente gli elementi componibili TopAppBar e
BottomAppBar. Consentono di creare interfacce coerenti che incapsulano i controlli di navigazione e di azione e che sono allineate ai principi di Material Design.
Barre dell'app principali
La tabella seguente illustra i quattro tipi di barre dell'app principali:
Tipo |
Esempio |
|---|---|
Piccole: per schermate che non richiedono molta navigazione o azioni. |
|
Allineato al centro: per le schermate con una singola azione principale. |
|
Media: per le schermate che richiedono un livello moderato di navigazione e azioni. |
|
Grande: per schermate che richiedono molta navigazione e azioni. |
|
Piattaforma API
I vari elementi componibili che consentono di implementare le quattro diverse barre dell'app in alto sono molto simili. Condividono diversi parametri chiave:
title: il testo visualizzato sulla barra delle app.navigationIcon: l'icona principale per la navigazione. Viene visualizzato a sinistra della barra delle app.actions: icone che forniscono all'utente l'accesso alle azioni chiave. Vengono visualizzate a destra della barra delle app.scrollBehavior: determina in che modo la barra dell'app in alto risponde allo scorrimento dei contenuti interni dell'impalcatura.colors: determina l'aspetto della barra dell'app.
Comportamento scorrimento
Puoi controllare il modo in cui la barra delle app risponde quando l'utente scorre i contenuti interni dell'impalcatura. A questo scopo, crea un'istanza di
TopAppBarScrollBehavior e passala alla barra dell'app superiore per il
parametro scrollBehavior.
Esistono tre tipi di TopAppBarScrollBehavior. Ecco alcuni esempi:
enterAlwaysScrollBehavior: quando l'utente visualizza i contenuti interni dell'impalcatura, la barra dell'app superiore si comprime. La barra dell'app si espande quando l'utente scarica i contenuti interni.exitUntilCollapsedScrollBehavior: in modo simile aenterAlwaysScrollBehavior, sebbene la barra dell'app si espanda ulteriormente quando l'utente raggiunge la fine dei contenuti interni dell'impalcatura.pinnedScrollBehavior: la barra dell'app rimane in posizione e non reagisce allo scorrimento.
I seguenti esempi implementano diverse di queste opzioni.
Esempi
Le seguenti sezioni forniscono le implementazioni per i quattro diversi tipi di barre dell'app principali, inclusi vari esempi di come controllare il comportamento di scorrimento.
Piccolo
Per creare una piccola barra dell'app in alto, utilizza il componibile TopAppBar. Questa è la
barra dell'app in alto più semplice possibile e in questo esempio contiene solo un titolo.
Nell'esempio seguente non viene trasmesso 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 come segue:
Allineato al centro
La barra dell'app superiore allineata al centro è essenzialmente la stessa della piccola barra dell'app, anche se il titolo è centrato all'interno del componente. Per implementarla, utilizza il componibile CenterAlignedTopAppBar dedicato.
Questo esempio utilizza enterAlwaysScrollBehavior() per ottenere il valore trasmesso
per scrollBehavior. Di conseguenza, la barra si comprime quando l'utente scorre i contenuti interni dell'impalcatura.
@Composable
fun CenterAlignedTopAppBarExample() {
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
CenterAlignedTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
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.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:
Medium
La barra delle app in alto medio posiziona il titolo sotto eventuali icone aggiuntive. Per crearne
uno, utilizza l'elemento componibile MediumTopAppBar.
Come lo snippet precedente, questo esempio utilizza enterAlwaysScrollBehavior() per
ottenere il valore trasmesso 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.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 appare come segue, con una dimostrazione di come viene visualizzato il comportamento di scorrimento da enterAlwaysScrollBehavior():
Large
Una barra dell'app grande in alto è simile a quella media, anche se la spaziatura interna tra il titolo e le icone è maggiore e occupa più spazio sullo schermo. Per
crearne uno, utilizza il componibile LargeTopAppBar.
A differenza degli snippet precedenti, in questo esempio viene utilizzato exitUntilCollapsedScrollBehavior() per ottenere il valore che viene trasmesso per scrollBehavior. Di conseguenza, la barra si comprime quando l'utente scorre i contenuti interni dell'impalcatura, ma si espande 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.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:
Barra dell'app in basso
Per creare una barra dell'app in basso, utilizza il componibile BottomAppBar. L'uso di questo elemento componibile è molto simile ai principali elementi componibili della barra dell'app descritti nelle sezioni precedenti di questa pagina. I componenti componibili vengono trasmessi per i seguenti parametri chiave:
actions: una serie di icone visualizzate sul lato sinistro della barra. Si tratta in genere di azioni chiave per la schermata specificata o 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 come segue:
Risorse aggiuntive
- Documentazione di Material3 - Barra dell'app superiore
- Documentazione di Material3 - Barra dell'app in basso
- Impalcatura