Cómo utilizar la clase VectorDrawable de Android para dibujar gráficos vectoriales

Dibujar gráficos vectoriales no es difícil: cómo utilizar la clase VectorDrawable de Android Descripción general del contenido Aunque el sistema Android no admite directamente SVG (es decir, gráficos vectoriales escalables), la versión Lollipop ha introducido una clase llamada VectorDrawable Una nueva clase que permite a los diseñadores y desarrolladores generar efectos de dibujo similares en código puro. En el artículo de hoy, aprenderemos cómo crear un VectorDrawable usando un archivo XML y animarlo en su proyecto. Esta función solo se puede implementar en dispositivos con Android 5.0 o superior y actualmente no existe una implementación de biblioteca de soporte. Los archivos fuente relevantes de este tutorial se pueden obtener a través del sitio web de GitHub. 1. Crear VectorDrawable Desde una perspectiva similar, VectorDrawable y los gráficos SVG estándar se dibujan utilizando valores de ruta. Sin embargo, cómo utilizar SVGpath para dibujar gráficos no está dentro del alcance de este artículo. Puede hacer clic aquí para obtener la información explicativa necesaria en el sitio web del W3C. En este artículo, solo necesitamos entender que la función de la etiqueta de ruta es dibujar gráficos. Comencemos con el archivo SVG y veamos cómo se dibuja el siguiente gráfico: Este gráfico consta de cinco partes principales: Un cuadrilátero redondeado como cuerpo principal de la CPU, que consta de dos arcos de composición lineal. ?Se utilizan cuatro grupos de gráficos, cada uno de los cuales contiene cinco líneas, que sirven como líneas de extensión de la CPU. El siguiente código muestra cómo dibujar los gráficos anteriores en modo SVG: Aunque parece un poco complicado, no necesita preocuparse por el significado específico del código anterior y esto no afectará el trabajo de dibujo de VectorDrawable que haremos a continuación. . Sin embargo, es necesario enfatizar que trato los cinco componentes gráficos principales mencionados anteriormente como bloques independientes en el código para mejorar la legibilidad del contenido del código. Primero, necesitamos usar dos arcos arqueados para dibujar un cuadrilátero redondeado. En el siguiente contenido, exploraremos cómo expresar las líneas extendidas en las cuatro direcciones: arriba, abajo, izquierda y derecha. Para convertir el código SVG anterior en VectorDrawable, primero debe definir el objeto vectorial en XML. El siguiente código se extrae del archivo vector_drawable_cpu.xml en el código de muestra de este artículo. Después de esto, puede agregarle datos de ruta. El siguiente código también se divide en cinco etiquetas de ruta diferentes en lugar de procesarlas como un todo, por supuesto, esto es para garantizar la legibilidad del contenido. Como puede ver, cada fragmento de ruta solo necesita dibujarse usando la propiedad pathData. Ahora podemos incorporar el archivo VectorDrawableXML en el ImageView estándar como un objeto dibujable, y se puede cambiar su tamaño arbitrariamente según las necesidades reales de la aplicación, sin modificar ningún código Java en absoluto. 2. Agregue efectos de animación a VectorDrawables Ahora que hemos aprendido cómo crear gráficos en código puro, lo siguiente que debemos hacer es divertirnos un poco: agregarles efectos de animación. En la siguiente animación, encontrará que cada grupo de líneas como líneas extendidas continuará apuntando y alejándose del cuerpo de la CPU. Para lograr este objetivo, debes incluir cada clip que contenga el efecto de animación en una etiqueta. Una versión modificada de vector_drawable_cpu.xml se verá así: A continuación, necesitamos crear archivos de animación para cada tipo de animación. En este ejemplo, se utiliza un animador para cada grupo de líneas, lo que significa que se requieren cuatro animadores. El siguiente código muestra el efecto de animación de la línea superior. También debe configurar efectos similares para las líneas inferior, izquierda y derecha.

Cada archivo animatorXML está incluido en el código de muestra de este proyecto. Como puede ver, el nombre de propiedad está configurado en traducirY, lo que significa que la animación se moverá a lo largo del eje Y. ValueFrom y valueTo controlan el punto inicial y final del desplazamiento. Al configurar repetirMode en reversa y repetirCount en infinito, toda la animación continuará en bucle y su efecto se reflejará en VectorDrawable. La duración de la animación se establece en 250 y su unidad de duración es milisegundos. Para aplicar esta animación a sus propios archivos dibujables, necesita crear un nuevo archivo vectorXML animado y asignar estos animadores a cada grupo VectorDrawable. El siguiente código crea el archivo animados_cpu.xml.