Points essentiels
- Un drawable vectoriel est un graphique vectoriel défini dans un fichier XML comme un ensemble de points, de lignes et de courbes, ainsi que les informations de couleur associées.
- Les drawables vectoriels sont évolutifs, ce qui signifie qu'ils peuvent être redimensionnés sans perte de qualité d'affichage. Ils sont donc parfaits pour les applications Android, car ils permettent de réduire la taille de vos fichiers APK et d'améliorer les performances.
- Pour créer des drawables vectoriels dans Android Studio, effectuez un clic droit sur le dossier drawable de votre projet, puis sélectionnez New > Vector Asset (Nouveau > Élément vectoriel). Vous pouvez également importer des fichiers SVG dans Android Studio en tant que drawables vectoriels.
Introduction
UnVectorDrawable
est un graphique vectoriel défini dans un fichier XML comme un ensemble de points, de lignes et de courbes, ainsi que les informations de couleur associées. Le principal avantage des drawables vectoriels est l'évolutivité des images. Elle peut être mise à l'échelle sans perte de qualité d'affichage, ce qui signifie qu'un même fichier est redimensionné pour différentes densités d'écran sans perte de qualité d'image.
La taille des fichiers APK est réduite et la maintenance des développeurs est réduite. Vous pouvez également utiliser des images vectorielles pour l'animation. Pour ce faire, utilisez plusieurs fichiers XML au lieu de plusieurs images pour chaque résolution d'affichage.
Cette page et la vidéo ci-dessous présentent la création de drawables vectoriels au format XML. Android Studio peut également convertir des fichiers SVG au format drawable vectoriel, comme décrit dans la section Ajouter des graphiques vectoriels multidensités.
Android 5.0 (niveau d'API 21) a été la première version à prendre officiellement en charge les drawables vectoriels avec VectorDrawable
et AnimatedVectorDrawable
, mais vous pouvez prendre en charge d'anciennes versions avec la bibliothèque Android Support, qui fournit les classes VectorDrawableCompat
et AnimatedVectorDrawableCompat
.
À propos de la classe VectorDrawable
VectorDrawable
définit un objet drawable statique. Comme pour le format SVG, chaque graphique vectoriel est défini comme une arborescence, composée d'objets path
et group
.
Chaque path
contient la géométrie du contour de l'objet et group
contient les détails de la transformation. Tous les chemins sont tracés dans le même ordre que dans le fichier XML.
L'outil Vector Asset Studio permet d'ajouter facilement un graphique vectoriel au projet sous forme de fichier XML.
Exemple de code XML
Voici un exemple de fichier XML VectorDrawable
qui affiche une image d'une batterie en mode de recharge.
<!-- 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>
Ce fichier XML renvoie l'image suivante:
À propos de la classe AnimatedVectorDrawable
AnimatedVectorDrawable
ajoute une animation aux propriétés d'un graphique vectoriel. Vous pouvez définir un graphique vectoriel animé comme trois fichiers de ressources distincts ou comme un seul fichier XML définissant l'intégralité du drawable. Examinons les deux approches pour une meilleure compréhension: plusieurs fichiers XML et un seul fichier XML.
Plusieurs fichiers XML
Cette approche vous permet de définir trois fichiers XML distincts:
- Un fichier XML
VectorDrawable
. -
Un fichier XML
AnimatedVectorDrawable
qui définit leVectorDrawable
cible, les chemins d'accès cibles et les groupes à animer, les propriétés et les animations définies en tant qu'objetsObjectAnimator
ouAnimatorSet
. - Fichier XML d'animation.
Exemple de plusieurs fichiers XML
Les fichiers XML suivants illustrent l'animation d'un graphique vectoriel.
- Fichier 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>
- Fichier XML d'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>
- Fichiers XML d'Animator utilisés dans le fichier XML de l'élément AnimatedVectorDrawable:
rotation.xml
etpath_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>
Fichier XML unique
En utilisant cette approche, vous pouvez fusionner les fichiers XML associés en un seul fichier XML via le format XML Bundle. Au moment de la création de l'application, la balise aapt
crée des ressources distinctes et les référence dans le vecteur animé. Cette approche nécessite Build Tools 24 ou une version ultérieure, et la sortie est rétrocompatible.
Exemple de fichier XML unique
<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>
Solution de rétrocompatibilité des drawables vectoriels
Pour prendre en charge les drawables vectoriels et les drawables vectoriels animés sur les appareils exécutant des versions de plate-forme antérieures à Android 5.0 (niveau d'API 21), ou qui utilisent les fonctionnalités fillColor
, fillType
et strokeColor
antérieures à Android 7.0 (niveau d'API 24), VectorDrawableCompat
et AnimatedVectorDrawableCompat
sont disponibles via deux bibliothèques compatibles : support-vector-drawable
et animated-vector-drawable
, respectivement.
Android Studio 1.4 offre une compatibilité limitée avec les drawables vectoriels en générant des fichiers PNG au moment de la compilation. Toutefois, les bibliothèques compatibles avec les drawables vectoriels animés offrent une flexibilité et une compatibilité étendue. Il s'agit d'une bibliothèque de prise en charge. Vous pouvez donc l'utiliser avec toutes les versions de la plate-forme Android à partir d'Android 2.1 (niveau d'API 7 ou supérieur). Pour configurer votre application afin qu'elle utilise des bibliothèques de compatibilité vectorielle, ajoutez l'élément vectorDrawables
à votre fichier build.gradle
dans le module de l'application.
Utilisez l'extrait de code suivant pour configurer l'élément vectorDrawables
:
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") } }
Vous pouvez utiliser VectorDrawableCompat
et AnimatedVectorDrawableCompat
sur tous les appareils équipés d'Android 4.0 (niveau d'API 14) ou version ultérieure. La façon dont Android charge les drawables, et pas tous les emplacements qui acceptent un ID de drawable, comme dans un fichier XML, n'est pas compatible avec le chargement de drawables vectoriels. Le package android.support.v7.appcompat
a ajouté un certain nombre de fonctionnalités pour faciliter l'utilisation des drawables vectoriels. Tout d'abord, lorsque vous utilisez le package android.support.v7.appcompat
avec ImageView
ou avec des sous-classes telles que ImageButton
et FloatingActionButton
, vous pouvez utiliser le nouvel attribut app:srcCompat
pour référencer des drawables vectoriels ainsi que tout autre drawable disponible pour android:src
:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Pour modifier les drawables au moment de l'exécution, vous pouvez utiliser la méthode setImageResource()
comme précédemment. L'utilisation de AppCompat
et de app:srcCompat
est la méthode la plus infaillible pour intégrer des drawables vectoriels dans votre application.
La bibliothèque Support 25.4.0 et versions ultérieures est compatible avec les fonctionnalités suivantes:
- Morphing de chemin (évaluateur de type de chemin) : permet de transformer un tracé en un autre.
- Interpolation de chemin : permet de définir un interpolateur flexible (représenté par un chemin) au lieu des interpolateurs définis par le système tels que LinearInterpolator.
La bibliothèque Support 26.0.0-beta1 et versions ultérieures est compatible avec les fonctionnalités suivantes:
- Déplacer le long du tracé : l'objet de géométrie peut se déplacer le long d'un tracé arbitraire dans le cadre d'une animation.
Exemple de plusieurs fichiers XML utilisant la bibliothèque Support
Les fichiers XML suivants illustrent l'approche qui consiste à utiliser plusieurs fichiers XML pour animer un graphique vectoriel.
- Fichier 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>
- Fichier XML d'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>
- Fichier XML Animator utilisé dans le fichier XML de l'élément AnimatedVectorDrawable:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Fichier XML unique
Le fichier XML suivant illustre l'utilisation d'un seul fichier XML pour animer un graphique vectoriel. Au moment de la création de l'application, la balise aapt
crée des ressources distinctes et les référence dans le vecteur animé. Cette approche nécessite Build Tools 24 ou une version ultérieure, et la sortie est rétrocompatible.
Exemple de fichier XML unique utilisant la bibliothèque Support
<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>