As barras de apps são contêineres na parte de cima ou de baixo da tela que dão aos usuários acesso aos principais recursos e itens de navegação:
Tipo |
Aparência |
Objetivo |
---|---|---|
Barra de apps na parte de cima | Na parte de cima da tela. |
Permite acesso a tarefas e informações importantes. Normalmente, hospeda um título, itens de ação principais e alguns itens de navegação. |
Barra de apps na parte de baixo | Na parte de baixo da tela. |
Normalmente, inclui os itens de navegação principais. Pode dar acesso a outras ações, por exemplo, usando um botão de ação flutuante. |
Compatibilidade de versões
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.
Dependências
Implementar uma barra de apps na parte de cima
O código a seguir mostra implementações para os quatro tipos de barras de apps na parte de cima, incluindo vários exemplos de como controlar o comportamento de rolagem.
- Barra de apps pequena na parte de cima
- Barra de apps na parte de cima alinhada ao centro
- Barra de apps na parte de cima, tamanho médio
- Barra de apps grande na parte de cima
Barra de apps pequena na parte de cima
Para criar uma pequena barra de apps na parte de cima, use o elemento combinável TopAppBar
. Essa é a
barra de apps de cima mais simples possível e, neste exemplo, contém apenas um título.
O exemplo a seguir não transmite um valor de TopAppBar
para
scrollBehavior
. Portanto, a barra de apps na parte de cima não reage à rolagem do conteúdo
interno.
Resultado
![Exemplo de uma pequena barra de apps na parte de cima.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-small.png?hl=pt-br)
Barra de apps superior centralizada
A barra de apps de cima centralizada é igual à barra de apps pequena,
exceto pelo título centralizado no componente. Para implementar, use o
elemento combinável dedicado CenterAlignedTopAppBar
.
Este exemplo usa enterAlwaysScrollBehavior()
para acessar o valor transmitido
para scrollBehavior
. A barra é recolhida quando o usuário rola o
conteúdo interno do scaffold.
Resultado
![Escreva o texto alternativo aqui](https://developer.android.com/static/develop/ui/compose/images/components/appbar-centered.png?hl=pt-br)
Barra de apps superior média
A barra de apps de cima média coloca o título abaixo de outros ícones. Para criar
um, use o elemento combinável MediumTopAppBar
.
Como no código anterior, este exemplo usa enterAlwaysScrollBehavior()
para
receber o valor transmitido para scrollBehavior
.
Resultado
enterAlwaysScrollBehavior
.Barra de apps grande na parte de cima
Uma barra de apps grande na parte de cima é semelhante à média, embora o padding entre o
título e os ícones seja maior e ela ocupe mais espaço na tela. Para
criar um, use o elemento combinável LargeTopAppBar
.
Este exemplo usa
exitUntilCollapsedScrollBehavior()
para acessar o valor transmitido para
scrollBehavior
. A barra é recolhida quando o usuário rola o
conteúdo interno do esqueleto, mas se expande quando o usuário rola até o final
do conteúdo interno.
Resultado
![Uma tela em um app com uma barra de apps na parte de baixo que contém ícones de ação no lado esquerdo e um botão de ação flutuante à direita.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-large.png?hl=pt-br)
Implementar uma barra de apps na parte de baixo
Para criar uma barra de apps na parte de baixo, use o elemento combinável BottomAppBar
, que é
semelhante ao elemento combinável da barra de apps na parte de cima.
Você transmite elementos combináveis para os seguintes parâmetros chave:
actions
: uma série de ícones que aparecem no lado esquerdo da barra. Elas geralmente são ações principais da tela em questão ou itens de navegação.floatingActionButton
: o botão de ação flutuante que aparece no lado direito da barra.
Resultado
![Uma tela em um app com uma barra de apps na parte de baixo que contém ícones de ação no lado esquerdo e um botão de ação flutuante à direita.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-bottom.png?hl=pt-br)
Pontos principais
- Geralmente, você transmite as barras de apps para o elemento combinável
Scaffold
, que tem parâmetros específicos para recebê-las. Os elementos combináveis usados para implementar as barras de apps superiores compartilham os seguintes parâmetros principais:
title
: o texto que aparece na barra de apps.navigationIcon
: o ícone principal de navegação, que aparece à esquerda da barra de apps.actions
: ícones que fornecem ao usuário acesso a ações importantes, que 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.
É possível controlar como a barra de apps responde quando o usuário rola o conteúdo interno do esqueleto. Para fazer isso, crie uma instância de
TopAppBarScrollBehavior
e transmita-a para a barra de apps superior para o parâmetroscrollBehavior
. Há três tipos deTopAppBarScrollBehavior
:enterAlwaysScrollBehavior
: quando o usuário puxa o conteúdo interno do scaffold, a barra de apps de cima é recolhida. A barra de apps se expande quando o usuário puxa o conteúdo interno para baixo.exitUntilCollapsedScrollBehavior
: semelhante aenterAlwaysScrollBehavior
, mas a barra de apps também se expande 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.
Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=pt-br)