Navigation Drawer con DrawerLayout comunicando fragments

Blog >Lista Soluciones > DrawerLayout con fragment


Hola amigos desarrolladores!! Después de ver los fragments en este post anterior, vamos a ver cómo jugar con ellos con un DrawerLayout además de implementar un ActionBar posteriormente.

DrawerLayout gestionando fragments "Navigation Drawer"


Antes de empezar voy a resaltar que este componente tiene bastantes incopatibilidades según la versión de Android que se use, así que no os desespereis. También hay que tener en cuenta que trabajamos con fragments, no con Actividades.

No es que se complique a la hora de escribir código, hay que enfocarlo de otra forma para para que concuerde de manera adecuada, es decir de forma autocontenida.

El autocontenido se refiere a todo lo que se encuentra en ella dentro sin necesidad de recurrir a contenidos externos como vinculos.


De momento nuestro activity_main será así :

<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" >

<!-- Contenido principal -->

<FrameLayout
    android:id="@+id/contenedor_principal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent" >

 </FrameLayout>

<!-- Navigation Drawer -->

<ListView
 android:id="@+id/drawer"
 android:layout_width="240dp"
 android:layout_height="match_parent"
 android:layout_gravity="left"
 android:background="#EEE" />

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


Analicemoslo bien, el id del Drawer es super importante, y pensar que tenemos que hacer un listview con adapter para gestionar los fragmentos también tiene su trabajo, poco pero lo tiene, así que vamos a ello :

public class itemsMenu {

 private String Nombre;
 private String Descripcion;
 private Drawable img;
 private int id;
 
 public itemsMenu(int id,String nombre, String descripcion, Drawable img) {
  super();
  this.id=id;
  this.Nombre = nombre;
  this.Descripcion = descripcion;
  this.img = img;
 }
 public int getId() {
  return id;
 }
 public void setId(int id) {
  this.id = id;
 }
 public String getNombre() {
  return Nombre;
 }
 public void setNombre(String nombre) {
  Nombre = nombre;
 }
 public String getDescripcion() {
  return Descripcion;
 }
 public void setDescripcion(String descripcion) {
  Descripcion = descripcion;
 }
 public Drawable getImg() {
  return img;
 }
 public void setImg(Drawable img) {
  this.img = img;
 }
}

Bien, ya tenemos todo lo necesario para implementar nuestro Drawermenú, vamos al onCreate del main y tiene que quedar así :

public class MainActivity extends FragmentActivity {
  private Context context=this;
  private ListView lista;
  public static DrawerLayout drawerLayout;
  private ArrayList array;
  private FrameLayout contenedor_principal;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);   
        configurarObjetos();
    }
    public void configurarObjetos(){
        contenedor_principal=(FrameLayout) findViewById(R.id.contenedor_principal);
        lista = (ListView) findViewById(R.id.drawer);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        array = new ArrayList();
        llenarListaMenu(array);
        //ADAPTER
        MenuAdapter adaptador = new MenuAdapter(this, array);
        lista.setAdapter(adaptador);
    }
  //LLENAR LISTA DE OBJETOS DEL MENU
    public void llenarListaMenu(ArrayList arraydir){
     itemsMenu item;
        // Introduzco los elementos
        item = new itemsMenu(1, "Nirvana", "Heart, sharped box",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
        item = new itemsMenu(2, "The pixies", "Where is my mind",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
        item = new itemsMenu(3,"Bob Dylan","Hurrican Carter",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
        item = new itemsMenu(4, "Toxicity","System of a down",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
        item = new itemsMenu(5, "Maneras de vivir", "Rosendo",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Ejecutamos la aplicación e inicialmente aparecerá una pantalla en blanco, basta con apretar en el lado donde hemos puesto el drawer (en este caso izquierda) y arrastrar hacia la derecha, entonces tendrá esta apariencia :

La base ya está echa, ahora si queremos maquearlo un poquito, vamos a insertarle un header en la lista,¿Como se hace? Según instanciamos la lista antes de llenar el array escribimos :

  //HEADER
  View header=getLayoutInflater().inflate(R.layout.header_menu, null);
        lista.addHeaderView(header,null,false);

Donde R.layout.header_menu es un recurso xml que esta en la carpeta layout, y como podeis ver es super simple implementarlo en nuesta Lista de nuestro DrawerMenu :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/alertImage"
        android:layout_width="250dp"
        android:layout_height="233dp"
        android:clickable="false"
        android:focusable="false"
        android:src="@drawable/ic_launcher" />

</FrameLayout>

Y quedaría así :

Observamos que clickamos en cualquier item de la lista y no sucede nada, eso es porque tenemos que implementar el evento onClick en la lista

        lista.setOnItemClickListener(new OnItemClickListener(){
   @Override
   public void onItemClick(AdapterView parent, View view,int position, long id) {
    
    seleccionarItem(position);
   }
         
        });
  
//SELECCION DE FRAGMENT
 @SuppressLint("ResourceAsColor") 
 public void seleccionarItem(int posicion){
            switch (posicion) {
         // BOTON PLAY, PRIMERA POSICION = 0
                case 1:
     //fragment1
                    break;
                case 2:
                    //fragment2
                    break;
                case 3:
                 //fragment3
                    break;
                case 4:
                  //fragment4
                    break;
                case 5:
     finish
            }  
    }

Ya tenemos como gestionar los fragment, ahora lo que necesitamos es crear 4 fragments distintos para que se pueda navegar en ellos, voy a poner uno, pero se deben hacer 4 "copias" que más tarde cada uno le dará una personalización distinta.

¿Cómo creamos un fragment? 
Creamos un xml y una clase Java así : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Fragmento 1"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ffffff"
        android:textSize="30sp" />

</RelativeLayout>

public class Fragment_1 extends Fragment{
 
  public View onCreateView(LayoutInflater inflater, ViewGroup contenedor, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_1, contenedor, false);       
         return v;
     }
}

Vamos a darle la funcionalidad para la gestión eficiente de los fragmentos mediante la función seleccionarItem, así que vamos a poner nuestra activity_main así :

public class MainActivity extends FragmentActivity {
  private Context context=this;
  private ListView lista;
  public static DrawerLayout drawerLayout;
  private ArrayList array;
  private FrameLayout contenedor_principal;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);   
        configurarObjetos();
    }
    public void configurarObjetos(){
        contenedor_principal=(FrameLayout) findViewById(R.id.contenedor_principal);
        lista = (ListView) findViewById(R.id.drawer);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        //le ponemos el header
       // View header=getLayoutInflater().inflate(R.layout.header_menu, null);
        //lista.addHeaderView(header,null,false);
        //Lista de objetos
        array = new ArrayList();
        llenarListaMenu(array);
        //ADAPTER
        MenuAdapter adaptador = new MenuAdapter(this, array);
        lista.setAdapter(adaptador);
        //PARA QUE SEA POR DEFECTO EL FRAGMENT1
        seleccionarItem(0);
        
        lista.setOnItemClickListener(new OnItemClickListener(){
   @Override
   public void onItemClick(AdapterView parent, View view,int position, long id) {
    
    seleccionarItem(position);
   }
         
        });
    }
    //====================================================================================
    //SELECCION DE FRAGMENT
    @SuppressLint("ResourceAsColor") 
    public void seleccionarItem(int posicion){
        Fragment fragment=null;
        boolean salida=false;
               switch (posicion) {
            // BOTON PLAY, PRIMERA POSICION = 0
                 case 0:
                  fragment = new Fragment_1();
                   break;
                   case 1:
                       fragment = new Fragment_2();
                       break;
                   case 2:
                       fragment = new Fragment_3();
                       break;
                   case 3:
                     fragment = new Fragment_4();
                       break;
                   case 5:
                    salida=true;
                    //MARCAMOS EL CLICKADO
                    lista.setItemChecked(posicion, true);
                    drawerLayout.closeDrawer(lista);
                    finish();
               }
               //SI SE SALE DE LA APLICACIÓN, AL HACER EL CAMBIO DE FRAGMENT DARIA NULLPOINTEREXCEPTION
               if (salida==false){
                //HACEMOS USO DE LA LIBRERIA
                FragmentManager fragmentManager=getSupportFragmentManager();
       //REEMPLAZAMOS
                fragmentManager.beginTransaction().replace(R.id.contenedor_principal, fragment).commit();
                //MARCAMOS EL CLICKADO
                lista.setItemChecked(posicion, true);
                drawerLayout.closeDrawer(lista);
            }
     
       }
  //LLENAR LISTA DE OBJETOS DEL MENU
    public void llenarListaMenu(ArrayList arraydir){
     itemsMenu item;
        // Introduzco los elementos
        item = new itemsMenu(1, "Nirvana", "Heart, sharped box",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
        item = new itemsMenu(2, "The pixies", "Where is my mind",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
        item = new itemsMenu(3,"Bob Dylan","Hurrican Carter",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
        item = new itemsMenu(4, "Toxicity","System of a down",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
        item = new itemsMenu(5, "Fin", "Salir de la aplicación",getResources().getDrawable(R.drawable.ic_launcher));
        arraydir.add(item);
    }

Y ya tenemos nuestro navigation drawer que navega entre fragmentos, este es el resultado :

"En el futuro los ordenadores no pesarán más de 1.5 toneladas. "
"Popular Mechanics, 1949"

Podeis descargar el código fuente de thebestandroide con sólo compartir en facebook,twitter,linkedin o suscribirte a nuestro canal RSS más abajo. 

Descargar archivo.

Categories: android drawer menu, Android navigation drawer, menu fragments, navigation drawer fragment