Usar el lienzo en Jetpack Compose para crear un SquareSegmentedProgressIndicator | por Odinas | diciembre 2022

En los últimos años, Jetpack Compose se ha vuelto cada vez más popular al crear interfaces de usuario de Android. La razón es principalmente porque simplifica y acelera el desarrollo de la interfaz de usuario. La adquisición también se ha vuelto muy útil en aplicaciones portátiles. En este artículo, mostraré un ejemplo práctico de cómo puede usar las API de Canvas en Compose para crear un indicador de progreso segmentado cuadrado (SSPI) que es perfecto para dispositivos portátiles cuadrados.Foto de Justyn Warner en Unsplash

¿Lienzo en composición?

Canvas en Jetpack Compose es una función componible que envuelve las API de Canvas nativas del kit de herramientas de la interfaz de usuario. Esto significa que puede incorporar fácilmente un lienzo en su código de diseño componible nombrando el lienzo simplemente componible. Si está interesado en obtener más información sobre el lienzo en Compose, le recomiendo leer este artículo, que explica en detalle cómo funciona.

¿Qué vamos a construir?

En este artículo, crearemos un indicador cuadrático de progreso (SSPI). ¡Sí, sé que es un sorbo! La idea principal es crear un componible que indique algún progreso. Debe cumplir con estos criterios:

• La API debe aceptar una lista de segmentos que pueden tener diferentes colores y pesos.
• Se le debe dar un color de pista para pintar la pista detrás de él.
• Debería poder establecer el radio de la esquina, el ancho del trazo y el degradado.
• El acolchado entre los segmentos debe ser ajustable.

Esto debería verse algo como esto:Etiquetado de la barra de progreso segmentada cuadrada Esto también se puede ampliar con una animación genial que muestra el progreso, que en este ejemplo va del 0% al 100%.Puede ver GIFA de animación de barra de progreso segmentada cuadrada, aquí el usuario ha proporcionado 3 segmentos de pista con el mismo peso y color diferente.

¿Donde empezamos?

Primero, necesitamos implementar una función que use el lienzo componible. Lo primero que pensé fue que, dado que sabía que había una función de extensión drawRoundedRect en drawScope, podríamos usarla. Sin embargo, después de buscar mucho en Google, descubrí que drawRoundedRect no funcionaría porque necesitamos implementar diferentes segmentos. La razón es que no podemos simplemente dibujar partes del cuadrado con drawRoundedRect . Esto significa que necesitamos usar las funciones de extensión drawLine y drawArch para crear esto. Necesitamos desarrollar un algoritmo para calcular cuándo dibujar los diferentes componentes del rectángulo. Luego, primero debemos dibujar el segmento de la pista y luego dibujar el segmento de progreso sobre él. Podemos usar la API drawPath de Canvas para dibujar una serie de rutas individuales. Entonces podemos simplemente dibujar la ruta que contiene la lista de segmentos. El uso de drawPath también garantiza que los extremos de la línea y los extremos del arco estén correctamente alineados. En el código anterior, agregamos el lienzo componible con el progreso proporcionado por el usuario. Luego recorremos los segmentos calculados, dibujando primero la ruta de la pista y luego la ruta de progreso. Estos grupos de segmentos se calculan en función de la lista de segmentos de indicadores que proporciona el usuario. También tiene en cuenta la altura/anchura del lienzo y el radio de esquina proporcionado. Esto devuelve una lista de grupos de segmentos, cada uno de los cuales contiene un conjunto de segmentos. Estos se calculan a partir de la anchura, la altura y los radios de las esquinas de la pantalla. Necesitamos esto para saber dónde se definen las diferentes secciones. Esta es información útil cuando dibujamos una línea recta horizontal, una línea recta vertical o un arco. Después de haber definido dónde deben estar las secciones, podemos calcular las secciones segmentadas y agregarlas a su grupo de segmentos. Aquí verificamos si el área se cruza con los puntos que calculamos anteriormente. Si es así, podemos agregar un segmento calculado a la lista. Este segmento calculado contendrá una propiedad de segmento dibujable para cada segmento según el tipo de ruta que queramos dibujar junto con su color de pista, color de indicador y rango de sección. Esto luego crea la ruta que se dibujará cuando las funciones drawCompleted/drawIncompleted se llamen la clase CalculatedSegment. Si desea ver el código completo para esto, la implementación se puede encontrar aquí.

¡Hagamos una animación genial!

Animación GIF de la barra de progreso con segmentos cuadrados Ahora que el SSPI se ha hecho componible, nos queda una API como esta. Al usar las herramientas de vista previa en Android Studio, podemos agregar una vista previa para verificar esto. Esto crea una primera vista previa básica orientada a un dispositivo Wear OS cuadrado. Si desea utilizar la anotación personalizada @WearSquareDevicePreview, puede obtenerla del proyecto relojero o crear la suya propia. Debido a que la API expone el progreso, es una excelente variable para las animaciones. Podemos usar esto para crear una animación genial donde el estado comienza en 0f que representa 0% a 1f que representa 100%. Luego podemos usar la API de transición de actualización y la extensión animateFloat para actualizar el progreso en función de una interpolación con LinearEasing. Esto progresará de 0 a 100 en una cantidad lineal de tiempo. Ahora que hemos dibujado nuestro SSPI con la animación, podemos agregar un lienzo sobre la función. Aquí podemos dibujar líneas horizontales y verticales para obtener puntos de referencia a través de la animación. Saldrá algo asíBarra de progreso segmentada cuadrada con animación de progreso en un dispositivo Wear cuadrado.Barra de progreso segmentada cuadrada con animación de progreso del 68 % en un dispositivo Wear OS cuadrado.GIF de animación de barra de progreso con segmentos cuadrados

Empácalo 🌯

¡Creo que este componente se ve muy bien en un dispositivo Wear OS cuadrado! Si desea consultar el código fuente de este artículo, puede encontrarlo aquí. Al crearlo, experimenté lo hermoso que es crear código de composición e interactuar con las API de Canvas. También creo que las herramientas de vista previa de la animación son increíbles. Aquí puedes ver la animación en detalle, ¡fue muy útil! Además, si está interesado en el desarrollo de Wear OS, le recomiendo que consulte el proyecto Horologist. Realmente es un beneficio increíble cuando se trabaja con Wear OS.

Recursos útiles

¡Gracias por leer este artículo! ¡Espero que esto ayude a alguien! ¡También quiero agradecer a Yuri Schimke por toda la ayuda, inspiración, revisión y tutoría! Además, ¡quiero agradecer a Ataul Munim por la excelente reseña! ¡Eress el mejor! 🙏