Crea un menú deslizable con el componente de panel lateral de navegación

El componente del panel lateral de navegación es un menú deslizante que permite a los usuarios navegar a varias secciones de tu app. Para activarlo, los usuarios deben deslizar el dedo desde el costado o presionar un ícono de menú.

Ten en cuenta estos tres casos de uso para implementar un panel lateral de navegación:

  • Organización del contenido: Permite que los usuarios cambien entre diferentes categorías, como en las apps de noticias o blogs.
  • Administración de la cuenta: Proporciona vínculos rápidos a la configuración de la cuenta y a las secciones de perfil en apps con cuentas de usuario.
  • Descubrimiento de funciones: Organiza varias funciones y parámetros de configuración en un solo menú para facilitar el descubrimiento y el acceso de los usuarios en apps complejas.

En Material Design, existen dos tipos de paneles laterales de navegación:

  • Estándar: Comparte el espacio de una pantalla con otro contenido.
  • Modal: Aparece sobre otro contenido dentro de una pantalla.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Cómo implementar un panel lateral de navegación

Puedes usar el elemento componible ModalNavigationDrawer para implementar un panel lateral de navegación:

Puntos clave

  • Usa el espacio drawerContent para proporcionar un ModalDrawerSheet y el contenido del panel lateral.

  • ModalNavigationDrawer acepta una cantidad de parámetros adicionales de panel lateral. Por ejemplo, puedes activar o desactivar si el panel lateral responde a arrastres con el parámetro gesturesEnabled, como en el siguiente ejemplo:

Controla el comportamiento del panel lateral de navegación

Para controlar cómo se abre y se cierra el panel lateral, usa DrawerState:

Puntos clave

  • Pasa un DrawerState a ModalNavigationDrawer con el parámetro drawerState.
  • DrawerState proporciona acceso a las funciones open y close, así como a propiedades relacionadas con el estado actual del panel lateral. Estas funciones de suspensión requieren un CoroutineScope, del que puedes crear una instancia con rememberCoroutineScope. También puedes llamar a las funciones de suspensión en respuesta a eventos de la IU.

Resultados

Figura 1: Un panel lateral de navegación estándar (izquierda) y un panel lateral de navegación modal (derecha).

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
Colección de guías rápidas

Si tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios