1 Menú lateral. 3.- Estas imágenes deber ser copiadas y pegadas en la carpeta drawable del proyecto

Transcripción

1 1 Menú lateral Antes que nada se debe crear un proyecto, en este ejemplo se llama KaaxTik. 1.- Comencemos por el build.gradle(module:app) y agregamos las dependencias, las versiones dependerá de las que tengas instaladas en Tu SDK, en este ejemplo estoy trabajando con la versión 24 del sdk. Este valor numérico es el mismo que debes colocar en estas otras dos dependencias Nos permitirá crea imágenes circulares, para el ícono del menú principal Después de agregar las dependencias debes sincronizar. 2.- Se deben tener listas las imágenes que vamos a utilizar en el proyecto, en este ejemplo yo voy a usar las siguientes, no tienen que ser de esas mismas dimensiones las que vayas a utilizar. 100x70 - PNG 240x175 - JPG 24x24 - PNG 3.- Estas imágenes deber ser copiadas y pegadas en la carpeta drawable del proyecto 4.- Abrimos el archivo de recursos styles.xml para eliminar el toolbar que traen los activities, por defecto, para poder agregar uno personalizado creado por nosotros mismos, modificando el código como se muestra: Modificar este atributo 5.- Abrimos el archivo de recursos colors.xml y creamos un color para usarlo como color de fondo de nuestros toolsbars, en este ejemplo agregaré el color rojo, pero puede ser cualquier otro color que desees, basta con que coloques el valor hexadecimal adecuado. Aurelio López Ovando 1

2 Agregar esta línea con el color hexadecimal que desees. 6.- Crear dos archivos XML en la carperta layout (Click derecho sobre la carpeta layout -> New -> XML -> Layout Xml File). Uno lo llamaremos tool_bar y el otro se llamará header_menu. 7.- Creamos el código del tool_bar.xml con el siguiente código Hacemos que este layout no se comporte como un layout, sino un widget, lo cual nos favorece para ser manipulado como Toolbar personalizado Color creado en el paso Creamos el código del header_menu.xml con el siguiente código. Es una de las imágenes que subimos Hace el efecto de ícono redondo en el encabezado del menú Otra de las imágenes que subimos Aurelio López Ovando 2

3 9.- Creamos la carpeta de recursos menú, es la carpeta donde almacenaremos el menú que vamos a ocupar (si ocuparamos mas menús ahí debemos colocarlos). (Click derecho sobre la carpeta res -> New -> Android resource directory) Debemos configurarlo como se muestra en la figura de abajo: Seleccionamos el tipo de recurso que queremos, en este caso desplegamos la lista y seleccionamos la opción menú, esto cambiará en automático la propiedad Directory name, si no cambia, hay que cambiarla manualmente Al finalizar presionamos el botón OK y nos debe aparecer una nueva carpeta dentro de res con el nombre menu Creamos el menú con sus respectivas opciones. Clic derecho sobre la carpeta menu -> New -> Menu resource file Lo llamaremos menú_principal, todo minúsculas y sin espacios en blanco, y presionamos OK. Una vez creado el archivo, lo abrimos y lo modificamos con el siguiente código. Aurelio López Ovando 3

4 11.- Después de haber creado todos los recursos que necesitamos, ahora si ya podemos ir al XML del layout principal y dar formato tanto a la pantalla principal, como al menú. El context está determinado por el nombre que le hayas puesto al controlador, en este caso se llama Principal.java Sustituimos los layouts que siempre hemos usado, por un widget, para que nos permita interactuar con un menú desplegable Invocamos el tool_bar creado en el paso 6 El framelayout se encargará de mostrar la pantalla principal del a aplicación a través del uso de Fragments. Este es el menú lateral deslizable de izquierda a derecha Invocamos el archivo header_menu creado en el paso 6 Aurelio López Ovando 4

5 Ya en este momento podemos corres nuestra app y lo que veremos será una pantalla vacía, pero si desplazamos el dedo desde la parte izquierda de la pantalla y son soltar arrastramos hacia la derecha, veremos algo como esto: 12.- Antes de meternos a java, primero vamos a crear dos strings que utilizaremos como bandera de estado para saber si abrimos o cerramos el menú, abrimos el archivo de recursos strings.xml y agregamos las siguientes líneas Ahora si abrimos el controlador de java, en mi caso se llama Principal.java y comenzamos con el código. Comenzamos declarando estas tres variables que nos permitirán controlar el menú por medio de un ícono, el cual al pulsarlo se mostrará el menú. Agregamos esta línea invocando un método que vamos a crear a continuación, debajo del oncreate Aurelio López Ovando 5

6 Este es ek mpetodo que invocamos hace un momento Detectamos que opción del menú se ha pulsado, en cuyo caso senos mostrará un mensaje Toast. Aurelio López Ovando 6

7 Ahora ya podemos corres la App y ya no tenemos la necesidad de deslizar el dedo sobre la pantalla, porque ahora se nos muestra un ícono que al pulsarlo activa el menú. 2.- Pantalla principal Es momento de crear la pantalla principal, pero no utilizaremos activities, sino fragments. En esta pantalla principal un listado que mostrará las categoría de lugares que podremos consultar en nuestra App 1.- Crear dos XML de la misma manera como se hizo en el paso 6 (de la primera parte) y los llamaremos fragment_principal y row. 2.- Las nuevas imágenes que vamos a agregar a esta parte del proyecto las siguientes, para que practiques puedes buscar algunas similares, deben ser copiadas en la carpeta drawable del proyecto. Son 19 imágenes de 24x24 formato PNG con fondo trasparente, son las imágenes que usaremos en la lista de lugares con los que cuenta la App Aurelio López Ovando 7

8 3.- Diseñamos el archivo row.xml con el siguiente código: 4.- Ahora diseñamos el archivo fragment_principal.xml con el siguiente código: 5.- Lo que sigue es crear el controlado del fragment que hemos creado, al crear el xml no se nos creó el java de manera automática, eso lo debemos crear nosotros manualmente (clic derecho sobre la carpeta java -> New -> Java Class) El nombre que le pondremos será Principal_Frag. Aurelio López Ovando 8

9 Una vez creado el archivo, nos vamos al código y le decimos que herede de la clase Fragmen, ojo, en este caso puede darse una confusión, debemos elegir el fragment de (Android.App) porque es la versión más nueva. Para no tener problema nos hacemos un espacio dando enter Debemos crear un método abstracto, para eso damos clic derecho y escogemos Generate en la ventana que sigue escogemos Override Methods y buscamos en la lista que nos aparece uno que se llama oncreateview como se muestra en la figura: Y modificamos el código que quede de la siguiente manera 6.- Con lo anterior ya podemos visualizar el fragmente en el activity principal, antes de seguir recordemos que en el paso 11 creamos un FrameLayout en el principal.xml al que llamamos frame, este frame es el que se encargará de visualizar los fragments creados. Aurelio López Ovando 9

10 Regresemos al Principal.java y hacemos lo siguiente: 7.- Creamos una nueva clase (como lo hicimos en el paso 5) a la que llamaremos Row. 8.- Ahora programamos la clase anteriormente creada con el siguiente código: Aurelio López Ovando 10

11 9.- Para poder crear la lista necesitamos un adaptador, asi que ahora creamos otra clase a la que llamaremos AdapterList. Y lo programamos con el siguiente código: Hacemos que herede de la clase BaseAdapter Hacemos clic en el foco rojo que nos aparece y seleccionamos Implements methods. Vemos que estén marcados los métodos y pulsamos OK Después de esto ya tenemos un código base para poder iniciar Aurelio López Ovando 11

12 10.- En base el código anterior, ya podemos finalizar el código completo del archivo que estamos trabajando, debe quedar como se muestra: Creamos una clase auxiliar Declaramos nuestras variables Creamos un ArrayList que llenará la lista que deseamos Sirve para filtrar la lista mediante un buscador Estos son los Overrides que ya estaban creados desde el paso anterior Aurelio López Ovando 12

13 11.- Ahora ya podemos programar el fragment principal para crear la lista con el siguiente código: Implementemos el método que se muestra con la flecha. Dar clic en este foquito e implementar los métodos 12.- Con esto también tenemos un código base, lo complementamos como se muestra en el código a continuación: Aurelio López Ovando 13

14 Aurelio López Ovando 14

15 13.- Ya podemos correr el programa y tendremos algo como esto: Tenemos un buscador que filtra la lista Tenemos una lista Aurelio López Ovando 15