Slide Menu Pattern
Desde que Facebook lo incluyera en su app(creo que fue la primera) este patrón de diseño, que incluye un menu oculto en uno de los laterales al cual se accede normalmente a través del icono de la app del ActionBar, un icono de menú o deslizando el dedo sobre el contenido, se ha expandido como la pólvora por sus características:
Fácil
Una vez conocido por el usuario es muy natural. El proceso de aprendizaje por parte del usuario es muy rápido, el icono de menú se está volviendo como icono de facto y la animación de mostrar el menú de forma deslizante hace que el usuario interiorize rápidamente el concepto.
Polivalente
Si lo comparamos con otros gestores como las tabs o el uso del menú nativo de android, un menú lateral nos permite introducir mucho más elemento al poder generar un layout completo a nuestro antojo
Contexto
El usuario no pierde el contexto de la acción por consultar el menú, en aquellas aplicaciones que introducen un Activity previo al contenido donde nos muestra el menú si el usuario accede al menú normalemente pierde completamente la referencia donde estaba anteriormente
Contenido
Al no ocupar ningún espacio, toda la pantalla puede ir destinada al contenido, aunque parezca una tontería es agradecido por parte del desarrollador, pues si queremos añadir tabs(ya sean superiores o inferiores) esto suele acabar “ensuciando” los XML incrementado la complejidad de estos.
Si quieres obtener más información relacionada con este patrón puedes pasarte por androiduipatterns
Experiencia Previa y Librería SlidingMenu
Por exigencias de diseño he realizado el desarrollo de algún SlideMenu, usando para este objetivo el elemento ViewPager que gracias a la librería de soporte está accesible en cantidad de versiones.
Recientemente a través de +AndroCode (SlidingMenu), he encontrado la librería “SlidingMenu” de jfeinstein10 que me parece realmente fascinante.
Para ver el potencial de la app tan sólo hace falta descargarse la aplicación de muestra que tiene el desarrollador en Google Play.
Grandes compañias han confiado en la librería, dándonos un paseo por las issues y sus resoluciones como al número de pull requests que está recibiendo el proyecto nos confirma que hay una gran comunidad usando/mejorando la librería. Todo este movimiento personalmente me aporta una confianza extra.
Integrar Librería en nuestro proyecto
Vamos a ver como integrar esta librería en nuestros proyectos. La verdad es que los pasos que nos indica en el repositorio son escuetos para aquellas personas que no tengan conocimientos muy concretos en el tema, de hecho más de uno pregunta por stackoverflow, foros o incluso en el mismo repositorio de github.
Por esto me he decidido a crear un pequeño screencast con los pasos necesarios integrar la librería a nuestro proyecto y ver el ejemplo más básico que se puede realizar.
Opciones de Integración
Si visualizas el vídeo te darás cuenta que he hecho uso de la clase SlidingActivity a la que aparte de añadir el setContentView tenemos que añadir otro método que es setBehindContentView que hace referencia a la parte del menú.
Además de la clase SlidingActivity la librería nos da acceso a un elemento SlidingMenu extiende a un RelativeLayout(SlidingMenu.java), y nos permite acceder tanto desde código como desde xml. Los ejemplos del readme son muy aclaratorios.
Para terminar tomo la palabra del desarrollador con una frase que muestra que ha probado intensamente la librería
This way, you can treat SlidingMenu as you would any other view type and put it in crazy awesome places like in the rows of a ListView.
Poder poner un SlideMenu dentro de una fila de un ListView, sin duda un lugar loquísimo pero nunca sabemos que desarrollos vamos a realizar en el futuro.
Kudos
Desde aquí tan solo agradecer a +Jeremy Feinstein la distribución del código bajo licencia Apache
Links
Github repo [https://github.com/jfeinstein10/SlidingMenu]
Android UI Patterns [http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html]
Android UI Patterns [http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html]
No comments:
Post a Comment