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

24/02/2016
Interfaz usuario, Material Design, Nivel Básico

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.

<android.support.v4.widget.DrawerLayout...

    <include
        android:id="@+id/toolbar"
        layout="@layout/actionbar" />  

</android.support.v4.widget.DrawerLayout>

<android.support.v4.widget.DrawerLayout...

<include

android:id="@+id/toolbar"

layout="@layout/actionbar" />

</android.support.v4.widget.DrawerLayout>

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.

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/abc_action_bar_default_height_material"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="@color/primaryColor"/>

<android.support.v7.widget.Toolbar

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="@dimen/abc_action_bar_default_height_material"

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

android:background="@color/primaryColor"/>

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:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="190dp" <!-- Tamaño de la altura del layout -->
    android:background="@drawable/background_material"
    android:orientation="vertical"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/nombre"
        android:id="@+id/usuario"
        android:gravity="left"
        android:layout_marginBottom="8dp"
        android:textSize="14sp"
        android:textColor="#fff"
        android:layout_alignParentBottom="true"

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="190dp"

android:background="@drawable/background_material"

android:orientation="vertical"

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/nombre"

android:id="@+id/usuario"

android:gravity="left"

android:layout_marginBottom="8dp"

android:textSize="14sp"

android:textColor="#fff"

android:layout_alignParentBottom="true"

</RelativeLayout>

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

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.