DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
22-10-2014

El Navigation Drawer es un panel que se expande y contrae desde el lado izquierdo de la pantalla del dispositivo y muestra un menú de opciones de navegación de la aplicación; es posible mostrar el menú lateral aplicando un toque en el lado izquierdo de la pantalla y arrastrando hacia la derecha o tocando el icono de la aplicación ubicado en la barra de acciones.

El menú lateral o Drawer Layout resulta un elemento más visual y personalizable que el menú tradicional empleado desde las primeras versiones de Android. menú tradicional en android

En esta primera entrada veremos como crear un menú lateral básico en Android:

1. Creando el Drawer Layout

Lo primero que debemos hacer es modificar la estructura del layout de la actividad en la cual deseamos que se muestre el menú lateral, añadimos el DrawerLayout como elemento raiz del layout principal de la actividad, además de un ListView para el menú lateral (Navigation Drawer). Si este era el layout con el contenido principal a mostrar:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

	<TextView
	    android:id="@+id/textView1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="Hola Mundo!" />

</RelativeLayout/>

Al agregar el DrawerLayout y el ListView en el layout de la actividad, quedaría de la siguiente manera:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hola Mundo!" />

    </RelativeLayout>

    <ListView
        android:id="@+id/list_view"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#007095"
        android:choiceMode="singleChoice"
        android:divider="#005875"
        android:dividerHeight="2dp" />
</android.support.v4.widget.DrawerLayout>

</RelativeLayout/>

Hay que colocar el contenido de la actividad dentro (como elemento hijo) del android.support.v4.widget.DrawerLayout.

Es posible especificar la dirección en donde se desee mostrar el menú empleando la propiedad layout_gravity:

Se estila que la ubicación del menú lateral sea a la derecha.

2. Referenciando el Drawer Layout y el Navigation Drawer

Ya definido el layout de la actividad, el siguiente paso consiste en referenciar a los elementos con los cuales vamos trabajar; el ListView (Navigation Drawer: en donde se renderizará nuestro panel o menú lateral):

ListView listView = (ListView) findViewById(R.id.list_view);

Y el DrawerLayout, que representa el contenedor que permite la creación de vistas interactivas tipo Drawer:

DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

3. Definiendo el Adaptador (Adapter) con la estructura de opciones

Ya referenciados los elementos los elementos a utilizar en la Actividad, ahora es posible crear el menú de opciones a partir de una estructura de opciones como una List o Array y establecerlos en el ListView (Navigation Drawer) a través de un Adapter:

String[] opciones = { "Opción 1", "Opción 2", "Opción 3", "Opción 4" };

listView.setAdapter(new ArrayAdapter(this,
		android.R.layout.simple_list_item_1, android.R.id.text1,
		opciones));

Es posible crear un Adapter personalizado para agregar otros elementos al menú como iconos, esto será explicado en otras entregas.

4. Configurando los eventos abrir y cerrar del menú lateral con el icono de la aplicación

Debemos sobreescribir e implementar los siguientes eventos y funciones si queremos:

Si ya has cumplido con los pasos anteriores, ya tendrás listo y a tu disposición un menú lateral o Navigation Drawer; en siguientes entregas veremos como personalizar el menú lateral agregando iconos, botones y cambiando el estilo del mismo; podrás encontrar el código fuente en nuestro repositorio de GitHub:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Librería oficial de PayPal para Android

Librería oficial de PayPal  para Android

Telegram messenger para Android

Telegram messenger para Android

Creando increibles Drawer en Android con MaterialDrawer

Creando increibles Drawer en Android con MaterialDrawer

Algunos artículos que te pueden interesar

¿Cómo evitar el reinicio de las actividades al rotar la pantalla en Android?

¿Cómo evitar el reinicio de las actividades al rotar la pantalla en Android?

Cuando se gira o rota la pantalla del dispositivo el método OnCreate es invocado y por ende se reinicia, en esta entrada veremos como evitar este reinicio.

Andrés Cruz 25-09-2014

Cómo ejecutar múltiples emuladores en Android Studio en un mismo proyecto

Cómo ejecutar múltiples emuladores en Android Studio en un mismo proyecto

Se explica como emplear múltiples emuladores en Android Studio en un mismo proyecto.

Andrés Cruz 24-10-2016

Estructura básica de un proyecto Android

Estructura básica de un proyecto Android

Todos los proyectos Android eventualmente se construyen dentro de un .apk que es el archivo que se instala en el dispositivo; contiene cosas como el código fuente y recursos; algunos se crean de forma predeterminada y otros se agregan según lo amerite.

Andrés Cruz 16-09-2013