Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Vektor-Drawables – Übersicht

Wichtige Fakten

Ein Vektor-Drawable ist eine Vektorgrafik, die in einer XML-Datei als eine Reihe von Punkten, Linien und Kurven zusammen mit den zugehörigen Farbinformationen definiert ist.
Vektor-Drawables sind skalierbar, d. h. ihre Größe kann ohne Verlust der Anzeigequalität geändert werden. Daher eignen sie sich ideal für die Verwendung in Android-Apps, da sie die Größe Ihrer APK-Dateien reduzieren und die Leistung verbessern können.
Sie können Vektor-Drawables in Android Studio erstellen, indem Sie auf den Drawable-Ordner in Ihrem Projekt rechtsklicken und „Neu“ > „Vektor-Asset“ auswählen. Du kannst SVG-Dateien auch als Vektor-Drawables in Android Studio importieren.

Zusammenfassung erstellt von Google Bard am 24. Juli 2023

Einführung

Ein VectorDrawable ist eine Vektorgrafik, die in einer XML-Datei als eine Reihe von Punkten, Linien und Kurven zusammen mit den zugehörigen Farbinformationen definiert ist. Der größte Vorteil eines Vektor-Drawables ist die Skalierbarkeit des Bildes. Sie kann ohne Qualitätsverlust skaliert werden. Das bedeutet, dass die Größe derselben Datei für verschiedene Bildschirmdichten ohne Bildqualität angepasst wird. Das führt zu kleineren APK-Dateien und weniger Wartungsaufwand für Entwickler. Du kannst Vektor-Images auch für Animationen verwenden, indem du mehrere XML-Dateien anstelle mehrerer Bilder für jede Bildschirmauflösung verwendest.

Auf dieser Seite und im Video unten finden Sie eine Übersicht zum Erstellen von Vektor-Drawables in XML. Android Studio kann SVG-Dateien auch in das Vektor-Drawable-Format konvertieren, wie unter Vektorgrafiken mit mehreren Dichten hinzufügen beschrieben.

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

Informationen zur VectorDrawable-Klasse

VectorDrawable definiert ein statisches Drawable-Objekt. Ähnlich wie beim SVG-Format wird jede Vektorgrafik als Baumhierarchie definiert, die aus path- und group-Objekten besteht. Jedes path enthält die Geometrie des Objektumrisses und group enthält Details zur Transformation. Alle Pfade werden in der Reihenfolge gezeichnet, in der sie in der XML-Datei angezeigt werden.

Abbildung 1. Beispielhierarchie eines Vektor-Drawable-Assets

Mit dem Tool Vector Asset Studio können Sie dem Projekt ganz einfach eine Vektorgrafik als XML-Datei hinzufügen.

Beispiel-XML

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

<!-- 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-Datei rendert das folgende Bild:

Informationen zur Klasse „AnimatedVectorDrawable“

AnimatedVectorDrawable fügt den Attributen einer Vektorgrafik Animationen hinzu. Du kannst eine animierte Vektorgrafik als drei separate Ressourcendateien oder als einzelne XML-Datei definieren, 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:

Eine VectorDrawable-XML-Datei.
Eine AnimatedVectorDrawable-XML-Datei, die das Ziel-VectorDrawable, die zu animierenden Zielpfade und -gruppen, die Attribute und die als ObjectAnimator- oder AnimatorSet-Objekte definierten Animationen definiert.
Eine Animator-XML-Datei.

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

Mit diesem Ansatz können Sie die zugehörigen XML-Dateien über das XML-Bundle-Format in einer einzigen XML-Datei zusammenführen. Beim Erstellen der App werden durch das Tag aapt separate Ressourcen erstellt, auf die im animierten Vektor verwiesen wird. 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>

Lösung für die Abwärtskompatibilität von Vektor-Drawables

Wenn du Vektor-Drawables und animierte Vektor-Drawables auf Geräten mit Plattformversionen vor Android 5.0 (API-Level 21) unterstützen oder die Funktionen fillColor, fillType und strokeColor unter Android 7.0 (API-Level 24) verwenden möchtest, sind VectorDrawableCompat und AnimatedVectorDrawableCompat über zwei Support-Bibliotheken verfügbar: support-vector-drawable bzw. animated-vector-drawable.

In Android Studio 1.4 wurde eine eingeschränkte Kompatibilitätsunterstützung für Vektor-Drawables eingeführt, indem PNG-Dateien zur Build-Zeit generiert werden. Die Support-Bibliotheken für Vektor-Drawables und animierte Vektor-Drawables bieten jedoch sowohl Flexibilität als auch umfassende Kompatibilität. Da es sich um eine Support-Bibliothek handelt, können Sie sie mit allen Android-Plattformversionen bis Android 2.1 (API-Level 7+) verwenden. Wenn Sie Ihre App für die Verwendung von Vektor-Support-Bibliotheken konfigurieren möchten, fügen Sie das Element vectorDrawables in die Datei build.gradle im App-Modul ein.

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. Aufgrund der Art und Weise, wie Android Drawables lädt, wird das Laden von Vektor-Drawables nicht an jeder Stelle unterstützt, an der eine Drawable-ID akzeptiert wird, z. B. in einer XML-Datei. Das Paket android.support.v7.appcompat enthält eine Reihe von Funktionen, die die Verwendung von Vektor-Drawables vereinfachen. Wenn Sie das Paket android.support.v7.appcompat mit ImageView oder mit abgeleiteten Klassen wie ImageButton und FloatingActionButton verwenden, können Sie mit dem neuen Attribut app:srcCompat auf Vektor-Drawables sowie auf alle anderen für android:src verfügbaren Drawables verweisen:

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

Wenn du Drawables zur Laufzeit ändern möchtest, kannst du wie bisher die Methode setImageResource() verwenden. Die Verwendung von AppCompat und app:srcCompat ist die sicherste Methode, um Vektor-Drawables in Ihre App einzubinden.

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

Pfad-Morphing (PathType-Evaluator): Wird verwendet, um einen Pfad in einen anderen Pfad zu morphen.
Path Interpolation: Wird verwendet, um einen flexiblen Interpolator (als Pfad dargestellt) anstelle der systemdefinierten Interpolatoren wie LinearInterpolator zu definieren.

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

Entlang eines Pfads bewegen: Das Geometrieobjekt kann sich im Rahmen einer Animation entlang eines beliebigen Pfads bewegen.

Beispiel für mehrere XML-Dateien mit der Support-Bibliothek

Die folgenden XML-Dateien zeigen, wie mehrere XML-Dateien verwendet werden, um eine Vektorgrafik zu animieren.

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 des AnimatedVectorDrawable verwendet wird: rotation.xml

<objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Einzelne XML-Datei

Die folgende XML-Datei zeigt, wie eine einzelne XML-Datei zum Animieren einer Vektorgrafik verwendet wird. Beim Erstellen der App werden durch das Tag aapt separate Ressourcen erstellt, auf die im animierten Vektor verwiesen wird. 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 Support-Bibliothek

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

Vektor-Drawables – Übersicht Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Wichtige Fakten

Einführung

Informationen zur VectorDrawable-Klasse

Beispiel-XML

Informationen zur Klasse „AnimatedVectorDrawable“

Mehrere XML-Dateien

Beispiel für mehrere XML-Dateien

Einzelne XML-Datei

Beispiel für eine einzelne XML-Datei

Lösung für die Abwärtskompatibilität von Vektor-Drawables

Groovy

Kotlin

Groovy

Kotlin

Beispiel für mehrere XML-Dateien mit der Support-Bibliothek

Einzelne XML-Datei

Beispiel für eine einzelne XML-Datei mit der Support-Bibliothek

Vektor-Drawables – Übersicht