Advertisement
  1. Code
  2. Android SDK

SDK de Android: dibujo con rellenos de patrón

Scroll to top
Read Time: 10 min

Spanish (Español) translation by Juliana Carvajal (you can also view the original English article)

Este tutorial demuestra cómo mejorar una aplicación de dibujo permitiendo al usuario pintar con patrones de relleno en lugar de colores sólidos. ¡Sigue leyendo!

La interacción de la pantalla táctil en muchos dispositivos Android hace que la plataforma sea adecuada para aplicaciones de dibujo. En una serie reciente, creamos una aplicación de dibujo básica para Android, en la que el usuario puede elegir entre una paleta de colores y dibujar en un lienzo con el dedo. En este tutorial, ampliaremos lo que cubrimos usando patrones de relleno en lugar de colores sólidos. No es necesario que completes la serie de aplicaciones de dibujo antes de intentar este tutorial, pero si lo hiciste, puedes usarlo para mejorar la aplicación que creaste anteriormente.

Aquí hay una vista previa de la aplicación de dibujo de patrones que crearemos en este tutorial:

Drawing With PatternsDrawing With PatternsDrawing With Patterns

El tutorial te guiará a través del proceso de creación de una aplicación independiente, pero también incluirá sugerencias para usar el código para mejorar la aplicación que creamos en la serie. La carpeta de descarga del código fuente incluye tanto la aplicación que creamos en este tutorial como la versión mejorada de la aplicación de dibujo general que creamos en la serie. Aquí hay una vista previa de la aplicación existente mejorada con la funcionalidad de dibujo de patrones:

Drawing With PatternsDrawing With PatternsDrawing With Patterns

1. Crea o amplía una aplicación

Paso 1

Aunque puedes completar este tutorial sin haber trabajado con la serie de aplicaciones de dibujo, pasaremos por alto algunos de los detalles de las funciones de dibujo que se trataron más a fondo allí. Incluiremos instrucciones completas para usar el código en una nueva aplicación e indicaremos cómo podrías usarlo para mejorar la aplicación de dibujo existente. Si ya tienes la aplicación que creamos en la serie, puedes saltar directamente a la parte 2, paso 1 del tutorial ahora.

Si estás iniciando una nueva aplicación para este tutorial, crea una en Eclipse ahora, eligiendo un nivel de API mínimo de 14 y otras configuraciones de tu elección. Deja que Eclipse cree una actividad y un diseño en blanco para la aplicación. Usaremos gran parte del mismo código que usamos en la serie de aplicaciones de dibujo, por lo que para obtener más información sobre la funcionalidad, consulta los tres tutoriales que contiene.

Agrega una nueva clase a la aplicación para una Vista personalizada en la que se llevará a cabo el dibujo, nombra la clase "DrawingView" y amplía la declaración de apertura de la siguiente manera:

Necesitarás las siguientes declaraciones de importación en la clase:

Agrega las siguientes variables de instancia a la clase:

Dale a la clase un método constructor en el que llamamos a un método auxiliar que agregaremos a continuación:

Agrega el método auxiliar ahora:

El método prepara la clase para dibujar. Anula el método para cuando a la vista se le asigne un tamaño a continuación:

Ahora anula el método onDraw para mostrar la imagen que está dibujando el usuario:

Finalmente, agrega el siguiente método para implementar el dibujo del usuario a través del toque en la Vista:

Paso 2

Ahora mostremos la Vista personalizada en la interfaz de usuario de la aplicación. Abre tu archivo de diseño principal e incluye el siguiente esquema:

Dentro del diseño lineal, agrega una instancia de la clase de vista personalizada que creaste, utilizando el prefijo del paquete para tu propia aplicación:

Queremos que el área del lienzo llene el espacio aparte de los botones de la paleta que agregaremos a continuación.


2. Botones de patrón

Paso 1

Vamos a utilizar 8 rellenos de patrón; puedes utilizar las siguientes imágenes o crear las tuyas propias si lo prefieres. Guárdalos en la(s) carpeta(s) de diseño de tu proyecto; se incluyen en la carpeta de descarga del código fuente. Usaremos los nombres de los archivos para hacer referencia a las imágenes en el código de la aplicación.

Pattern
Pattern
Pattern
Pattern
Pattern
Pattern
Pattern
Pattern

Puedes usar tus propias imágenes de patrón si lo deseas, siempre que cada una contenga una imagen de mapa de bits en mosaico. Usaremos las imágenes en los botones de patrón en la interfaz de usuario, así como en las funciones de dibujo mismas. Los mostramos en los botones para que el usuario pueda ver cómo se ve cada patrón antes de elegir uno.

Paso 2

Agreguemos ahora una paleta a nuestra interfaz de usuario para los botones de patrón. Abre tu archivo de diseño. Si estás trabajando con la aplicación que creamos en la serie, puedes agregar nuevos botones al área de la paleta para los patrones; consulta la sugerencia a continuación y consulta la descarga del código fuente para obtener un ejemplo completo de la aplicación existente con la nueva funcionalidad agregada . Para la nueva aplicación, agrega lo siguiente después del elemento de vista personalizado que agregaste:

Enumeraremos cuatro botones en cada fila. Agrega los primeros cuatro dentro del Diseño lineal para la fila superior:

Agrega los siguientes cuatro dentro del Diseño lineal para la fila inferior:

Sugerencia: Para la aplicación que creamos en la serie, modifica este código para usar las mismas estructuras de botones de imagen que tus botones de color, pero con el patrón que se muestra como dibujable en lugar de un color y el nombre del patrón como atributo de etiqueta como en el código anterior. Puedes reemplazar algunos de tus botones de color con botones de patrón o simplemente agregar algunos junto con los botones de color. Si estás agregando muchos botones a la aplicación, es posible que debas reducir los tamaños para que quepan perfectamente en una variedad de pantallas.

Cada botón de imagen especifica un método para llamar a los clics del usuario; este método podrá acceder al nombre del patrón de un botón en el que se hizo clic desde su atributo de etiqueta.


3. Rellenos de patrón

Paso 1

Sugerencia: puedes mantener la clase de actividad principal como está si completaste la serie, los únicos cambios que deberás realizar son en la clase de vista personalizada, como verás a continuación.

Ahora podemos implementar usando los rellenos de patrón. En la clase de actividad principal de tu aplicación, agrega la siguiente importación:

Antes del método onCreate, agrega la siguiente variable de instancia para la clase de vista personalizada:

En onCreate, crea una instancia de esto con una referencia a la instancia de Vista personalizada que agregamos al diseño:

A continuación, agrega el método que enumeramos como atributo onClick para los botones de patrón:

Dentro del método, recupera la etiqueta del botón de imagen del patrón en el que se hizo clic:

Necesitamos la Vista personalizada para establecer el relleno del patrón según la selección del usuario. En tu clase "DrawingView", agrega el siguiente método (ve la sugerencia a continuación si estás mejorando la aplicación de dibujo existente para una alternativa a agregar este método):

Dentro del método, primero invalida la Vista:

Vamos a utilizar el nombre del patrón que se puede dibujar para llevarlo a la clase de pintura como mapa de bits. Obten una referencia al ID de recurso para la cadena de patrón pasada:

Modifica el nombre del paquete para adaptarlo al tuyo. A continuación, en el método, decodifica el recurso como un mapa de bits, pasando el valor de ID recuperado:

En lugar de dibujar directamente con el mapa de bits, dibujaremos en un color sólido y usaremos el mapa de bits como sombreador. Crea un objeto Shader utilizando el mapa de bits del patrón decodificado:

Queremos que el patrón se repita en toda el área que el usuario dibuja con él. Establece el color en blanco sólido y el Shader para usar el patrón:

Esto creará la impresión de que el usuario está dibujando con el patrón como pintura, al igual que con un color sólido. No importa el tamaño de la imagen dibujable del patrón, siempre que se pueda enlosar, se repetirá sin problemas en todo el lienzo donde el usuario elija dibujar con ella.

De vuelta en el método principal de actividad paintClicked, ahora puedes llamar al nuevo método con el patrón String recuperado de la etiqueta del botón:

El usuario podrá tocar cualquier patrón que desee usar en el área de la paleta y esto se reflejará cuando dibuje en el lienzo. Para un comportamiento más avanzado en los botones de la paleta, consulta la serie de aplicaciones de dibujo si aún no la has completado.

Sugerencia: si estás mejorando la aplicación de dibujo existente, puedes continuar usando el método setColor de tu actividad principal, alterando el contenido del método en la clase "DrawingView" para usar el procesamiento anterior si la cadena de color pasada no comienza con el carácter "#", utilizando el procesamiento existente si lo haces. Si el usuario ha elegido un color en lugar de un patrón, también debes establecer el Shader en el objeto Paint de nuevo en nulo; consulta el código fuente para obtener más detalles.

Deberías poder ejecutar la aplicación y probar la funcionalidad de dibujo de patrones ahora. Al seleccionar un patrón tocando los botones de la paleta, luego tocando el área del lienzo con el dedo y arrastrando por la pantalla, se dibujará con el patrón elegido como lo hace con un color sólido.


Conclusión

En este tutorial hemos demostrado cómo implementar funciones de dibujo usando patrones en lugar de colores en tus aplicaciones de Android. Usar un relleno de patrón es solo ligeramente diferente a usar un color sólido, pero requiere un poco más de procesamiento como has visto. Recuerda consultar la descarga del código fuente para obtener más información si has estado trabajando en la aplicación que creamos en la serie de aplicaciones de dibujo. Hay muchas otras opciones que puedes explorar en las aplicaciones de dibujo, incluida la opacidad, que veremos en un próximo tutorial. También veremos la interacción que no proviene de una pantalla táctil. Mientras tanto, ve si puedes mejorar tus aplicaciones de dibujo de otras formas.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.