Ejemplo aplicación pintar

Hoy vamos a hacer una de esas aplicaciones más típicas con AppInventor, que nos permiten sacar mucho jugo de esta herramienta cuando estamos aprendiendo a usarla. Y es que, aunque pueda parecer que es una aplicación muy compleja, vais a ver que haciéndola paso a paso es bastante fácil.

Nuestro objetivo final va a ser hacer una aplicación que nos permita tomar una foto, y pintar sobre ella con distintos colores. Una vez terminado, la guardaremos en la galería.
Aun así, planteamos el desarrollo de esta aplicación a modo de ejercicio, en el que queremos ir pasito a pasito, planteando desde el principio una aplicación 100% funcional, que irá completando varias mejoras.



Empezamos con la descripción general:

• Nivel de dificultad: *** (¡bastante fácil!)
• Utilizamos:
• Cámara
• Botones
• Canvas

Ejemplo de aplicación: pintar

Desarrollo de la Aplicación 1: Pintar

Vamos a comenzar desarrollando una aplicación que tenga un lienzo sobre el que pueda pintar, y un botón de salir. De este modo tendré una primera aplicación 100% funcional.

Vamos allá: Comienzo poniendo un "Label" con el título de la aplicación.
Añado un botón para salir de la aplicación. EN mi caso lo he llamado "BSalir".
Añado un "Canvas" o lienzo, que será la superficie sobre la que el usuario podrá pintar.

Al poner el canvas, me fijo en las propiedades del mismo, y le pongo que la anchura y altura sean "Fill parent" para que ocupen la pantalla completa.

Y vamos con los bloques:

• Cuando pulse el botón de salir, que cierre la aplicación.
• Cuando arrastre el dedo por el canvas, que pinte una línea que tendrá como origen la posición (x,y) que tenía previamente y como final la posición actual. De este modo me irá pintando como una sucesión de pequeñísimas líneas juntas una detrás de otra.

¡Y ya está!. Ya tenemos una aplicación terminada que funciona ¿la pruebas para ver cómo funciona?.

Desarrollo de la aplicación 2: Pintar sobre una foto tomada con la cámara

Ahora que ya tenemos una aplicación terminada, es el momento de complicarla un poquito para añadir más funcionalidades. Vamos a permitir que el usuario saque una foto con la cámara, y así podremos pintar sobre la foto ¿te atreves?.

Añadimos a nuestra aplicación otro botón más (lo llamo BSacaFoto) y el componente no visible Camara.

Ahora vamos a configurar los bloques de la aplicación:

• Cuando hago clic en el botón de sacar foto, llamo a la cámara.
• Cuando termina de sacar la foto, la pongo de fondo de mi lienzo.

¡Ya está! ¿a que ha sido sencillo?. Prueba la aplicación y verás qué chula está quedando.

Desarrollo de la aplicación 3: Escoger el color

Vamos a seguir mejorando nuestra aplicación. En este caso vamos a añadir varios botones para poder seleccionar el color con el que queremos pintar.

Añadimos varios botones, con los nombres de los colores que queramos.

Si quieres que un botón tenga un color de fondo determinado deberás seleccionarlo en las propiedades del mismo:

Y ahora añadimos la funcionalidad en los bloques:

• Cuando el usuario haga clic en el botón amarillo, que el color con el que pintamos sobre el lienzo sea amarillo, ...

Desarrollo de la aplicación 4: Guardar la imagen en la tarjeta SD

Y ya para terminar ¿te atreves con algo más?. ¿Y si guardamos nuestras bonitas obras de arte en la tarjeta SD de nuestro teléfono una vez que hayamos terminado de pintar?.

Vamos a hacer la opción más sencilla, para ello necesitamos añadir a nuestra aplicación:

• Un botón con el texto "Guardar", yo lo he llamado BGuardar.
• Un Notifier, que usaremos como alerta, para mostrar por pantalla el lugar donde se ha guardado nuestra imagen o, si diera error al guardar, que nos saque el error.

IMPORTANTE: en algunos teléfonos las imágenes que guardamos desde nuestras aplicaciones con este método no aparecen inmediatamente en la galería, y no las podemos ver desde la aplicación de galería. Una vez que reiniciamos el teléfono (o que desmontamos y volvemos a montar la tarjeta SD) aparecerán todas tus imágenes en la galería (estaban allí, pero la aplicación de galería no se había dado cuenta).

Bueno, a lo que vamos pues. Vamos a guardar la imagen de la forma más sencilla posible (existe la opción de usar TinyDB, o File para hacer esto mismo, pero es un pelín más complejo).

La pantalla, con nuestro nuevo botón y nuestro Notifier nos queda así:

Y ahora vamos con los bloques:

• Cuando haga clic en el botón de guardar, que se guarde la imagen del Canvas.

¡¡¡Ya está!!!. Ahora sí que hemos terminado.

¿Has probado a hacer esta aplicación? ¿cómo la mejorarías?. Dínoslo en los comentarios.