Читать книгу El gran libro de Android - Jesus Tomás Gironés - Страница 78

En este apartado vamos a aprender a usar varios tipos de vistas y layouts desde un punto de vista práctico. También empezaremos a escribir código que se ejecutará cuando ocurran ciertos eventos:

Ejercicio: Un botón con gráficos personalizados

1.Crea un nuevo proyecto con los siguientes datos:

Application name: MasVistas

Activity Name: MasVistasActivity

2.Crea la carpeta drawable dentro de la carpeta res. Para ello pulsa con el botón derecho sobre la carpeta res y selecciona New > Folder.

3.Crea el fichero boton.xml en la carpeta res/drawable/. Para ello puedes utilizar el menú File > New > Android XML File e introduce en el campo File: “botón” y en el campo Resource Type selecciona Drawable. Reemplaza el código por el siguiente:

Este XML define un recurso único gráfico (drawable) que cambiará en función del estado del botón. El primer ítem define la imagen usada cuando se pulsa el botón, el segundo ítem define la imagen usada cuando el botón tiene el foco (cuando el botón está seleccionado con la rueda de desplazamiento o las teclas de dirección) y el tercero, la imagen en estado normal. Los gráficos, y en concreto los drawables, se estudiarán en el capítulo 4.

NOTA: el orden de los elementos <item> es importante. Cuando se va a dibujar se recorren los ítems en orden hasta que se cumpla una condición. Debido a que “boton_normal” es el último, solo se aplica cuando las condiciones state_pressed y state_focused no se cumplen.

4.Descarga de http://www.androidcurso.com/index.php/119 las tres imágenes que aparecen a continuación. Para bajar cada imagen, pulsa sobre ella con el botón derecho y selecciona Guardar imagen como… El nombre que ha de tener cada fichero se indica a continuación:

5.Arrastra estas imágenes a la carpeta res/drawable/ del proyecto.

6.Abre el fichero res/layout/activity_main.xml.

7.Elimina el TextView que encontrarás dentro del LinearLayout.

8.Selecciona el LinearLayout e introduce en el atributo Background el valor #FFFFFF.

9.Arrastra una vista de tipo Button dentro del LinearLayout.

10. Selecciona el atributo Background y pulsa el botón selector de recurso (con puntos suspensivos). Selecciona Drawable/boton.

11. Modifica el atributo Text para que no tenga ningún valor.

12. Introduce en el atributo onClick el valor sePulsa.

A continuación se muestra el código resultante para activity_main.xml:

13. Abre el fichero MasVistasActivity.java e introduce al final, pero antes de la última llave, el código:

NOTA: pulsa Ctrl-Shift-O para que se añadan automáticamente los paquetes que faltan en la sección import.

El método anterior se ejecutará cuando se pulse el botón. A este tipo de métodos se los conoce como escuchadores de eventos (listeners). Este método se limita a lanzar un toast, es decir, un aviso que permanece cierto tiempo sobre la pantalla y luego desaparece. Los tres parámetros son: el contexto utilizado, que coincide con la actividad, el texto a mostrar y el tiempo que permanecerá este texto. Los conceptos de actividad y contexto se desarrollarán en el siguiente capítulo.

14. Ejecuta el proyecto y verifica el resultado.