Leer en inglés

Compartir a través de


Raíl de navegación

Los dispositivos de pantalla grande Android tienen más espacio para los elementos de navegación que el factor de forma del teléfono. El equipo de diseño de materiales agregó recientemente el componente Navigation Rail para su uso en pantallas más grandes y dispositivos plegables.

Este componente proporciona una manera ergonómica de navegar por pantallas más grandes y admite tres alineaciones diferentes: superior, central e inferior. El raíl de navegación no debe tener más de ocho opciones.

Navigation Rail with three variants aligned – top, center, and bottom

A continuación se muestra una aplicación de ejemplo que usa el componente Navigation Rail que se ejecuta en Surface Duo. En orientación vertical dual, el riel de navegación se queda a la izquierda de la pantalla, ofreciendo fácil acceso a los elementos de navegación cuando la pantalla está en su estado de posición abierta. Este comportamiento también se aplica a dispositivos de pantalla grandes, como tabletas.

Sample app spanned across two screens, using Navigation Rail on the left screen with five icon elements. Photos of plants are shown on the left screen and a single plant is selected on the right screen, with descriptive text also showing

Dado que los plegables generalmente también ofrecen la capacidad de presentar un área de pantalla más pequeña (cuando se dobla o cierra completamente, dependiendo del dispositivo), la aplicación debe cambiar a una opción de navegación adecuada para el tamaño de la pantalla, como la navegación inferior:

Example bottom navigation bar with five icon elements

A continuación se muestra un ejemplo completo con la navegación inferior:

Sample app on a single screen showing the bottom navigation bar being used instead of Navigation Rail

Las aplicaciones de teléfono Android existentes con navegación inferior deben considerar la posibilidad de agregar Navigation Rail al adaptarse a pantallas más grandes y plegables.

Cuándo se usa

Use Navigation Rail en pantallas plegables y pantallas de pantalla grandes para las opciones de navegación principales, siguiendo estas directrices:

  • Destinos de nivel superior que deben ser accesibles en cualquier lugar de una aplicación
  • Tres a ocho destinos principales en una aplicación

Navigation Rail no debe usarse para:

  • Tamaños de pantalla más pequeños (considere la posibilidad de usar la navegación inferior en su lugar)
  • Actividades de una sola tarea, como ver una lista o un subproceso
  • Navegación secundaria

Aplicación de Android de ejemplo

Hay aplicaciones de ejemplo de Navigation Rail disponibles mediante Kotlin con diseños XML , así como Jetpack Compose:

Jetpack Compose example of Navigation Rail sample app

Componente de diseño

Consulte el Kit de diseño para obtener instrucciones visuales sobre los diseños de Navigation Rail:

Design Kit screenshot showing six different Navigation Rail alignments