Présentation de VectorDrawable

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment afficher des graphiques dans Compose.
<ph type="x-smartling-placeholder"></ph> ImageVector →

Points essentiels

  • Un drawable vectoriel est un graphique vectoriel défini dans un fichier XML comme un ensemble de points, de lignes et courbes ainsi que les informations de couleur associées.
  • Les drawables vectoriels sont évolutifs : ils peuvent être redimensionnés sans perte de qualité d'affichage. Ils sont donc parfaitement adaptés aux applications Android, car ils permettent de réduire la taille APK et améliorer les performances.
  • Vous pouvez créer des drawables vectoriels dans Android Studio en effectuant un clic droit sur le dossier drawable. dans votre projet, puis en sélectionnant Nouveau > Élément vectoriel. Vous pouvez également importer des fichiers SVG Android Studio en tant que drawable vectoriel.
Résumé généré par Google Bard le 24 juillet 2023

Introduction

Un élément VectorDrawable est un graphique vectoriel défini dans un fichier XML sous la forme d'un ensemble de points, de lignes et de courbes, ainsi que les attributs des informations de couleur. Le principal avantage de l'utilisation d'un drawable vectoriel est l'évolutivité. Vous pouvez la faire évoluer sans perdre en qualité d'affichage. le même fichier est redimensionné pour différentes densités d'écran sans perte de qualité d'image. Les fichiers APK sont donc plus petits et la maintenance est réduite pour les développeurs. Vous pouvez également Utilisez des images vectorielles pour l'animation en utilisant plusieurs fichiers XML au lieu de plusieurs pour chaque résolution d'affichage.

Cette page et la vidéo ci-dessous expliquent comment créer des drawables vectoriels au format XML. Android Studio peut également convertir des fichiers SVG au format drawable vectoriel, comme décrit dans la section en cliquant sur 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 les anciennes versions grâce à la bibliothèque Support Android, qui fournit VectorDrawableCompat et AnimatedVectorDrawableCompat.

À propos de la classe VectorDrawable

VectorDrawable définit un drawable statique. . À l'instar du format SVG, chaque graphique vectoriel est défini comme un arbre. qui se compose 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.

Figure 1 : Exemple de hiérarchie d'un élément drawable vectoriel

L'élément vectoriel 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 charge. 

<!-- 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 génère l'image suivante:

À propos de la classe AnimatedVectorDrawable

AnimatedVectorDrawable ajoute une animation aux propriétés d'un vecteur. graphique. Vous pouvez définir un graphique vectoriel animé comme fichiers de ressources ou sous forme de fichier XML unique définissant l'intégralité du drawable. Pour mieux comprendre, examinez les deux approches: plusieurs fichiers XML et un seul fichier XML.

Plusieurs fichiers XML

Cette approche vous permet de définir trois fichiers XML distincts:

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 Animator utilisés dans le fichier XML d'AnimatedVectorDrawable fichier: rotation.xml et path_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

Cette approche vous permet de fusionner les fichiers XML associés en un seul XML via le format de bundle XML. Au moment de créer l'application, Le tag aapt crée des ressources distinctes et les référence dans le vecteur animé. Cette approche nécessite Build Tools version 24 ou 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. qu'Android 5.0 (niveau d'API 21), ou utiliser fillColor, fillType et les fonctionnalités strokeColor antérieures à Android 7.0 (niveau d'API 24) ; VectorDrawableCompat et AnimatedVectorDrawableCompat sont disponibles via deux bibliothèques Support: support-vector-drawable et animated-vector-drawable, respectivement.

Android Studio 1.4 offre une compatibilité limitée avec les vecteurs des drawables en générant des fichiers PNG au moment de la compilation. Toutefois, le drawable vectoriel Prise en charge des drawables vectoriels animés. Les bibliothèques offrent à la fois flexibilité et Compatibilité étendue : il s'agit d'une bibliothèque Support qui vous permet de l'utiliser avec tous Les versions de la plate-forme Android remontent à Android 2.1 (niveau d'API 7 ou version ultérieure). Pour configurer votre pour utiliser les bibliothèques de compatibilité des vecteurs, ajoutez vectorDrawables à votre fichier build.gradle dans le module de l'application.

Utilisez l'extrait de code suivant pour configurer 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 sur les appareils équipés d'Android 4.0 (niveau d'API 14) ou version ultérieure. La façon dont Android charge des drawables, mais pas tous les emplacements qui acceptent un ID drawable, comme dans un fichier XML. , prend en charge le chargement de drawables vectoriels. La Le package android.support.v7.appcompat a ajouté un numéro pour faciliter l'utilisation des drawables vectoriels. Tout d'abord, lorsque vous utilisez Package android.support.v7.appcompat avec ImageView ou avec des sous-classes telles que ImageButton et FloatingActionButton, vous pouvez Utilisez 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 des drawables au moment de l'exécution, vous pouvez utiliser la classe setImageResource() comme précédemment. AppCompat utilisé(s) et 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 les versions ultérieures sont compatibles avec les fonctionnalités suivantes:

  • Transformation des chemins (évaluateur PathType) : permet de transformer les données. d'un chemin à un autre.
  • Interpolation de chemin : permet de définir une requête un interpolateur (représenté par un tracé) au lieu de l'interpolateur comme LinearInterpolator.

La bibliothèque Support 26.0.0-beta1 et les versions ultérieures sont compatibles avec les fonctionnalités suivantes:

  • Se déplacer le long du trajet : l'objet géométrique peut se déplacer. le long d'un chemin arbitraire, dans le cadre d'une animation.

Exemple de plusieurs fichiers XML utilisant la bibliothèque Support

Les fichiers XML suivants illustrent l'utilisation de 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 d'AnimatedVectorDrawable fichier: 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 créer l'application, Le tag aapt crée des ressources distinctes et les référence dans le vecteur animé. Cette approche nécessite Build Tools version 24 ou 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>