Si aun no identifican que es ActionDrawer, es la barra deslizable que presenta opciones al usuario en alguno de las puntos finales de la pantalla (generalmente el extremo izquierdo). Google+ nos presenta esta barra con las opciones de fotos, comunidades, etc.
Muy bien manos a la obra, lo primero que aremos es crear un proyecto de Android por defecto. Esto nos debe de crear una actividad principal y un layout para nuestra actividad. Generalmente el nodo raíz de este layout es un LinearLayout o RelativeLayout (o lo que hayamos especificado por defecto), es aquí donde viene el primer cambio. El nodo raíz de nuestro xml ahora sera un "android.support.v4.widget.DrawerLayout"; esta vista es dibujada de la siguiente manera. El primero nodo hijo sera el contenido que sera desplegado en la pantalla y el segundo nodo debe de ser de tipo "ListView" que sera el que desplegara la lista de opciones. En esta aplicacion de prueba nuestro main_layout.xml se vera de la siguiente manera:
Básicamente lo que este layout describe es DrawerLayout con id "main_act_drawer" como principal; este contiene un primer hijo de tipo FrameLayout con id "content_frame" y un segundo nodo de tipo ListView con id "left_drawer". Ya habíamos dicho que el primer nodo dentro de DrawerLayout sera lo que se desplegara en pantalla, en este caso FrameLayout lo vamos a utilizar para desplegar un mensaje por defecto (TextView contenido dentro) y cuando el usuario seleccione algo del menú el contenido sera reemplazado por un fragmento definido.
Nota: Es importante resaltar que layout_height & layout_width de la mayoría de las vistas están definidas con constantes, esto bloquea a AndroidStudio de desplegar una vista previa de la pantalla pero al momento de ejecutar la aplicación esta corre sin ningún problema.
El ListView (left_drawer) lo utilizaremos para desplegar las opciones en nuestro ActionDrawer y por lo tanto necesitamos crear un adaptador que contenga los valores para nuestras opciones. Por lo tanto agregaremos a nuestro archivo strings.xml los siguientes elementos:
El primero es la lista de opciones para nuestro menú el segundo es una lista de colores que definen el valor del color correspondiente en valor hexadecimal. AndroidStudio nos presenta el valor del color en un recuadro en la barra lateral; este es una opción no disponible anteriormente en eclipse ADT y que me parece es un poco cool.
Ahora escribiremos un poco de código para iniciar correctamente nuestras opciones ya que si no el ActionDrawer no sera desplegado en nuestra aplicación por que no contiene ninguna opción. Así que escribimos el siguiente código en nuestra actividad principal.
En simples palabras una vez que establezcamos el layout de nuestra actividad, llamaremos el método prepareActionDrawer para efectivamente iniciar nuestro menú. Lo primero que hacemos es retraer las vistas de nuestro layout con findViewById. Luego creamos un ArrayAdapter utilizando el arreglo que definimos en strings.xml (main_act_drawer_opts) y lo establecemos a nuestra lista. Luego podemos ver que establecemos un nuevo OnItemClickListener en nuestra lista, esta clase sera la encargada de hacer el cambio de fragmentos en nuestra vista contenedora así que revisaremos esta clase con mas detalle luego. Al final de nuestro método creamos un nuevo objeto ActionBarDrawerToggle que estará encargado de abrir y cerrar el action drawer cuando demos clic en el icono de nuestra app (parte superior izquierda). Es por esto que nuestra primera linea en el método es setDisplayHomeAsUpEnabled(true) para que este botón aparezca en nuestra barra.
El ultimo código que agregaremos en nuestra actividad principal sera sobrescribir el método onOptionsItemSelected para que nuestro objeto ActionBarDrawerToggle detecte si una de las opciones del menú ha sido seleccionada y el drawer se cierre. El código se ve de la siguiente manera.
La parte final sera crear la clase encargada de manejar el contenido de nuestra aplicación "DrawerClickListener", esta clase sera la encargada de actualizar el fragmento que desplegara el contenido por cada una de las opciones que el usuario seleccione. Para esto necesitamos fragmentos que serán colocados en nuestro "content_frame"; aquí vamos a hacer uso de una vieja clase PlainColorFragment del proyecto anterior view_pager_test (si no recuerdan este proyecto visiten los posts de Ejemplos con View Pager 1,2, 3 ). El codigo de esta clase se ve como se muestra aqui abajo:
En el constructor de la clase necesitamos 3 referencias, la primera a un FragmentManager que sera el encargado de cambiar los fragmentos en el contenido (proviene del fragment manager de la actividad principal). El segundo es la referencia a nuestro DrawerLayout el cual nos permitirá manipular el layout y el tercero nuestra lista de opciones en el Drawer para poder cerrarla. Ademas de esto creamos la referencia a los valores de los colores que almacenamos en strings.xml utilizando getResources() desde una de nuestras vistas.
Luego de nuestro constructor tenemos el evento importante onItemClick, este es el evento que se ejecuta cada vez que una opción de nuestro ActionDrawer es seleccionada. Lo primero que hacemos es seleccionar el color de nuestro arreglo basado en el valor del indice que nos manda la selección. Luego mandamos cerrar la lista de nuestro drawer con el método closeDrawer de nuestro DrawerLayout para que el usuario vea el cambio en el contenido. Por ultimo utilizaremos nuestra clase PlainColorFragment para crear instancias del fragmento que se desplegara basándonos en el color que se ha seleccionado; iniciamos una nueva transacción en nuestro FragmentManager y reemplazamos el contenido de content_frame, con el fragmento que acabamos de crear y le ponemos el nombre del color que seleccionamos. Al final hacemos commit en la transacción para que sea aceptada.
En los screens que se muestran abajo les muestro como se ve la app ya terminada y como siempre el código esta disponible para el que así lo desee en mi perfil de github. Espero y este articulo les sea de utilidad ya que la mayoría de las aplicaciones ahora están desplegando Drawers como este.
Update: Si quieren descargar la aplicación funcionando desde play store pueden hacerlo con este link. Si lo hacen se los agradecería ya que ayudarían a que continué desarrollando para android.
https://play.google.com/store/apps/details?id=org.blanco.android.actiondrawerexample
Saludos a todos
El ultimo código que agregaremos en nuestra actividad principal sera sobrescribir el método onOptionsItemSelected para que nuestro objeto ActionBarDrawerToggle detecte si una de las opciones del menú ha sido seleccionada y el drawer se cierre. El código se ve de la siguiente manera.
La parte final sera crear la clase encargada de manejar el contenido de nuestra aplicación "DrawerClickListener", esta clase sera la encargada de actualizar el fragmento que desplegara el contenido por cada una de las opciones que el usuario seleccione. Para esto necesitamos fragmentos que serán colocados en nuestro "content_frame"; aquí vamos a hacer uso de una vieja clase PlainColorFragment del proyecto anterior view_pager_test (si no recuerdan este proyecto visiten los posts de Ejemplos con View Pager 1,2, 3 ). El codigo de esta clase se ve como se muestra aqui abajo:
Luego de nuestro constructor tenemos el evento importante onItemClick, este es el evento que se ejecuta cada vez que una opción de nuestro ActionDrawer es seleccionada. Lo primero que hacemos es seleccionar el color de nuestro arreglo basado en el valor del indice que nos manda la selección. Luego mandamos cerrar la lista de nuestro drawer con el método closeDrawer de nuestro DrawerLayout para que el usuario vea el cambio en el contenido. Por ultimo utilizaremos nuestra clase PlainColorFragment para crear instancias del fragmento que se desplegara basándonos en el color que se ha seleccionado; iniciamos una nueva transacción en nuestro FragmentManager y reemplazamos el contenido de content_frame, con el fragmento que acabamos de crear y le ponemos el nombre del color que seleccionamos. Al final hacemos commit en la transacción para que sea aceptada.
En los screens que se muestran abajo les muestro como se ve la app ya terminada y como siempre el código esta disponible para el que así lo desee en mi perfil de github. Espero y este articulo les sea de utilidad ya que la mayoría de las aplicaciones ahora están desplegando Drawers como este.
Update: Si quieren descargar la aplicación funcionando desde play store pueden hacerlo con este link. Si lo hacen se los agradecería ya que ayudarían a que continué desarrollando para android.
https://play.google.com/store/apps/details?id=org.blanco.android.actiondrawerexample
Saludos a todos
|
|
|
|
|
|
|
|
|
No hay comentarios:
Publicar un comentario