No es un bug, es una característica no documentada

domingo, 18 de octubre de 2015

Programación multimedia. Botones personalizados

Vamos a ver cómo se pueden personalizar los botones de nuestra aplicación, pero no modificando bordes del botón, tamaño y demás, estoy hablando de crear botones a partir de imágenes que consigan sensación de movimiento al realizar determinada acción. Veamos cómo.

Sobre un nuevo proyecto, creamos el fichero boton.xml en el directorio res/drawable y escribimos el siguiente código:


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), el tercero la imagen en estado normal.

El orden de los <ítem> es importante. Cuando se va a dibujar se recorrer los ítems en orden hasta que se cumpla una condición. Debido a que “botonnormal” es el último, sólo se aplica cuando las condiciones state_pressed y state_focused no se cumplen.

Las imágenes usadas para crear el botón son las siguientes


botonnormal.png


botonpulsado.png


botonconfoco.png

Al escribir el código así de primeras saldrá error al escribir la ruta de las imágenes. Eso se arrastra agregándolas a la carpeta res/drawable del proyecto.

Ahora en el diseño del Layout eliminamos el TextView existente (como siempre) y especificamos que el RelativeLayout tenga la propiedad Background blanca (#FFFFFF en hexadecimal).


Dentro del RelativeLayout arrastramos un Button y le indicamos que su propiedad Background sea Drawable/boton. Esa opción la encontraremos entrando en el selector de recursos (los puntos suspensivos)


Modificamos el atributo Text para que no tenga ningún valor


Ve al fichero con las funciones programables java e introduce al final, antes de la última llave, el siguiente código


Vuelve al diseño del Layout y modifica la propiedad onClick dándole el valor sePulsa.


Y al ejecutar el programa podremos ver cómo se comporta nuestro botón, animándose y mostrando un mensaje cuando es pulsado.

0 comentarios:

Publicar un comentario