Explorando la Biblioteca de soporte de diseño de Android: Vista de navegación inferior

¡Ha pasado un tiempo desde que escribí sobre la Biblioteca de soporte de diseño de Android y estaba muy emocionado de despertarme esta mañana para descubrir que la Vista de navegación inferior se ha agregado a la versión 25 de la Biblioteca de soporte de diseño!

La Vista de navegación inferior ha estado en las pautas de diseño de materiales durante algún tiempo, pero no nos ha sido fácil implementarla en nuestras aplicaciones. Algunas aplicaciones han creado sus propias soluciones, mientras que otras han confiado en bibliotecas de código abierto de terceros para hacer el trabajo. Ahora que la biblioteca de soporte de diseño está viendo la adición de esta barra de navegación inferior, ¡veamos cómo podemos usarla!

Hice una aplicación de muestra realmente simple, termina en github si quieres echarle un vistazo.

Agregar la Vista de navegación inferior a su diseño

Para empezar, necesitamos actualizar nuestra dependencia.

compilar "com.android.support:design:25.0.0"

A continuación, simplemente necesitamos agregar el widget Vista de navegación inferior a nuestro archivo de diseño deseado. Recuerde que esto debe estar alineado con la parte inferior de la pantalla con todo el contenido que se muestra encima. Podemos agregar esta vista así:

Notarás que el widget tiene un par de atributos establecidos. Podemos usarlos para configurar los elementos del menú que deseamos mostrar y los colores que se utilizarán en la Vista de navegación inferior:

  • aplicación: itemBackground: el color de fondo que se utilizará para el menú de navegación inferior
  • app: itemIconTint: el tinte que se usará para los íconos en el menú de navegación inferior
  • app: itemTextColor: el color que se utilizará para el texto en el menú de navegación inferior
  • app: menu: el recurso de menú que se utilizará para mostrar elementos en el menú de navegación inferior

También podemos establecer estos valores mediante programación utilizando los siguientes métodos en nuestra instancia BottomNavigationView:

  • inflateMenu (int menuResource) - Infla un menú para la vista de navegación inferior usando un identificador de recurso de menú.
  • setItemBackgroundResource (int backgroundResource): el fondo que se utilizará para los elementos del menú.
  • setItemTextColor (ColorStateList colorStateList): una ColorStateList utilizada para colorear el texto utilizado para los elementos del menú
  • setItemIconTintList (ColorStateList colorStateList): una ColorStateList utilizada para teñir los iconos utilizados para los elementos del menú

Si agrega esto a su aplicación y lo ejecuta en su dispositivo, verá una nueva y brillante vista de navegación inferior como la siguiente:

Crear un menú para mostrar

Así que hicimos referencia a un menú en la sección anterior, pero ¿cómo se ve esto? Bueno, ¡se ve exactamente igual a cualquier otro menú que usaríamos en nuestra aplicación!

Es importante tener en cuenta que la cantidad máxima de elementos que podemos mostrar es 5. Esto puede cambiar en cualquier momento, por lo que es importante verificar esto utilizando el método getMaxItem () proporcionado por la clase BottomNavigationView en lugar de codificar el valor usted mismo.

Manejo de estados habilitados / deshabilitados

Usando BottomNavigationView podemos manejar fácilmente la visualización de elementos de menú habilitados y deshabilitados. Para que la vista maneje estos casos, solo necesitamos hacer dos cambios:

  • Primero necesitamos crear un archivo selector para nuestros colores habilitados / deshabilitados. Si no ha usado uno de estos antes, esencialmente nos permite definir el aspecto basado en el estado de un elemento.
  • Luego necesitamos

Los estados Deshabilitado y Habilitado se mostrarán reflejando el aspecto indicado del archivo selector:

Escuche los eventos de clic

Ahora que hemos implementado nuestro menú, necesitamos poder reaccionar cuando interactúa con él. Podemos usar el método BottomNavigationView setOnNavigationItemSelectedListener () para establecer un detector para eventos de elementos de menú:

Cuando recibimos eventos de clic para los elementos, simplemente podemos reaccionar en consecuencia. En mi muestra, simplemente cambio el elemento del localizador de vista seleccionado actualmente que se muestra en la pantalla.

¡Y eso es!

No parece mucho en absoluto, espero que pueda ver ahora cuán sencillo es implementar la vista de Navegación inferior utilizando la biblioteca de soporte de diseño. Muchas aplicaciones ya están utilizando la biblioteca de soporte de diseño, por lo que eliminar la necesidad de bibliotecas de terceros es bastante útil Si tiene alguna pregunta sobre la Vista de navegación inferior, ¡deje una respuesta o envíeme un tweet!

Echa un vistazo a algunos de mis otros proyectos en hitherejoe.com