Puntos clave
- Un elemento de diseño vectorial es un gráfico vectorial definido en un archivo XML como un conjunto de puntos, líneas y las curvas junto con su información de color asociada.
- Los elementos de diseño vectoriales son escalables, lo que significa que se puede cambiar su tamaño sin perder la calidad de visualización. Por lo tanto, son ideales para usarlos en apps de Android, ya que pueden ayudar a reducir el tamaño de tus y mejorar el rendimiento.
- Puedes crear elementos de diseño vectoriales en Android Studio haciendo clic con el botón derecho en la carpeta de elementos de diseño en tu proyecto y selecciona Nuevo > Elemento vectorial. También puedes importar archivos SVG a Android Studio como elementos de diseño vectoriales
Introducción
UnVectorDrawable
es un gráfico vectorial definido
en un archivo en formato XML como un conjunto de puntos, líneas y curvas, junto con sus componentes
la información del color. La principal ventaja de usar un elemento de diseño vectorial es la
escalabilidad. Se puede escalar sin perder la calidad de visualización, lo que significa que
se cambia el tamaño del mismo archivo para diferentes densidades de pantalla sin perder la calidad de la imagen.
De esta manera, se obtienen archivos APK más pequeños y se reducen las tareas de mantenimiento del desarrollador. También puedes
usar imágenes vectoriales para la animación usando varios archivos XML en lugar de varios
imágenes para cada resolución de pantalla.
En esta página y en el video a continuación, se brinda una descripción general de cómo crear elementos de diseño vectoriales en XML. Android Studio también puede convertir archivos SVG al formato de elemento de diseño vectorial, como se describe en Consulta Cómo agregar gráficos vectoriales de varias densidades.
Android 5.0 (nivel de API 21) fue la primera versión en admitir oficialmente elementos de diseño vectoriales con
VectorDrawable
y AnimatedVectorDrawable
, pero
puedes admitir versiones anteriores con la biblioteca de compatibilidad de Android, que proporciona la
VectorDrawableCompat
y
AnimatedVectorDrawableCompat
.
Acerca de la clase VectorDrawable
VectorDrawable
define un elemento de diseño estático.
. Similar al formato SVG, cada gráfico vectorial se define como un árbol
de datos, que consta de objetos path
y group
.
Cada path
contiene la geometría del contorno del objeto y
group
contiene los detalles de la transformación. Se dibujan todas las rutas
en el mismo orden en que aparecen en el archivo en formato XML.
El elemento vectorial Studio ofrece una manera sencilla de agregar un gráfico vectorial al proyecto. como un archivo en formato XML.
XML de ejemplo
Este es un archivo en formato XML VectorDrawable
de muestra que renderiza una imagen
de la batería en el modo de carga.
<!-- res/drawable/battery_charging.xml --> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:width="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="rotationGroup" android:pivotX="10.0" android:pivotY="10.0" android:rotation="15.0" > <path android:name="vect" android:fillColor="#FF000000" android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z" android:fillAlpha=".3"/> <path android:name="draw" android:fillColor="#FF000000" android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/> </group> </vector>
Este XML renderiza la siguiente imagen:
Acerca de la clase AnimatedVectorDrawable
AnimatedVectorDrawable
agrega animación a las propiedades de un vector.
gráfico. Puedes definir un gráfico vectorial animado como tres imágenes
como un archivo en formato XML individual que define todo el elemento de diseño. Vamos a
Observa ambos enfoques para una mejor comprensión: Varios archivos XML y Un solo archivo.
Archivo en formato XML.
Varios archivos XML
Si usas este enfoque, puedes definir tres archivos XML separados:
- Un archivo en formato XML
VectorDrawable
-
Un archivo en formato XML
AnimatedVectorDrawable
que define el objetoVectorDrawable
de destino, el las rutas y los grupos de destino para animar, las propiedades y las animaciones definidas como objetosObjectAnimator
AnimatorSet
. - Un archivo XML animador
Ejemplo de varios archivos en formato XML
En los siguientes archivos XML, se muestra la animación de un gráfico vectorial.
- Archivo XML de VectorDrawable:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- Archivo XML de AnimatedVectorDrawable:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="vectorPath" android:animation="@anim/path_morph" /> </animated-vector>
- Archivos XML de animador que se usan en el XML de AnimatedVectorDrawable
archivo:
rotation.xml
ypath_morph.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/> </set>
Archivo en formato XML único
Con este enfoque, puedes combinar los archivos XML relacionados en un solo
en formato XML de paquete. Al momento de compilar la app, el
La etiqueta aapt
crea recursos separados y hace referencia a ellos en el
vector animado. Este enfoque requiere la versión 24 o una versión posterior de las Herramientas de compilación, y las
es retrocompatible.
Ejemplo de un archivo en formato XML único
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:name="root" android:strokeWidth="2" android:strokeLineCap="square" android:strokeColor="?android:colorControlNormal" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" /> </vector> </aapt:attr> <target android:name="root"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="pathData" android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:duration="300" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType" /> </aapt:attr> </target> </animated-vector>
Solución de retrocompatibilidad con elementos de diseño vectoriales
Para admitir elementos de diseño vectoriales y elementos de diseño vectoriales animados en dispositivos que ejecutan versiones de plataforma anteriores
que Android 5.0 (nivel de API 21), o usar fillColor
, fillType
y
funcionalidades de strokeColor
anteriores a Android 7.0 (nivel de API 24),
VectorDrawableCompat
y AnimatedVectorDrawableCompat
están disponibles mediante dos bibliotecas de compatibilidad:
support-vector-drawable
y animated-vector-drawable
,
respectivamente.
Android Studio 1.4 introdujo una compatibilidad limitada con vectores
de elementos de diseño mediante la generación de archivos PNG durante el tiempo de compilación. Sin embargo, el elemento de diseño vectorial
y las bibliotecas de compatibilidad
con elementos de diseño vectoriales animados
amplia compatibilidad: es una biblioteca de compatibilidad, así que se puede usar con todos
Versiones de la plataforma de Android hasta Android 2.1 (nivel de API 7 o superior) Para configurar tu
para usar bibliotecas de compatibilidad con vectores, agrega vectorDrawables
a tu archivo build.gradle
en el módulo de la app.
Usa el siguiente fragmento de código para configurar vectorDrawables
elemento:
Groovy
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Kotlin
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Groovy
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities = [] } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters "--no-version-vectors" } }
Kotlin
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities() } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters("--no-version-vectors") } }
Puedes usar VectorDrawableCompat
y
AnimatedVectorDrawableCompat
en todos
en dispositivos con Android 4.0 (nivel de API 14) y versiones posteriores. La forma en que Android
carga elementos de diseño, no todos los sitios que aceptan un ID de elemento de diseño, como en un XML
admite la carga de elementos de diseño vectoriales. El
El paquete android.support.v7.appcompat
agregó un número
de atributos para facilitar el uso de elementos de diseño vectoriales. Primero, cuando usas
Paquete de android.support.v7.appcompat
con
ImageView
o con subclases como
ImageButton
y
FloatingActionButton
, puedes
Usa el nuevo atributo app:srcCompat
para hacer referencia a elementos de diseño vectoriales.
así como cualquier otro elemento de diseño disponible para android:src
:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Para cambiar elementos de diseño en el tiempo de ejecución, puedes usar el
setImageResource()
que antes. AppCompat
en uso
y app:srcCompat
es el método de integración más infalible
elementos de diseño vectoriales en tu app.
La biblioteca de compatibilidad 25.4.0 y las versiones posteriores admiten las siguientes funciones:
- Transformación de la ruta (evaluador PathType) Se usa para transformar de una ruta a otra.
- Interpolación de ruta: Se usa para definir una estructura interpolador (representado como una ruta) en lugar del interpolador definido por el sistema interpoladores como LinearInterpolator.
La biblioteca de compatibilidad 26.0.0-beta1 y las versiones posteriores admiten las siguientes funciones:
- Desplazarse por la ruta: El objeto de geometría puede moverse, a lo largo de una ruta arbitraria, como parte de una animación.
Ejemplo de varios archivos en formato XML que usan la biblioteca de compatibilidad
En los siguientes archivos en formato XML, se demuestra el enfoque de usar varios archivos en formato XML. para animar un gráfico vectorial.
- Archivo XML de VectorDrawable:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- Archivo XML de AnimatedVectorDrawable:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> </animated-vector>
- Archivo XML de animador que se usa en el archivo XML de AnimatedVectorDrawable
archivo:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Archivo en formato XML único
En el siguiente archivo en formato XML, se demuestra el enfoque de usar un solo archivo en formato XML.
para animar un gráfico vectorial. Al momento de compilar la app, el
La etiqueta aapt
crea recursos separados y hace referencia a ellos en el
vector animado. Este enfoque requiere la versión 24 o una versión posterior de las Herramientas de compilación, y las
es retrocompatible.
Ejemplo de un único archivo en formato XML que usa la biblioteca de compatibilidad
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="64dp" android:height="64dp" android:viewportWidth="600" android:viewportHeight="600"> <group android:name="rotationGroup" android:pivotX="300" android:pivotY="300" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector> </aapt:attr> <target android:name="rotationGroup"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" android:duration="6000" android:interpolator="@android:interpolator/fast_out_slow_in" /> </aapt:attr> </target> </animated-vector>