Vektor-Drawables – Übersicht

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie Grafiken in „Compose“ anzeigen lassen.
<ph type="x-smartling-placeholder"></ph> ImageVector →

Wichtige Fakten

  • Ein Vektor-Drawable ist eine Vektorgrafik, die in einer XML-Datei als eine Reihe von Punkten, Linien und Kurven und die zugehörigen Farbinformationen an.
  • Vektor-Drawables sind skalierbar, d. h. ihre Größe kann ohne Qualitätsverlust angepasst werden. Dadurch eignen sie sich ideal für Android-Apps, da ihr die Größe eures APK-Dateien herunterladen und die Leistung verbessern.
  • Du kannst Vektor-Drawables in Android Studio erstellen, indem du mit der rechten Maustaste auf den Drawable-Ordner klickst. in Ihrem Projekt auf und klicken Sie auf „New“ (Neu) > Vektor-Asset. Sie können SVG-Dateien auch in Android Studio als Vektor-Drawables
Von Google Bard erstellte Zusammenfassung am 24. Juli 2023

Einführung

VectorDrawable ist eine Vektorgrafik, in einer XML-Datei als eine Reihe von Punkten, Linien und Kurven samt Farbinformationen. Der Hauptvorteil eines Vektor-Drawables ist das Skalierbarkeit. Sie kann ohne Qualitätsverlust skaliert werden, d. h., Die Größe derselben Datei wird ohne Verlust der Bildqualität an unterschiedliche Bildschirmdichten angepasst. Dadurch sind die APK-Dateien kleiner und der Wartungsaufwand für die Entwickler ist geringer. Sie können auch Verwenden Sie statt mehrerer XML-Dateien Vektorbilder zur Animation. Bilder für jede Displayauflösung.

Diese Seite und das Video unten bieten einen Überblick über das Erstellen von Vektor-Drawables in XML. Android Studio kann SVG-Dateien auch in das Vektor-Drawable-Format konvertieren, wie unter mit Vektorgrafiken mit mehreren Dichten hinzufügen.

Android 5.0 (API-Level 21) war die erste Version, die offiziell Vektor-Drawables mit VectorDrawable und AnimatedVectorDrawable, aber können Sie ältere Versionen mit der Android Support Library unterstützen, die die VectorDrawableCompat und AnimatedVectorDrawableCompat Klassen.

Über die Klasse "VectorDrawable"

VectorDrawable definiert ein statisches Drawable -Objekt enthält. Ähnlich wie beim SVG-Format wird jede Vektorgrafik als Baumstruktur definiert Hierarchie, die aus path- und group-Objekten besteht. Jedes path enthält die Geometrie des Umrisses des Objekts und group enthält Details zur Transformation. Alle Pfade sind gezeichnet in derselben Reihenfolge an, wie sie in der XML-Datei erscheinen.

Abbildung 1: Beispielhierarchie eines Vektor-Drawable-Assets

Das Vektor-Asset Studio-Tool eine einfache Möglichkeit, dem Projekt eine Vektorgrafik hinzuzufügen. als XML-Datei hochladen.

Beispiel-XML

Hier ist ein Beispiel für eine VectorDrawable-XML-Datei, die ein Bild rendert. eines Akkus im Lademodus. 

<!-- 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>

Diese XML rendert das folgende Bild:

Über die Klasse "animateVectorDrawable"

AnimatedVectorDrawable fügt den Eigenschaften eines Vektors Animationen hinzu Grafik. Sie können eine animierte Vektorgrafik als drei separate Ressourcendateien oder als einzelne XML-Datei, die das gesamte Drawable definiert. Lassen Sie uns Sehen Sie sich zum besseren Verständnis beide Ansätze an: Mehrere XML-Dateien und Einzelne XML-Datei.

Mehrere XML-Dateien

Mit diesem Ansatz können Sie drei separate XML-Dateien definieren:

Beispiel für mehrere XML-Dateien

Die folgenden XML-Dateien zeigen die Animation einer Vektorgrafik.

  • XML-Datei von 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>
  • XML-Datei von animateVectorDrawable: 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>
  • Animations-XML-Dateien, die in der XML-Datei von animateVectorDrawable verwendet werden Datei: rotation.xml und 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>

Einzelne XML-Datei

Auf diese Weise kannst du die zugehörigen XML-Dateien zu einem einzigen XML-Datei im XML-Bundle-Format. Bei der Entwicklung der App Mit dem Tag aapt werden separate Ressourcen erstellt und im animierten Vektor. Für diesen Ansatz sind Build Tools 24 oder höher erforderlich. Die Ausgabe ist abwärtskompatibel.

Beispiel für eine einzelne XML-Datei 

<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>

Abwärtskompatibilitätslösung für Vektor-Drawables

Zur Unterstützung von Vektor-Drawable und animierten Vektor-Drawables auf Geräten mit niedrigeren Plattformversionen als Android 5.0 (API-Level 21) oder fillColor, fillType und strokeColor-Funktionen vor Android 7.0 (API-Level 24), VectorDrawableCompat und AnimatedVectorDrawableCompat sind über zwei Supportbibliotheken verfügbar: support-vector-drawable und animated-vector-drawable, .

Eingeschränkte Kompatibilitätsunterstützung für Vektoren mit Android Studio 1.4 durch Erzeugen von PNG-Dateien zum Build-Zeitpunkt. Das Vektor-Drawable Unterstützung für animierte Vektor-Drawables bieten sowohl Flexibilität als auch umfassende Kompatibilität – es ist eine Support-Bibliothek, die Sie mit allen Android-Plattformversionen bis Android 2.1 (API-Level 7 oder höher). So konfigurieren Sie Ihr App, um Vektor-Supportbibliotheken zu verwenden, füge die vectorDrawables hinzu in die Datei build.gradle im App-Modul ein.

Verwende das folgende Code-Snippet, um die vectorDrawables zu konfigurieren :

Cool

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Cool

// 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")
    }
}

Du kannst VectorDrawableCompat verwenden und AnimatedVectorDrawableCompat auf allen auf Geräten mit Android 4.0 (API-Level 14) und höher. Die Art und Weise, wie Android lädt Drawables, nicht jeder Ort, der eine Drawable-ID akzeptiert, wie z. B. in einer XML-Datei -Datei unterstützt das Laden von Vektor-Drawables. Die android.support.v7.appcompat Paket hat eine Nummer hinzugefügt um die Verwendung von Vektor-Drawables zu erleichtern. Erstens: Wenn Sie android.support.v7.appcompat Paket mit ImageView oder mit abgeleiteten Klassen wie ImageButton und FloatingActionButton, Sie können das neue Attribut app:srcCompat verwenden, um auf Vektor-Drawables zu verweisen sowie alle anderen für android:src verfügbaren Drawables: 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

Um Drawables zur Laufzeit zu ändern, kannst du die setImageResource() wie zuvor beschrieben. AppCompat wird verwendet und app:srcCompat ist die sicherste Methode für die Integration Vektor-Drawables in deine App ein.

Die Support Library 25.4.0 und höher unterstützt die folgenden Funktionen:

  • Pfad-Morphing (PathType-Evaluator) zum Morphen verwendet in einen anderen Pfad.
  • Pfadinterpolation: Wird verwendet, um eine flexible Interpolator (dargestellt als Pfad) anstelle des vom System definierten Interpolatoren wie LinearInterpolator an.

Die Support Library 26.0.0-beta1 und höher unterstützt die folgenden Funktionen:

  • Entlang des Pfades bewegen: Das Geometrieobjekt kann sich bewegen, als Teil einer Animation entlang eines beliebigen Pfads.

Beispiel für mehrere XML-Dateien unter Verwendung der Support Library

Die folgenden XML-Dateien veranschaulichen die Vorgehensweise für die Verwendung mehrerer XML-Dateien. Vektorgrafiken zu erstellen.

  • XML-Datei von 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>
  • XML-Datei von animateVectorDrawable: 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>
  • Animator-XML-Datei, die in der XML-Datei von animateVectorDrawable verwendet wird Datei: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Einzelne XML-Datei

Die folgende XML-Datei veranschaulicht den Ansatz für die Verwendung einer einzelnen XML-Datei. Vektorgrafiken zu erstellen. Bei der Entwicklung der App Mit dem Tag aapt werden separate Ressourcen erstellt und im animierten Vektor. Für diesen Ansatz sind Build Tools 24 oder höher erforderlich. Die Ausgabe ist abwärtskompatibel.

Beispiel einer einzelnen XML-Datei mit der Support Library 

<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>