Cuando se desarrollan aplicaciones para Android hay una herramienta un poco desconocida para dibujar o manipular imágenes llamada Canvas. Seguramente sea porque hay poca documentación oficial, y si no se tienen muy claros unos conceptos se hace relativamente fácil que surjan errores en nuestra app. Desde Slashmobility, queremos hacer un repaso a cómo utilizar el Canvas: desde las cosas más básicas, como dibujar líneas, hasta animaciones más complejas. ¡Vamos a por ello!
Empecemos por el principio ¿Qué es un Canvas? Se puede definir como un objeto que sirve para crear un Bitmap (una imagen) a base de funciones básicas de dibujo, como puede ser dibujar un rectángulo, un texto u otro Bitmap para pegar otra imágen. Lo que hace Canvas es coger todas estas órdenes y crear una imagen para que la podamos usar en nuestra aplicación. Otra forma de definirlo más análogamente sería con la traducción del inglés (lienzo), es decir, un objeto que podemos pintar lo que queramos y el resultado es el dibujo completo que queríamos hacer.
Volviendo al mundo mobile, hay que tener en cuenta que la memoria en los dispositivos móviles es limitada y las imágenes en general ocupan bastante espacio. Por ello, hay que tener en cuenta dos cosas:
- Mantener cargadas sólo aquellas imágenes que estamos usando
- Utilizar el tamaño óptimo: es decir, si tenemos una imagen que en la pantalla tiene que mostrarse más pequeña de lo que en realidad es, hay que hacerla pequeña al cargarla para que no ocupe tanta memoria.
La potencia real de Canvas viene cuando Android nos permite modificar sus vistas (TextView, EditText, ImageView, FrameLayout, etc.) como si se tratasen de imágenes. Gracias a esto, podemos crear efectos que mejoran significativamente el look&feel de la aplicación. No sólo podemos aplicar transformaciones básicas como rotación, sino también más complejas: como un efecto de perspectiva mediante el objeto Camera o aplicar filtros para hacer un desenfoque (BlurMaskFilter) o poner gradientes en nuestra vista (RadialGradient). Al hacer este tipo de transformaciones es improtante que tengamos en cuenta el orden. Dado que el punto de referencia es siempre la esquina superior izquierda si primero rotamos nuestra Canvas 30º y luego la movemos a la derecha el resultado será distinto de si lo hacemos al revés.
Lo mejor de Canvas llega cuando se pueden hacer animaciones. Así, podemos hacer tanto efectos básicos como un icono girando para indicar al usuario que se está cargando el contenido, como complejas transiciones entre vistas con un efecto acordeón, un efecto de pasar página en 3D o lo que necesitemos. Pero ¿Qué es una animación? Hay que entender la animación como un estado desde donde empezamos hacia otro estado donde queremos ir y el progreso de un estado a otro, es decir, cómo se realizará el cambio. De este modo, si controlamos el tiempo, podemos saber en todo momento en qué parte de la animación nos encontramos (si la animación queremos que dure 3 segundos y ha pasado 1 segundo, estaremos a ⅓ de la animación). Se le puede pedir al sistema Android que queremos pintar otra vez llamando a invalidate() en el mismo método donde se dibuja, onDraw(). Por otro lado, si se usan Interpolators las animaciones quedan mucho más naturales, pues las transiciones aparecen con aceleraciones, desaceleraciones y rebotes (elasticidad). Lo que hay que tener muy presente es que cuando se hacen animaciones, la optimización es muy importante. Tenemos que pintar lo mismo muchas veces en un segundo (lo ideal son al menos 25 veces cada segundo), con lo que hay que minimizar al máximo las operaciones que hacemos cuando pintamos. Todo lo que podamos calcular antes de pintar lo calculamos y lo usamos cuando toca.
Para finalizar y sacarle todo el potencial al Canvas una última recomendación: tener la inspiración, la creatividad y el talento para combinar todos los elementos que hemos visto y crear verdaderas virguerías y efectos que dejan sorprendidos a nuestros usuarios finales.
Autor del post: Víctor Oliva (@voliva_v) Hybrid Developer en SlashMobility.
