«

»

Implementación del menú lateral (SlidingMenu)

 

navegacion-lateral

Android ha cambiado mucho desde sus inicios hasta ahora, diferentes patrones de diseño han ido emergiendo a lo largo de su historia para hacer más conveniente el uso de pantallas táctiles. Ya no sirven convenciones como las que existían en los teléfonos de botones o en las ya obsoletas PDAs.

Las pantallas que se pueden tocar con los dedos requieren otros mecanismos para poder interactuar con ellas de forma cómoda. Al principio Google propuso el patrón dashboard para navegar entre diferentes partes independientes de la aplicación, partes que se pudieran considerar tareas distintas dentro de la misma actividad, de modo que el usuario pulsaba un botón “inicio” para volver al dashboard de la aplicación y desde allí acceder a otra parte de la misma. Pongamos por ejemplo la aplicación antigua de twitter, se presentaba un dashboard desde el que podías navegar entre tu timeline, menciones, mensajes directos, listas, etc.

 

twitter

 

Con la llegada de Honeycomb, este patrón quedó obsoleto a favor de un menú desplegable en la action bar para poder navegar entre distintas tareas de una misma aplicación sin pasar por una pantalla intermedia. Pero este patrón no ha llegado a gustar mucho, porque, por lo menos a mi, me resulta extraño, y no está claro si es para cambiar el modo de visualización, cambiar de tarea, etc.

Es por eso que recientemente se ha empezado a adoptar el patrón del menú lateral. Empezó siendo la aplicación de Facebook la que lo introdujo por primera vez de forma masiva (¡ni siquiera era una aplicación nativa!) y poco a poco se fue popularizando. Ahora lo vemos en la app de Google+, Evernote, Spotify y muchas otras, por la flexibilidad que ofrece. No solo nos vale para mostrar una lista de cosas que podemos hacer con la aplicación, sino que muchas veces integra otras opciones como los favoritos, buscador, accesos directos en forma de rejilla, y prácticamente lo que queramos incluir ya que es un layout como otro cualquiera. Al final Google ha decidido integrarlo como un patrón de interfaz más en su guía de estilo aunque no ofrece ningún componente (aún) para implementarlo.

Cyril Mottier lo integró magistralmente en su aplicación Prixing y en su blog nos explica cómo lo hizo a un nivel teórico, y ha sido Jeremy Feinstein el que ha creado la librería de menú lateral más usada y es la que la voy a explicar aquí.

Lo primero es descargarnos la librería SlidingMenu de github (es algo genial tener todas estas estupendas librerías completamente libres) .

Enlazamos la librería a nuestro proyecto en las propiedades del proyecto > android > Add library.

Luego, tenemos tres formas de añadir un menú lateral, una es heredando de la clase SlidingActivity de la librería en vez de la clase Activity u otra, de esta manera tendremos los métodos del menú integrados en la actividad. Si usamos ActionBarSherlock no podremos cambiar la actividad de la que heredamos, pero podemos irnos a la clase SlidingActivity (o SlidingFragmentActivity si usamos fragments) de la librería y hacer que herede de SherlockActivity (o de SherlockFragmentActivity). Para esto tendremos que enlazar tambien la librería ActionBarSherlock a la librería SlidingMenu.

Otra forma de integrar un menú lateral es via layout, añadiendo a nuestro layout una view y configurar los atributos de nuestro menú y añadir ahí las vistas que queramos en nuestro menú lateral. Este método ofrece algunas posibilidades extra como por ejemplo, añadir un menú lateral a una fila de una lista (¡esto lo hacer ver muy bien!). Además de esta forma podemos indicar en los archivos de recursos algunas dimensiones dependiendo de la orientación de la pantalla o la densidad de ésta. Estas dimensiones pueden ser el margen que queda visible, tamaño de la sombra, etc. Un ejemplo sería:

<com.slidingmenu.lib.SlidingMenu
    xmlns:sliding="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingmenulayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    sliding:viewAbove="@layout/YOUR_ABOVE_VIEW"
    sliding:viewBehind="@layout/YOUR_BEHIND_BEHIND"
    sliding:touchModeAbove="margin|fullscreen"
    sliding:behindOffset="@dimen/YOUR_OFFSET"
    sliding:behindWidth="@dimen/YOUR_WIDTH"
    sliding:behindScrollScale="@dimen/YOUR_SCALE"
    sliding:shadowDrawable="@drawable/YOUR_SHADOW"
    sliding:shadowWidth="@dimen/YOUR_SHADOW_WIDTH"
    sliding:fadeEnabled="true|false"
    sliding:fadeDegree="float"
    sliding:selectorEnabled="true|false"
    sliding:selectorDrawable="@drawable/YOUR_SELECTOR" />

La tercera forma es crear el menú desde código instanciándolo con el constructor, inicializar todas las propiedades de presentación y añadirlo a la activity, de forma que lo podemos incorporar dinámicamente a cualquier actividad o incluso añadir distintos menús en función de otros parámetros (por ejemplo si el usuario está logueado o no).

Además la propia librería nos permite decidir si queremos desplazar la ActionBar al abrir el menú o solo el contenido debajo de ésta, para eso podemos indicar en el parámetro flag del método attachToActivity como SlidingMenu.SLIDING_WINDOW si queremos deslizar todo o SlidingMenu.SLIDING_CONTENT si queremos sólo el contenido.

Por ejemplo:

public class SlidingExample extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTitle(R.string.attach);
        // set the content view
        setContentView(R.layout.content);
        // configure the SlidingMenu
        SlidingMenu menu = new SlidingMenu(this);
        menu.setMode(SlidingMenu.LEFT);
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        menu.setShadowWidthRes(R.dimen.shadow_width);
        menu.setShadowDrawable(R.drawable.shadow);
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        menu.setFadeDegree(0.35f);
        menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        menu.setMenu(R.layout.menu);
    }
}

 

Para saber qué son todas las propiedades lo mejor es irse a la página de la documentación.

Otra ventaja que tenemos es que podemos cargar un fragment en el menú lateral, por ejemplo un ListFragment, para esto podemos declararlo en el layout de la vista que está detrás de la pantalla principal o incluso declarar sólo un FrameLayout y añadir dentro el fragment dinámicamente o sustituirlo por el fragment una vez instanciado mediante el FragmentManager, por ejemplo:

//Set the front and behind content views
setContentView(R.layout.activity_main);
setBehindContentView(R.layout.behind_list_layout);

//Create the shop list fragment and replace the framelayout set in the behind view
mMyListFragment = new MyListFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.framestub, mMyListFragment).commit();

 

Warning!

Si necesitamos tener la librería de soporte de android en varios proyectos (por ejemplo en ActionBarSherlock, en SlidingMenu y en nuestra app, recordar que debentener el mismo android-support-v4.jar o les dará un error por ser versiones diferentes).

 

Si quieren ver un ejemplo en funcionamiento, pueden descargar la aplicación de ejemplo desde Google Play

 

unnamed

 

¡Así de fácil! Espero que os haya gustado.

Seguramente también te interesará...

1 comentario

  1. chucherm

    Gracias por la información, cuando agrego la libreria a eclipse me marca un error en la clase SlidingMapActivity sobre MapActivity y con la librería de import com.google.android.maps.MapActivity;

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *