Como crear un watchface Android Wear  parte 2

Antes de continuar con como crear un watchface Android Wear…

Hola, por aquí ando de nuevo dando guerra con este tutorial donde explicamos como crear un watchface Android Wear para que puedas hacerte uno tu mismo si te animas, en la primera parte del tutorial vimos como configurar el entorno de trabajo y crear nuestro proyecto, bien, ahora vamos a meternos bien en faena, espero que os guste, sentiros libres de comentar.

Puedes encontrar el código fuente del watchface completo en: GitHub

 

1 El Servicio CanvasWatchFaceService

Este será el motor de nuestro reloj, el encargado de pintar el reloj por pantalla y su información (como la batería del reloj o lo que queramos añadir), bueno en realidad es la subclase “CanvasWatchFaceService.Engine” y el servicio es un servicio que esta corriendo siempre en primer plano para mostrar todo. La clase Engine tiene varios métodos que tenemos que conocer y veremos a continuación, pero para no aburriros vamos a meter algo de código, en este punto he de decir que pegaría aquí el código pero entonces solo copiaríais y pegaríais sin aprender nada, hacerme caso, mejor escribir un poco que al final se entiende todo mejor, además tenéis el código en Github como comentaba arriba.

Lo primero que haremos es crear el servicio, así que creamos una clase con el nombre “ServicioMain” por ej. y extendemos de CanvasWatchFaceService a continuación sobrescribimos el metodo “onCreateEngine” devolviendo un nuevo Engine que como decíamos será el encargado de mover el UI del reloj y gestionar datos de fondo, etc. Lo siguiente es crear un objeto Engine dentro de nuestra clase ServicioMain, para que os quede claro os dejo la captura:

captura de la clase de control del watchface

como crear un watchface parte 2 captura de la clase de control de la UI del watchface

2 La clase Engine, el motor del watchface

Una vez creada esta clase Engine vamos a dotarla de los métodos necesarios para que pueda manejar la interfaz gráfica y todo el cotarro, en esta clase concentraremos prácticamente todo el código así que vamos al lío Macareno, primero os enseño la siguiente captura con los métodos que vamos a implementar:

Captura de los métodos de Engine

como crear un watchface parte 2 captura de los métodos de la clase Engine

Vamos a numerarlos para contar que hace cada uno y por que los hemos metido en el código:

onCreate:

Este método siempre es invocado cuando se crea el objeto Engine y solo se llama una vez, aquí en este método vamos a inicializar ciertas variables y clases para trabajar con ellas más adelante, como puede ser por ejemplo los pinceles para pintar las manecillas del reloj en el lienzo o canvas.

onSurfaceChanged:

Este método es llamado antes del método onDraw que lo veremos más adelante y será donde inicializaremos las clases y variables del UI que dependan del tamaño del lienzo, por ej. calcularemos los centros del lienzo X e Y.

onDraw:

Aquí es donde se monta todo para mostrarlo en el canvas o lienzo, en este método usaremos las variables y clases creadas e inicializadas en los métodos anteriores, aplicaremos efectos, en definitiva este método es el que se encarga de pintar todo y se llama cada X tiempo todo el tiempo por lo que no es bueno sobrecargarlo con cálculos complejos o crear muchas variables dentro, etc. Esto último es importante ya que si no el watchface podría consumir muchos recursos y sentirse pesado a la hora de mover la UI.

onDestroy:

Bueno este método no tengo mucho que decir, lo usaremos para desregistrar receivers que registraremos para consultar la batería del reloj o bien el cambio de zona horaria por ej, se llama cuando se destruye el Engine.

onVisibilityChanged:

Este método es llamado cada vez que se enciende o apaga la pantalla del reloj, por lo que si estamos en modo ambient no se llama, sin embargo si no tenemos el modo ambient y se apaga la pantalla se llamará, aquí lo que haremos algo parecido que en el onDestroy solo que como este método es llamado cuando se enciende o se apaga la pantalla veremos si es visible el reloj para registrar los receivers o desregistrarlos.

onTimeTick:

Aquí en este método, que es llamado cada segundo, lanzaremos la orden de repintado del canvas simplemente, así se repintará los cambios realizados en cada segundo.

onAmbientModeChanged:

Como pasaba en el onVisibilityChanged este método es llamado cada vez que cambia la visibilidad del reloj, pero esta vez cuando cambiamos entre modo interactivo y modo ambiente si es que lo tienes activado, yo personalmente no lo uso por que me da igual que me este dando la hora el reloj si no lo miro, si lo quiero mirar o bien activo el gesto de la muñeca o bien le toco a la pantalla, pero cada uno con sus gustos, que ahí no me meto.

3 Empezando a controlar el tiempo de tu watchface

Ahora que ya os he explicado por encima que vamos a incorporar en cada método vamos a ir añadiendo más cosas, primero vamos a añadir la constante MSG_UPDATE_TIME que es el id de un mensaje para comunicarnos con un hilo que crearemos para actualizar los segundos en modo interactivo, otra constante que se llamará INTERACTIVE_UPDATE que contendrá la frecuencia de actualización de los segundos, en este caso de un segundo jejeje, también crearemos un método que será el encargado de gestionar este hilo y será al que llamemos para cada vez que tengamos cambios de visibilidad en la pantalla, bien sea en modo ambiente o por que se apaga la pantalla del reloj, dejarlo como sigue:

Captura constantes control segundos

Como crear un watchface parte 2 captura de las constantes necesarias para la actualización de los segundos.

Vemos en la captura como creamos un hilo y sobrescribimos su método initialValues el cual devuelve un handler o manejador, aunque esta palabra en español no queda muy bonita así que lo llamaré de ahora en adelante handler mejor :), en este handler sobrescribimos el método handleMessage en el cual preguntaremos si tenemos un msg con el id que hemos puesto en la constante MSG_UPDATE_TIME, si es así repintaremos con invalidate y después preguntaremos si es visible el reloj y además NO esta en modo ambiente ya que es solo para actualizar los segundos en modo interactivo.

Ahora vamos a mostrar el método que controla todo esto:

Captura método gestión hilo actualización segundos

Como crear un watchface parte 2 captura método gestión hilo de actualización de segundos

Este método será llamado como decía cuando cambie la visibilidad la pantalla para no dejar el hilo corriendo cuando no debiera, cuando aparcas tu coche o moto no dejas el motor encendido y te vas…. o si?.

Bien ya estamos listos para pintar la hora así tal cual, solo por probar, por que si, que somos impacientes y queremos ver ya cosas, cosas que se pinten en la pantalla, ok ok, os explico esto pero solo a modo abrir boca, vamos a pintar la hora os pongo primero la captura y os cuento por que aún queda hacer un par de cosas más antes de poder pintar, como decía primero el código:

Captura de onDraw de ejp

Como crear un watchface parte 2 captura de onDraw de ejp

No voy a explicaros mucho de este método por que lo vamos a cambiar todo en la siguiente parte del tutorial, ahora me quiero centrar en otros aspectos, así que simplemente copiarlo y no hacerle mucho caso de momento, os resumo, creamos un pincel blanco para el texto, le ponemos tamaño, calculamos la hora para mostrarla y la mostramos, ahora vamos a lo que os quiero contar de verdad.

4 Ficheros importantes

AndroidManifest

En esta parte os voy a contar que tenemos que crear para hacer funcionar nuestro código como un watchface, si no Android Wear no se enterará de nuestras intenciones, así que vamos primero al AndroidManifest para mostraros como debería estar:

Captura AndroidManifest

Como crear un watchface parte 2 captura de AndroidManifest

watch_face.xml

Hemos añadido los permisos y la característica de carátula, después el servicio al cual le añadimos un meta-data con un fichero que hemos creado tal que así:

Captura xml watchface

Como crear un watchface parte 2 captura del xml watchface

Img preview

Además hemos cargado una imagen para mostrar el preview del watchface en el reloj a la hora de seleccionarlo:

Captura imagen preview

Como crear un watchface parte 2 captura imagen preview

Esta imagen es la que hemos referenciado en el manifest.

build.Gradle de el módulo wear

Por último comprobar que tenéis lo siguiente en el build.gradle:

Captura build.gradle

Como crear un watchface parte 2 captura build.gradle

Si todo esta correcto ya podremos ejecutar nuestro primer reloj, bueno un poco feo pero ya sería un reloj 🙂 .

Bien y con eso he terminado, sentiros libres de corregirme, comentar que os ha parecido, contribuir, preguntar o lo que más rabia os de, solo os pido una cosa, si os gustó el artículo compartirlo, likearlo, solo así llegará a la gente que lo necesite como tu 🙂

Hasta el próximo post SamSofit@s!

 

 

Leave a Reply

Tu dirección de correo electrónico no será publicada.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>