As barras de apps são contêineres que fornecem ao usuário acesso aos principais recursos e itens de navegação. Há dois tipos de barras de apps: barras de apps superiores e barras de apps inferiores. Suas respectivas aparência e finalidade são as seguintes:
Tipo |
Aparência |
Objetivo |
---|---|---|
Barra de apps superior |
Na parte superior da tela. |
Dá acesso às principais tarefas e informações. Geralmente, hospeda um título, itens de ação principais e determinados itens de navegação. |
Barra de apps inferior |
Na parte inferior da tela. |
Normalmente inclui os principais itens de navegação. Também pode fornecer acesso a outras ações importantes, como um botão de ação flutuante contido. |
Para implementar uma barra de apps na parte de cima e a de baixo, use os elementos combináveis TopAppBar
e
BottomAppBar
, respectivamente. Elas permitem criar interfaces
consistentes que encapsulam controles de navegação e ação e que são
alinhadas aos princípios do Material Design.
Principais barras de apps
A tabela abaixo descreve os quatro tipos de barras de apps principais:
Tipo |
Exemplo |
---|---|
Pequena: para telas que não exigem muita navegação ou ações. |
|
Alinhado ao centro: para telas que têm uma única ação principal. |
|
Média: para telas que exigem uma quantidade moderada de navegação e ações. |
|
Grande: para telas que exigem muita navegação e ações. |
Plataforma da API
Os vários elementos combináveis que permitem implementar as quatro barras de apps principais diferentes são muito semelhantes. Eles compartilham vários parâmetros principais:
title
: o texto que aparece na barra de apps.navigationIcon
: o ícone principal da navegação. Aparece à esquerda da barra de apps.actions
: ícones que fornecem ao usuário acesso às principais ações. Elas aparecem à direita da barra de apps.scrollBehavior
: determina como a barra de apps superior responde à rolagem do conteúdo interno do scaffold.colors
: determina como a barra de apps aparece.
Comportamento de rolagem
É possível controlar como a barra de apps responde quando o usuário rola o conteúdo interno do
scaffolding. Para fazer isso, crie uma instância de
TopAppBarScrollBehavior
e transmita-a para o parâmetro
scrollBehavior
na barra de apps superior.
Há três tipos de TopAppBarScrollBehavior
. Eles são os seguintes:
enterAlwaysScrollBehavior
: quando o usuário puxa o conteúdo interno do scaffold para cima, a barra de apps superior é fechada. A barra de apps se expande quando o usuário puxa o conteúdo interno para baixo.exitUntilCollapsedScrollBehavior
: semelhante aenterAlwaysScrollBehavior
, embora a barra do app também se expanda quando o usuário chega ao final do conteúdo interno do scaffold.pinnedScrollBehavior
: a barra de apps permanece no lugar e não reage à rolagem.
Os exemplos a seguir implementam várias dessas opções.
Exemplos
As seções abaixo oferecem implementações para os quatro tipos diferentes de barras de apps principais, incluindo exemplos variados de como controlar o comportamento de rolagem.
Pequeno
Para criar uma barra de apps pequena na parte de cima, use o elemento combinável TopAppBar
. Essa é a
barra superior de apps mais simples possível e, neste exemplo, contém apenas um título.
O exemplo abaixo não transmite a TopAppBar
um valor para
scrollBehavior
e, portanto, não reage à rolagem do conteúdo
interno.
@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) } }
Essa implementação aparece da seguinte maneira:
Alinhado ao centro
A barra de apps superior alinhada ao centro é essencialmente a mesma barra de apps pequena,
embora o título seja centralizado no componente. Para implementá-lo, use o
elemento combinável CenterAlignedTopAppBar
.
Esse exemplo usa enterAlwaysScrollBehavior()
para receber o valor transmitido
para scrollBehavior
. Dessa forma, a barra é recolhida quando o usuário rola o
conteúdo interno do scaffold.
@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) } }
Essa implementação aparece da seguinte maneira:
Mídia
A barra superior média de apps coloca o título abaixo de todos os ícones adicionais. Para criar
um, use o elemento combinável MediumTopAppBar
.
Como o snippet anterior, este exemplo usa enterAlwaysScrollBehavior()
para
receber o valor transmitido para 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) } }
Essa implementação é mostrada da seguinte maneira, com uma demonstração de como é o comportamento
de rolagem de enterAlwaysScrollBehavior()
:
Grande
Uma barra de apps superior grande é semelhante à mídia, embora o padding entre o
título e os ícones seja maior e ocupe mais espaço na tela em geral. Para
criar um, use o elemento combinável LargeTopAppBar
.
Ao contrário dos snippets anteriores, este exemplo usa
exitUntilCollapsedScrollBehavior()
para receber o valor transmitido para
scrollBehavior
. Dessa forma, a barra é recolhida quando o usuário rola o
conteúdo interno do scaffolding, mas se expande quando o usuário rola até o final
do conteúdo 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) } }
Essa implementação aparece da seguinte maneira:
Barra de apps inferior
Para criar uma barra de apps inferior, use o elemento combinável BottomAppBar
. O uso
desse elemento combinável é muito semelhante aos elementos combináveis da barra de apps na parte de cima da tela, descritos nas
seções anteriores desta página. Transmita elementos combináveis para estes parâmetros
principais:
actions
: uma série de ícones que aparecem no lado esquerdo da barra. Geralmente, são ações principais para a tela especificada ou itens de navegação.floatingActionButton
: botão de ação flutuante que aparece no lado direito da 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." ) } }
Essa implementação aparece da seguinte maneira:
Outros recursos
- Documentos do Material 3: barra de apps na parte de cima
- Documentos do Material 3: barra de apps inferior (link em inglês)
- Scaffold