Criar um menu deslizante com o componente da gaveta de navegação

O componente da gaveta de navegação é um menu deslizante que permite que os usuários naveguem por várias seções do app. Os usuários podem ativar esse recurso deslizando para o lado ou tocando em um ícone de menu.

Considere estes três casos de uso para implementar uma gaveta de navegação:

  • Organização de conteúdo:permita que os usuários alternem entre diferentes categorias, como em apps de notícias ou blogs.
  • Gerenciamento da conta:ofereça links rápidos para as configurações da conta e as seções do perfil em apps com contas de usuário.
  • Descoberta de recursos:organize vários recursos e configurações em um único menu para facilitar a descoberta e o acesso do usuário em apps complexos.

No Material Design, há dois tipos de gavetas de navegação:

  • Padrão:compartilha espaço em uma tela com outro conteúdo.
  • Modal:aparece sobre outros conteúdos em uma tela.

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 gaveta de navegação

Você pode usar o elemento combinável ModalNavigationDrawer para implementar uma gaveta de navegação:

Pontos principais

  • Use o slot drawerContent para fornecer um ModalDrawerSheet e o conteúdo da gaveta.

  • ModalNavigationDrawer aceita vários outros parâmetros de gaveta. Por exemplo, é possível ativar ou desativar a resposta da gaveta às ações de arrastar com o parâmetro gesturesEnabled, como no exemplo abaixo:

Controlar o comportamento da gaveta de navegação

Para controlar como a gaveta é aberta e fechada, use DrawerState:

Pontos principais

  • Transmita um DrawerState para ModalNavigationDrawer usando o parâmetro drawerState.
  • DrawerState fornece acesso às funções open e close, além de propriedades relacionadas ao estado atual da gaveta. Essas funções de suspensão exigem um CoroutineScope, que pode ser instanciado usando rememberCoroutineScope. Também é possível chamar as funções de suspensão em resposta a eventos da interface.

Resultados

Figura 1. Uma gaveta de navegação padrão (à esquerda) e uma gaveta de navegação modal (à direita).

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:

Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback