contacto[arroba]digitallearning.es

Navigation View: diseño de cabecera y contenido del menú

Post Series: Navigation Drawer

Vamos a continuar describiendo la creación de un menú lateral o Navigation Drawer en nuestra App Android con la implementación del Navigation View.

Siguiendo pues con el diseño de los diferentes elementos de este panel lateral, vamos a ver la implementación de los layouts que construyen la cabecera de la aplicación, o lo que es lo mismo, la opción que permite al usuario desplegar el menú lateral, así como la definición de un menú personalizado.

Comenzaremos por describir la barra de herramientas que se incluye dentro del DrawerLayout, y que mediante un elemento personalizado, se mostrará dentro de la Activity principal.

Como se puede observar en las líneas anteriores, se ha definido su identificador, además de asociar este include a un nuevo layout, que define las propiedades de la barra de herramientas situada en la parte superior de la pantalla.

Dentro de este layout personalizado, cabría destacar la implementación de un archivo de recursos para establecer el color de dicha barra de herramientas.

Una vez se han definido los elementos para la construcción de la barra de acción, se deberá establecer el diseño de la cabecera del menú desplegable.

Este nuevo layout, que como ya se ha comentado anteriormente será establecido como propiedad del NavigationView (app:headerLayout="@layout/header"), permite definir un diseño más personalizado del menú lateral, muy común en aplicaciones que necesitan que el usuario inicie sesión, y muestre en dicha cabecera características de su perfil.

Dentro de este nuevo layout, será de gran importancia establecer una altura adecuada, para posteriormente establecer el resto del contenido del menú justo debajo:

Como ejemplo se puede apreciar el siguiente resultado final del diseño de un NavigationView, con los diferentes elementos descritos hasta este apartado:

Ejemplo de panel de navegación

Métodos públicos de la clase Navigation View

Vamos a completar esta introducción a Navigation View, presentando los métodos públicos principales de esta clase. Conocer estos métodos nos permite ampliar la funcionalidad de cualquier aplicación Android donde implementemos esta clase.

Método Devuelve Descripción
addHeaderView(View view) void Añade una vista a la cabecera del menú de navegación.
draw(Canvas canvas) void Dibuja la vista y sus hijos, recibiendo como parámetro el Canvas.
getItemBackground() Drawable Devuelve el fondo para los elementos del menú.
getItemIconTintList() ColorStateList Devuelve el tinte que se aplica a los iconos de los elementos.
getItemTextColor() ColorStateList Devuelve el tinte que se aplica a los iconos de los elementos.
getMenu() Menu Devuelve la instancia Menu asociada con este punto de vista de navegación.
inflateHeaderView(int res) View Infla una vista y lo agrega como cabecera del menú de navegación.
inflateMenu(int resId) void Infla un recurso de menú en esta vista de navegación.
removeHeaderView(View view) void Elimina una vista añadida previamente.
setCheckedItem(int id) void Establece el elemento actualmente comprobado en este menú de navegación.
setItemBackground
(Drawable itemBackground)
void Establece el fondo de los elementos de menú a un recurso determinado.
setItemBackgroundResource
(int resId)
void Establece el fondo de los elementos de menú al recurso dado.
setItemIconTintList
(ColorStateList tint)
void Establece el tinte que se aplica a los iconos de los elementos.
setItemTextAppearance
(int resId)
void Establece el aspecto del texto de los elementos de menú para un recurso determinado.
setItemTextColor
(ColorStateList textColor)
void Establece el color del texto, que es el texto de los elementos del menú.
setNavigationItemSelectedListener
(NavigationView.
OnNavigationItemSelectedListener listener)
void Establecer un oyente que será notificado cuando un elemento del menú sea seleccionado.

Si quieres ampliar información, puedes acceder al resto de documentación oficial sobre NavigationView.

En la próxima publicación desarrollaremos un proyecto que nos sirva de ejemplo para ver la implementación de un menú lateral en una App Android.


Créditos: imagen ejemplo Navigation View de Android Developers Blog con licencia CC BY 2.5