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: barra delle app superiore e barra delle app inferiore. Il rispettivo aspetto e scopo sono i seguenti:
Digitazione |
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 determinati elementi di navigazione. |
Barra dell'app in basso |
Nella parte inferiore dello schermo. |
In genere include gli elementi di navigazione principali. Può anche fornire l'accesso ad altre azioni chiave, ad esempio tramite un pulsante di azione mobile incluso. |
Per implementare una barra delle app superiore e una barra delle app inferiore, utilizza rispettivamente i composabili TopAppBar e
BottomAppBar. Ti consentono di creare interfacce coerenti che incapsulano i controlli di navigazione e azione e sono in linea con i principi di Material Design.
Barre delle app in alto
La tabella seguente illustra i quattro tipi di barre delle app nella parte superiore:
Digitazione |
Esempio |
|---|---|
Piccole: per le schermate che non richiedono molte azioni o navigazione. |
|
Allineata al centro: per le schermate che hanno una singola azione principale. |
|
Medio: per le schermate che richiedono una quantità moderata di navigazione e azioni. |
|
Grande: per le schermate che richiedono molta navigazione e azioni. |
|
API surface
I vari composabili che consentono di implementare le quattro diverse barre di app superiori sono abbastanza simili. Condividono diversi parametri chiave:
title: il testo visualizzato nella barra delle app.navigationIcon: l'icona principale per la navigazione. Viene visualizzato sulla sinistra della barra delle app.actions: icone che consentono all'utente di accedere alle azioni principali. Vengono visualizzati a destra della barra delle app.scrollBehavior: determina in che modo la barra delle app superiore risponde allo scorrimento dei contenuti interni della struttura.colors: determina la modalità di visualizzazione della barra delle app.
Comportamento di scorrimento
Puoi controllare il comportamento della barra delle app quando l'utente scorre i contenuti interni della struttura indicata. 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 rimuove i contenuti interni.exitUntilCollapsedScrollBehavior: simile aenterAlwaysScrollBehavior, anche se la barra delle app si espande ulteriormente quando l'utente raggiunge la fine dei contenuti interni della struttura.pinnedScrollBehavior: la barra delle app rimane in posizione e non reagisce allo scorrimento.
Gli esempi riportati di seguito implementano diverse di queste opzioni.
Esempi
Le sezioni seguenti forniscono implementazioni per i quattro diversi tipi di barre delle app superiori, inclusi esempi diversi di come puoi controllare il comportamento di scorrimento.
Piccolo
Per creare una piccola barra delle app in alto, utilizza il composable TopAppBar. Questa è la barra dell'app superiore più semplice possibile e in questo esempio contiene solo un titolo.
L'esempio seguente non passa a TopAppBar un valore per
scrollBehavior e quindi 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 della struttura.
@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 è visualizzata come segue:
Media
La barra delle app media in alto posiziona il titolo sotto eventuali icone aggiuntive. Per crearne uno, utilizza il componibile MediumTopAppBar.
Come lo snippet precedente, questo esempio utilizza enterAlwaysScrollBehavior() per recuperare il valore passato 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 viene visualizzata come segue, con una dimostrazione di come viene visualizzato il comportamento di scorrimento da enterAlwaysScrollBehavior():
Grande
Una barra delle app superiore grande è simile a quella media, anche se lo spazio 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, questo esempio utilizza
exitUntilCollapsedScrollBehavior() per ottenere il valore che viene passato per
scrollBehavior. Di conseguenza, la barra si comprime quando l'utente scorre i contenuti interni della struttura, ma si espande quando l'utente arriva 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 è visualizzata come segue:
Barra dell'app in basso
Per creare una barra delle app in basso, utilizza il composable BottomAppBar. L'utilizzo di questo composable è abbastanza simile a quello dei composabili della barra dell'app superiore descritti nelle sezioni precedenti di questa pagina. Devi passare i composabili 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 in questione 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 è visualizzata come segue:
Risorse aggiuntive
- Documentazione di Material3 - Barra delle app superiore
- Documentazione di Material3 - Barra delle app in basso
- Scaffold