Paint

Como acabamos de ver, la mayoría de los métodos de la clase Canvas utilizan un parámetro de tipo Paint. Esta clase nos permite definir el color, estilo o grosor del trazado de un gráfico vectorial.

Puedes ver algunos aspectos relacionados en formato poli[Media]

 La clase Paint  en Android

Ejercicio paso a paso: Uso de la clase Paint

1.     Escribe dentro de OnDraw del ejercicio anterior el código siguiente:

Paint pincel = new Paint();
pincel.setColor(Color.BLUE);
pincel.setStrokeWidth(8);
pincel.setStyle(Style.STROKE);
canvas.drawCircle(150, 150, 100, pincel);

Nota sobre Java: Si pulsas Ctrl-Shift-O para añadir los import el sistema te advertirá que la clase Style está definida en dos paquetes diferentes:

Te preguntará cual de los dos quieres importar. No suele resultar complicado resolver este problema si analizas el contexto en el que estás trabajando. En nuestro caso estamos utilizando la clase Paintpor lo que la primera opción es la adecuada. Si alguna vez te equivocas en esta selección, lo normal es que aparecerán errores en el código. En este caso, deshaces y seleccionas la otra opción.

 

 

2.     Ejecuta la aplicación para ver el resultado.

3.     Aprovechando la opción de autocompletar de Eclipse, prueba otros valores para Color. YStyle.

4.     Prueba otros métodos de dibujo, como drawLine() o drawPoint().

Definición de colores

Android representa los colores utilizando enteros de 32 bits. Estos bits son divididos en 4 campos de 8 bits: alfa, rojo, verde y azul (ARGB, usando las iniciales en inglés). Al estar formado cada componente por 8 bits, podrá tomar 256 valores diferentes.

Los componentes rojo, verde y azul son utilizados para definir el color, mientras que el componente alfa define el grado de transparencia con respecto al fondo. Un valor de 255 significa un color opaco y a medida que vayamos reduciendo el valor el dibujo se irá haciendo transparente.

Para definir un color tenemos las siguientes opciones:

int color;
color = Color.BLUE;                  //Azul opaco
color = Color.argb(127, 0, 255, 0);  //Verde transparente
color = 0x7F00FF00;                  //Verde transparente
color = getResources().getColor(R.color.color_Circulo);

 Para conseguir una adecuada separación entre programación y diseño, se recomienda utilizar la última opción. Es decir, no definir los colores directamente en código, sino utilizar el fichero de recursos res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_circulo">#7fffff00</color>
</resources>

Como puedes observar los colores han de definirse en el fichero colors.xml mediante sus componentes ARGB en hexadecimal.

 

 

Ejercicio paso a paso: Definición de colores

 

1.     Modifica el ejercicio anterior, añadiendo al final de OnDraw el código siguiente:

pincel.setColor(Color.argb(127,255,0,0));
canvas.drawCircle(150, 250, 100, pincel);

2.     Observa como el color rojo seleccionado es mezclado con el color de fondo. Prueba otros valores de alfa.

3.     Reemplaza la primera línea que acabas de introducir por:

pincel.setColor(0x7FFF0000);

4.     Observa como el resultado es idéntico.

5.     Define en el fichero res/values/colors.xml un nuevo color utilizando el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_circulo">#7fffff00</color>
</resources>

6.     Modifica el ejemplo anterior para que se utilice este color definido en los recursos:

pincel.setColor(getResources().getColor(R.color.color_circulo));

{jcomments on}