Menú Navegación Páginas

El blog de Antonio Leiva sobre diseño y desarrollo de interfaces en Android

Menú de navegación lateral: Implementación (I)

Menú de navegación lateral: Implementación (I)
  • Twitter
  • Facebook
  • Google Plus
  • LinkedIn

Hoy os muestro una de las posibles implementaciones para el menú de navegación lateral del que hablábamos el otro día. La librería que vamos a utilizar podéis descargarla de Github, y ha sido creada por Alex Korovyansky. Así que lo descargamos desde aquí, por ejemplo en formato ZIP. Si quieres puedes utilizar el ejemplo que viene, implementarlo sobre tu propia aplicación o hacer una prueba en un proyecto nuevo. Yo haré esto último.

Primero hay que preparar nuestro proyecto con las librerías necesarias:

  • Incluye en tu workspace la librería importándola desde el lugar donde la hayas descomprimido.
  • Añade esta librería a tu proyecto (botón derecho sobre el proyecto, properties, Android y en Library pulsar Add… y seleccionarla).
  • Incluye también el Android Support Package, vamos a necesitar Fragments.

Ahora vamos a hacer la apariencia de la actividad principal. Lo suyo sería usar alguna otra librería para implementar una Action Bar, pero no quiero complicarlo más, así que haré una rápidamente. En el AndroidManifest le indicaré a la aplicación que utilice el tema Light sin barra de título:


...

El código es el siguiente:


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

Es especialmente importante indicarle un fondo al Layout principal, si no se producen efectos extraños en la animación. Obtendremos algo así:

Menú de navegación lateral: Implementación (1)

Para el menú necesitamos una Activity y un Fragment. Cogeré los del ejemplo porque son suficientes para ilustrar este tutorial. La actividad (MenuActivity) básicamente crea y asigna el Helper que realizará toda la tarea complicada, la que se encarga de mostrar y ocultar el menú, y crea el Fragment:


public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 mSlideoutHelper = new SlideoutHelper(this);
 mSlideoutHelper.activate();
 getSupportFragmentManager().beginTransaction().add(com.korovyansk.android.slideout.R.id.slideout_placeholder, new MenuFragment(), "menu").commit();
 mSlideoutHelper.open();
 }

Además, captura las pulsaciones de teclas por si se pulsa el botón de volver, en cuyo caso ocultará el menú, e implementa accesor para el Helper:


@Override
 public boolean onKeyDown(int keyCode, KeyEvent event) {
 if(keyCode == KeyEvent.KEYCODE_BACK){
 mSlideoutHelper.close();
 return true;
 }
 return super.onKeyDown(keyCode, event);
 }

private SlideoutHelper mSlideoutHelper;

 public SlideoutHelper getSlideoutHelper(){
 return mSlideoutHelper;
 }

El Fragment puede ser de cualquier tipo. Lo típico es una lista, pero igual no cubre suficientemente nuestras necesidades (como el menú de Evernote), por lo que se podrá ajustar según las necesidad. En este caso usamos el ListFragment (MenuFragment) del ejemplo. Cuando se crea su actividad padre, se le añade el adaptador de lista:


@Override
 public void onActivityCreated(Bundle savedInstanceState) {
 super.onActivityCreated(savedInstanceState);
 setListAdapter(new ArrayAdapter(getActivity(),
 android.R.layout.simple_list_item_1, new String[] { " First", " Second", " Third", " Fourth", " Fifth", " Sixth"}));
 getListView().setCacheColorHint(0);
 }

Y cuando se pulsa cualquier elemento de la lista, se cierra el menú:


@Override
 public void onListItemClick(ListView l, View v, int position, long id) {
 super.onListItemClick(l, v, position, id);
 ((MenuActivity)getActivity()).getSlideoutHelper().close();
 }

Finalmente, en nuestra actividad principal añadimos el siguiente código al OnCreate:


findViewById(R.id.imageView1).setOnClickListener(
 new OnClickListener() {
 @Override
 public void onClick(View v) {
 int width = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 45, getResources().getDisplayMetrics());
 SlideoutActivity.prepare(MenuLateralTestActivity.this, R.id.PrimaryLayout, width);
 startActivity(new Intent(MenuLateralTestActivity.this,
 MenuActivity.class));
 overridePendingTransition(0, 0);
 }
 });

El ancho que se calcula corresponde a la parte que se dejará visible al mostrarse el menú, en este caso 45dp. La función se encarga de transformar el ancho a píxeles.

Con esto es suficiente. Ejecutamos la aplicación y obtenemos el siguiente resultado:

Menú de navegación lateral: Implementación (1)

En general funciona muy bien. Sólo le añadiría que se mostrara cuando se arrastra de izquierda a derecha desde fuera de la pantalla. Quizá algún día haga un tutorial sobre ello.

Esta es una de las posibilidades, pero existe otra librería más que os mostraré en algún artículo posterior y un método de implementación completo. Sigue atento a las novedades y pregunta cualquier duda que te surja en la sección de comentarios.

Código ejemplo | Proyecto Menú Lateral Test

¿Te ha gustado? Compártelo

14 Comentarios

  1. espero con ansias la segunda parte

  2. Hola

    Este articulo es una buena guia para aprender a usar este menú.

    He estado usándolo y ¿Como se hace para pasar información del menú a la actividad?

    El evento onListItemClick solo cierras el menú, pero y si quiero que la actividad reaccione según se manipule el menú. No veo por ningun sitio ningún Intent.

    Gracias

    • Hola Martí. Así sin probarlo creo que la opción más limpia es añadir otro fragment que se cargue en la parte derecha de la actividad. Es cierto que así se queda un poco cojo el tutorial, en cuanto que tenga un rato lo actualizo para cubrir este aspecto que comentas. Gracias.

  3. Hola Antonio Leiva,

    Me gustó Mucho tu tutorial, pero me tira un par de errores que no he podido corregir y eso que estoy haciendo Copy Paste..

    Podrías subir un video explicandolo o el proyecto comprimido para mirarlo ??

    Muchas Gracias por tu tiempo!!

    Saludos

    • Sí, esta noche a ver si puedo subirlo y lo adjunto. No sé si estás suscrito a las respuestas, pero te aviso por correo en cualquier caso.

      • Muchas Gracias Amigo!

        Estaré atento :D

        • Hola Juanka, ya lo he subido. Está al final del artículo. De todas maneras ahora te escribo un correo por si no lees esto. Saludos!

  4. Hola Antonio,
    Enhorabuena por tu tutorial que funciona a la perfeccion.
    ¿Has pensado ya lo de mostrar el menu cuando se arrastra de izquierda a derecha desde fuera de la patanlla?
    Muchas gracias.

    • Gracias Iván! La verdad es que no he pensado en ello… Es posible que desde entonces haya ya alguna librería más evolucionada que lo incluya, pero si no la implementación no es del todo evidente. Tienes que capturar el gesto e ir cambiando la posición del menú siguiendo el dedo.

      Viéndolo con perspectiva y tras varios meses de uso ahora que se va extendiendo, no termino de estar convencido de que sea un buen patrón de diseño. En la mayoría de los casos se puede sustituir por la navegación mediante spinner que incluye la ActionBar por defecto. Aún así en algunos casos tiene su sentido.

      • OK Antonio,
        Habia pensado en añadir la opcion de menu deslizante a una de mis apps pero creo q estilizando el tema del menu puede funcionar bien, voy a probar a dar fucionalidad al listView de las opciones
        Muchas gracias

  5. Kaixo Antonio,

    Gracias por el tuto, funciona perfectamente. Pero me surge una duda, en casi todas las librerías, por no decir todas, que implementan un menú lateral, se usa una lista para mostrar las distintas opciones. Mi duda es, ¿se puede usar algo que no sea una lista de Imagen-Texto? Es decir, pongo un ejemplo; el 1º elemento de la lista es una imagen, el 2º un texto, el 3º un Spinner, etc. Es la duda que me surge, y también si se pueden usar distintos layouts, por ejemplo un RelativeLayout.

    Gracias

    • Hola Aner, mira el tutorial que he añadido justo hoy. Explico como hacer el menú lateral con la nueva release del Support Package

      • Buenas Antonio,

        Muchas gracias, ya le he echado un ojo. Ya tenía implementado el menú con SlidingMenu + ActionBarSherlock. Aún asi, mirare que tal con el oficial de Google. Mi pregunta es, con versiones preHolo queda decente?

        • Pues a lo anterior no sabría responderte, tendría que mirar la librería de SlidingMenu, a ver si tengo un rato y le echo un ojo. Con respecto a la compatibilidad de la nueva, es de la Support Library, así que funciona desde v4

Trackbacks/Pingbacks

  1. Menú de navegación lateral: Implementación (II) | LiME Creative Labs - [...] la primera parte de los métodos de implementación del menú de navegación lateral vimos la librería desarrollada por Alex Korovyansky, …

Deja tus comentarios

¿Has probado ya Bandhook? Te presento mi nueva aplicación, en la que podrás consultar información de tus artistas favoritos y descubrir otros nuevos relacionados.