Android >> Ejemplo de Navigation Drawer en Android ( Parte 1 )

entrada_navigationdrawer_parte1

Una de las novedades que ha traído Google IO 2013 ha sido la adopción como un estándar de la barra de navegación conocida como Navigation Drawer (en español cajón de navegación) en la versión 13 de la librería de soporte de Android. Google ha proporcionado toda las herramientas y documentación necesario para que cualquier desarrollador puede implementarla en cualquier aplicación. Toda la información está disponible en la guía de diseño de Android disponible aquí.

navigation_drawer_overview

La popularidad de este componente ha ido creciendo últimamente, pero cuando cualquier desarrollador quería incluir el componente Navigation Drawer en sus aplicaciones debía implementarla él mismo, por lo que podíamos encontrar una barra de navegación diferente en las aplicaciones. Gracias a que Google ha incluido este componente de manera nativa, empezaremos a ver que todas las aplicaciones empiezan a adoptarla, y de esta manera mejorar la experiencia del usuario.

A continuación vamos a desarrollar una aplicación para mostrar la implementación de un componente Navigation Drawer. Después de crear un nuevo proyecto debemos descargar la librería de soporte de Android, para ello hacemos lo siguiente:

  1. Hacemos clic derecho sobre el nombre del proyecto Android en el Explorador de Proyectos (Project Explorer) de Eclipse.
  2. Seleccionamos Android Tools y luego Add Support Library…
  3. Aceptamos la licencia y empezará la instalación.

Una vez instaladas la librería de soporte ya podemos empezar a escribir la aplicación. Lo primero es crear una vista y definir en ella un componente DrawerLayout como el objeto raíz de la vista. Dentro de ella, añadimos una lista, que contendrá el contenido principal de la vista (cuando el componente Navigation Drawer esté oculto), y otra vista que contendrá el contenido del componente Navigation Drawer. Hay que tener en cuenta varios factores:

  • La vista principal de la vista debe de ser el primer hijo del componente DrawerLayout, ya que hay mantener el orden de los componentes en el fichero XML.
  • La vista principal tiene asignado el valor "match_parent" tanto en la altura como en el ancho, ya que la vista deberá ocupar toda la pantalla cuando la barra de navegación esté oculta.
  • La vista que incluyamos en la barra de navegación debe especificar un valor para el atributo android:layout_gravity. Especificamos el valor "start" para dicho atributo.
  • Por último hay que especificar un ancho en unidades dp y en la altura especificamos el valor "match_parent". El ancho de la barra de navegación no debería ser mayor de 320dp para permitir que siempre haya una porción del contenido principal visible.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<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" >

    <!-- The main content view -->

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <!-- The navigation drawer -->

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

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

Una vez tenemos la vista hecha podemos pasar definir la lógica. En este primer ejemplo sobre Navigation Drawer, vamos a mostrar simplemente una lista de opciones en la barra de navegación. Definimos el fichero arrays.xml en el directorio /res/values/:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string-array name="nav_options">
        <item>Option 1</item>
        <item>Option 2</item>
        <item>Option 3</item>
        <item>Option 4</item>
        <item>Option 5</item>
        <item>Option 6</item>
    </string-array>

</resources>

Y a continuación ya podemos crear la actividad principal en el fichero MainActivity.java:

MainActivity.java

package com.amatellanes.android.examples;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends FragmentActivity {

	private ListView navList;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		this.navList = (ListView) findViewById(R.id.left_drawer);

		// Load an array of options names
		final String[] names = getResources().getStringArray(
				R.array.nav_options);

		// Set previous array as adapter of the list
		ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, names);
		navList.setAdapter(adapter);
	}
}

Con estos sencillos paso ya estará funcionando la barra de navegación. Aparecerá por encima de la vista principal que hemos definido ya sea deslizando nuestro dedo desde el borde izquierdo de la pantalla o tocando su icono en la barra de acciones. Puedes ocultar la barra de cuatro manera diferentes: deslizándola con el dedo hacia la izquierda, pulsando el botón de la barra de acciones, pulsando el botón Atrás de nuestro dispositivo o pulsando cualquier zona de la pantalla que esté fuera de la barra.

ejemplo-navigationdrawer-parte1

Más información | Ejemplo de Navigation Drawer en Android (Parte 2) & Android Developers

Descargar código | Github

Etiquetado ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: