Como crear un watchface Android Wear  parte 3

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, en la segunda parte del tutorial vimos las configuraciones de los archivos xml, gradle y como empezar a pintar en el canvas, bueno pues ahora vamos al lío por que esta entrega viene calentita, espero que os guste, sentiros libres de comentar.

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

 

1 Los Pinceles o Paints

Vamos a empezar este tutorial por los “pinceles” ya que vamos a utilizarlos para….si….pintar, estaba claro no?, esta clase nos ofrecerá todo lo necesario para poder pintar a nuestro gusto textos, lineas, poligonos, etc, digamos que los pinceles son los estilos a aplicar a la hora de pintarlos en el canvas cualquier objeto UI, para que esto quede claro vamos a verlo con un ejemplo.

La semana pasada rellenamos un poco el método onDraw, pues bien, esta semana lo vaciamos ya que vamos a escribirlo bien, eso por un lado pero antes de comenzar con el onDraw nos vamos a crear unos pinceles para pintar todos los elementos como las manecillas de la hora, textos, etc, después los inicializaremos en el onCreate (en este punto tengo que deciros que en el onDraw solo pintaremos, nada de operaciones complejas ya que el onDraw se llama cada poco tiempo y podríamos provocar consumos de batería no deseados forzando a la cpu que realice operaciones innecesarias, además quedaréis como pros jejeje) para usarlos en el onDraw:

turoiarl_crear_watchface_02

onCreate del servicio watchface

Como podéis ver arriba he creado una variable Calendar para poder obtener los datos del tiempo, no tiene más, después un poco más abajo he creado tres paints, uno para la manecilla de las horas, otro para los minutos y otro para el fondo. Pero lo que me interesa más es el método onCreate, como veis en la captura hay una instrucción donde determinamos el estilo del watchface, así que para que no os entre la curiosidad os la explico en un momento ya que la tenemos “setWatchFaceStyle(new WatchFaceStyle.Builder(ServicioMain.this)…” como os comentaba en esta instrucción determinamos un estilo para el conjunto del watchface, para ello creamos un objeto WatchFaceStyle.Builder para construir el estilo, más abajo lo que hacemos con la línea del “setCardPeekMode” es setear el estilo de las tarjetas de notificaciones que llegan al reloj, hay muchos estilos así que elige el que más te guste o déjalo como lo tengo puesto en la imagen, la siguiente instrucción “setBackgroundVisibility” se refiere al fondo de la tarjeta de notificación, podemos mostrar el fondo siempre, podemos mostrarlo solo cuando subimos la tarjeta, etc, hay varios estilos así que como en la anterior elegir el que más rabia os de y por último lo construimos con la sentencia “Build”.

Ahora vamos a pasar a los susodichos Paints que es lo que más me interesa explicar aquí, en el primero lo hacemos fácil, como es el paint para el fondo del watchface y además va a ser algo sencillo solamente le asignamos el color negro con mBackgroundPaint.setColor(Color.BLACK), siento cortar esto pero quería explicar que siempre que diseñéis un nuevo reloj tener en cuenta que hay muchos dispositivos con pantallas AMOLED no iluminan los píxeles negros así que si nuestro background es negro menos consumirá la pantalla y los usuarios lo agradecerán.

Al pincel de las horas le vamos a poner un color blanco (por ejp), le vamos a poner también un grosor con setStrokeWidth, además vamos a dejar los bordes redondeados con “setStrokeCap(Paint.Cap.ROUND)”, este acabado podemos cambiarlo al gusto pero como son unas manecillas mejor redondas. Por último le vamos a poner una máscara con un BLUR simplemente para que veáis el efecto, no es más que un desenfoque leve que dará sensación de rayo de luz como veremos más adelante, hay varios tipos de máscaras blur para dar otro tipo de efecto, en este caso hemos elegido sólido pero podéis ir probando por curiosidad. Con la sentencia setAntialias conseguimos suavizar los píxeles pero solo la podemos utilizar en modo interactivo, no en ambiente y esto no lo digo yo lo dice Google y sus buenas prácticas jejeje, esto se debe a que la gpu hace mayor esfuerzo renderizando con el antialias y el modo ambiente tiene que consumir lo menos posible.

Perdón por el tocho tan seguido pero no quería dejarme nada importante, bien vamos a seguir, ese era nuestro onCreate  ahora nos vamos a ir al método onSurfaceChanged.

2 onSurcafeChanged y las medidas del lienzo

Vamos a aprovechar este método para tomar todas las medidas que nos harán falta para poder determinar la situación de cada elemento en el canvas:

Método onSurfaceChanged

Método onSurfaceChanged

En este método podremos tomar los anchos y altos del canvas, nosotros aprovecharemos para calcular todas las medidas que usaremos como los centros x e y, como las longitudes de las manecillas. Este punto si que ha sido sencillo ¿verdad?

 

3 onAmbientModeChanged 

Este método se invocará en los cambios entre el modo ambiente y el modo interactivo así que vamos a utilizarlo para hacer los cambios necesarios en los paints para cumplir con las buenas prácticas de Google y aligerar la carga de trabajo de la cpu como vemos en la siguiente imagen:

Método onAmbientModeChanged

Método onAmbientModeChanged

Como veis en la imagen me he declarado un booleano para controlar cuando estamos en modo ambiente o  interactivo, dentro lo que hacemos es simplemente cambiar el color del pincel de la hora (que es cyan) y los antialias, os estaréis preguntando que pasa con el minutero, pues este tiene color blanco así que no haremos nada ya que esta bien para el modo ambiente como para el modo interactivo (Google dice que cuando estemos en modo ambiente tenemos que usar escala de grises y blanco entra en el rango).

Después de las operaciones refrescamos el tiempo e invalidamos el canvas para que se repinte.

 

4 onDraw

Ya hemos llegado al meollo de todo, esta es la parte donde montamos todas las piezas para pintar nuestro reloj en la pantalla de nuestro smartwatch android wear, seguro que tenéis ganas así que no voy a darle muchas vueltas, primero os muestro la captura del método montado y sobre eso os voy mostrando:

Método onDraw

Método onDraw

Como se ve en la imagen, he declarado una constante que se llama TWO_PI que no es ni más ni menos que PI al cuadrado que representa la circunferencia completa, esta constante es necesaria para el cálculo de las fracciones de la circunferencia que vamos a necesitar para mover las manecillas correctamente. Después pintamos el fondo con “drawRect” pasando como parámetros: x, y, alto, ancho y el pincel con el que queremos pintarlo, básicamente pintamos todo el canvas con el color negro. En la siguiente línea solo actualizamos la hora de la variable calendar que nos creamos anteriormente y poder usarlo en el cálculo de los segundos, minutos y horas.

Después de calcular los minutos vemos como usamos TWO_PI para calcular en que hora estamos en relación de la circunferencia, esto lo hacemos con los minutos y las horas respectivamente y después al final calculamos los puntos finales de las rectas que vamos a dibujar a forma de manecillas haciendo uso de los senos y los cosenos (aquí siempre ayuda saber un poco de matemáticas jejeje), como ya tenemos los centros que son los puntos de comienzo de las líneas que vamos a dibujar y los puntos finales gracias a los cosenos y los senos, pues simplemente los pintamos con drawLine pasando como parametros: puntoComienzoX, puntoComienzoY, puntoFinalX, puntoFinalY y el pincel.

El resultado queda así:

***Modo interactivo***

Resultado final

Resultado final

***Modo ambiente***

Resultado final ambiente

Resultado final ambiente

 

Bueno esto ya va pareciendo un reloj, hombre no un super reloj pero ya te dice la hora. Como os decía antes se puede ver el blur aplicado antes en el método onCreate y podemos ver que en el modo ambiente la aguja de las horas esta en un gris oscuro como cambiamos en el método onAmbientModeChanged.

Bien con esto acabamos el post que al final se me ha vuelto a ir de palabras 1381 ahora mismo, para la próxima entrega (que va a ser cortita) vamos a mostrar como monitorizar la batería del reloj y pintar los segundos de otra forma que no sean manecillas.

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>