Share
Mientras que Android no admite SVG (gráficos vectoriales escalables) directamente, Lollipop introdujo una nueva clase llamada VectorDrawable, lo que permite a los diseñadores y desarrolladores dibujar activos de una manera similar utilizando solo el código.
En este artículo, aprenderá cómo crear un VectorDrawable Con archivos XML y animalos en tus proyectos. Esto solo es compatible con dispositivos con Android 5.0 o superior, y actualmente no hay implementaciones de biblioteca de soporte. Los archivos de origen de este tutorial se pueden encontrar en GitHub.
La principal similitud entre un VectorDrawable y una imagen SVG estándar es que ambos se extraen utilizando una camino valor. Mientras se entiende cómo las rutas SVGestán fuera del alcance de este artículo, la documentación oficial se puede encontrar en el sitio web de W3C. Para este artículo, simplemente deberá saber que la etiqueta de ruta es donde se produce el dibujo. Echemos un vistazo al archivo SVG que dibuja la siguiente imagen:
Hay cinco partes principales de esta imagen:
El siguiente código dibuja esta imagen como un SVG:
Si bien esto puede parecer un poco abrumador, en realidad no es necesario comprender completamente cómo se implementa todo para implementar un VectorDrawable en su codigo Sin embargo, debe tenerse en cuenta que separé cada una de las cinco secciones en su propio bloque único en el código para facilitar la lectura..
La sección superior consta de dos arcos para dibujar el cuadrado redondeado y las secciones siguientes representan los conjuntos de líneas inferior, superior, derecha e izquierda, respectivamente. Para convertir este código SVG en un VectorDrawable, primero necesitas definir el vector Objeto en XML. El siguiente código es tomado de la vector_drawable_cpu.xml archivo en el código de ejemplo para este artículo.
A continuación, puede agregar en la ruta de datos. El siguiente código se divide en cinco etiquetas de ruta diferentes en lugar de una ruta grande.
Como puede ver, cada sección de ruta simplemente usa la pathData atributo para el dibujo. Ahora puedes incluir el VectorDrawable Archivo XML como dibujable en un estándar ImageView y se escalará a cualquier tamaño que requiera su aplicación, sin necesidad de utilizar ningún código Java.
Ahora que sabe cómo crear imágenes usando solo código, es hora de divertirse y animarlas. En la siguiente animación, notará que cada uno de los grupos de cables pulsa y se aleja de la CPU..
Para lograr este efecto, deberá ajustar cada sección que desee animar en un
A continuación, querrá crear animadores para cada tipo de animación. En este caso, hay uno para cada grupo de cables para un total de cuatro. A continuación se muestra un ejemplo de la animación del grupo superior y también necesitarás una para la parte inferior, izquierda y derecha. Cada uno de los archivos XML de animador se puede encontrar en el código de muestra.
Como puedes ver, la nombre de la propiedad se establece en traducirY, lo que significa que la animación se moverá a lo largo del eje Y. los valor desde y valor para controlar la ubicación inicial y final. Configurando modo de repetición a marcha atrás y repetir cuenta a infinito, la animación se repetirá siempre y cuando la VectorDrawable es visible. los duración de la animación se establece en 250, cual es el tiempo en milisegundos.
Para aplicar las animaciones a su archivo dibujable, necesitará crear una nueva vector animado Archivo XML para asociar los animadores con el VectorDrawable grupos El siguiente código se utiliza para crear el animated_cpu.xml expediente.
Cuando todos tus XML estén listos para usar, puedes usar la animated_cpu.xmldibujable en un ImageView para mostrarlo.
Para comenzar su animación, necesitará obtener una instancia del Animable desde el ImageView y llama comienzo.
ImageView mCpuImageView = (ImageView) findViewById (R.id.cpu); Drawable drawable = mCpuImageView.getDrawable (); if (drawable instanceof Animatable) ((Animatable) drawable) .start ();
Después comienzo ha sido llamado, los cables en la imagen de la CPU comenzarán a moverse con un código Java muy mínimo utilizado.
Un caso de uso común para un VectorDrawable está transformando una imagen en otra, como el icono de la barra de acción que cambia de un icono de hamburguesa a una flecha. Para hacer esto, las rutas de origen y de destino deben seguir un formato idéntico para la cantidad de elementos. Para este ejemplo, definiremos las flechas orientadas hacia la izquierda y hacia la derecha que se ven arriba como cadenas.
M300,70 l 0,70 -70, -70 0,0 70, -70z M300,70 l 0, -70 70,70 0,0 -70,70z
A continuación, deberá crear un dibujo inicial para una flecha usando la ruta para flecha izquierda. En el código de ejemplo, se llama vector_drawable_left_arrow.xml.
La principal diferencia entre la animación de la CPU y la transformación radica en la animator_left_right_arrow.xml expediente.
Notarás la valor desde y valor para las propiedades hacen referencia a los datos de ruta para la flecha izquierda y derecha, la tipo de valor se establece en pathType y nombre de la propiedadse establece en pathData. Cuando se configuren, el animador sabrá que debe cambiar un conjunto de datos de ruta a otro. Cuando el animador haya finalizado, deberá asociar el VectorDrawable con el objectAnimator usando un nuevo vector animado objeto.
Por último, simplemente deberá asociar el dibujo animado con un ImageView e inicia la animación en tu código Java.
mArrowImageView = (ImageView) findViewById (R.id.left_right_arrow); drawable = mArrowImageView.getDrawable (); if (drawable instanceof Animatable) ((Animatable) drawable) .start ();
Como has visto, la VectorDrawable La clase es bastante sencilla de usar y permite una gran cantidad de personalización para agregar animaciones simples. Mientras que la VectorDrawable Actualmente, esta clase solo está disponible para dispositivos con Android 5.0 y superior, serán invaluables ya que más dispositivos son compatibles con Lollipop y futuras versiones de Android.
Accentsconagua