O componente cabeçalho de barra de aplicativo é uma barra dedicada na parte superior da tela do aplicativo que pode ser personalizada para exibir funções importantes relacionadas ao aplicativo, como branding, navegação de nível superior e acesso aos controles do aplicativo.
Use layouts de cabeçalhos de barra de app e de consistência para posicionar controles importantes, como a pesquisa no app, em um local padrão na IU.
Anatomia
O cabeçalho da barra de apps e & pode incluir uma variedade de elementos. A configuração pode ser feita de uma destas maneiras:
- Cabeçalho do app:quando configurado como um cabeçalho do app, o componente contém espaço para texto opcional, com uso mínimo de ícones e botões. Normalmente, ele inclui um título e uma seta para voltar.
- Barra de apps: quando configurada como uma barra de apps, ela pode incluir ícones, guias e botões. Os elementos comuns incluem um ícone do app e opções de navegação.
Essas versões também podem incluir controles de apps, como a pesquisa e as configurações.
1. Seta para voltar
2. Título da tela
3. Botão
4. Controles do app
5. Ícone do app
6. Navegação principal (guias)
Especificações – Barra de apps
Barra de apps com navegação principal: alinhada ao centro
Barra de apps com navegação principal: alinhada à esquerda
Barra de apps com navegação principal: recolhida (gaveta em vez de guias)
Especificações: cabeçalho do app
Cabeçalho do app com título centralizado
Cabeçalho do app com um único controle do app
Cabeçalho do app com vários controles de app
Cabeçalho do app com um único botão
Cabeçalho do app com vários botões
Cabeçalho do app com texto flutuante
Cabeçalho do app com uma barra de guias autônoma
Personalização
Os OEMs podem refletir a marca modificando a aparência do cabeçalho da barra de apps. Estas são as possíveis modificações:
- Ícones personalizados
- Fontes personalizadas
- Como definir a aparência de botões ativos, inativos e desativados
- Como definir dimensões e posições do botão
O sistema de design fornece orientações para personalizar componentes usando layout, cor, tipografia e dimensionamento.
Exemplos
