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.
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 Sie so die Größe Ihres 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 sowie Farbinformationen. Der Hauptvorteil von Vektorgrafiken ist die Bildskalierung. Sie kann ohne Qualitätsverlust skaliert werden, d. h., die gleiche Datei wird für unterschiedliche Bildschirmdichten ohne Qualitätsverlust in der Größe angepasst. Dadurch sind die APK-Dateien kleiner und der Wartungsaufwand für die Entwickler ist geringer. Sie können auch Vektorbilder für die Animation verwenden, indem Sie mehrere XML-Dateien anstelle mehrerer Bilder für jede Bildschirmauflösung verwenden.

Auf dieser Seite und im Video unten finden Sie eine Übersicht dazu, wie Sie Vektorgrafiken in XML erstellen. Android Studio kann SVG-Dateien auch in das Vektor-Drawable-Format konvertieren, wie unter indem Sie Vektorgrafiken mit mehreren Punktdichten hinzufügen verwenden.

Android 5.0 (API-Level 21) war die erste Version, die Vektorgrafiken mit VectorDrawable und AnimatedVectorDrawable offiziell unterstützte. Sie können jedoch ältere Versionen mit der Android-Supportbibliothek unterstützen, die die Klassen VectorDrawableCompat und AnimatedVectorDrawableCompat bereitstellt.

Klasse „VectorDrawable“

Mit VectorDrawable wird ein statisches Zeichnenobjekt definiert. Ä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 werden in der Reihenfolge gezeichnet, in der 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 für 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:

Klasse „AnimatedVectorDrawable“

Mit AnimatedVectorDrawable werden den Eigenschaften einer Vektorgrafik Animationen hinzugefügt. Sie können eine animierte Vektorgrafik als drei separate Ressourcendateien oder als einzelne XML-Datei, die das gesamte Drawable definiert. Sehen wir uns beide Ansätze genauer 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 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>
  • Animator-XML-Dateien, die in der XML-Datei des AnimatedVectorDrawable verwendet werden: 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. Beim Erstellen der App werden mit dem aapt-Tag separate Ressourcen erstellt und im animierten Vektor darauf verwiesen. 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. Die Support-Bibliotheken für Vektorgrafiken und animierte Vektorgrafiken bieten jedoch sowohl Flexibilität als auch breite Kompatibilität. Da es sich um eine Support-Bibliothek handelt, können Sie sie mit allen Android-Plattformversionen ab Android 2.1 (API-Ebene 7 und höher) verwenden. Wenn Sie Ihre App so konfigurieren möchten, dass sie Vektor-Support-Bibliotheken verwendet, fügen Sie der Datei build.gradle im App-Modul das Element vectorDrawables hinzu.

Verwenden Sie das folgende Code-Snippet, um das vectorDrawables-Element zu konfigurieren:

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

Sie können VectorDrawableCompat und AnimatedVectorDrawableCompat auf allen Geräten mit Android 4.0 (API-Level 14) und höher verwenden. Da Android Drawables auf unterschiedliche Weise lädt, ist das Laden von Vektor-Drawables nicht an allen Stellen möglich, an denen eine Drawable-ID akzeptiert wird, z. B. in einer XML-Datei. 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 mit der Supportbibliothek

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

In der folgenden XML-Datei wird gezeigt, wie eine einzelne XML-Datei zum Animieren einer Vektorgrafik verwendet wird. Beim Erstellen der App werden mit dem aapt-Tag separate Ressourcen erstellt und im animierten Vektor darauf verwiesen. Für diesen Ansatz sind Build Tools 24 oder höher erforderlich. Die Ausgabe ist abwärtskompatibel.

Beispiel für eine einzelne XML-Datei mit der Supportbibliothek 

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