Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Vektor-Drawables – Übersicht

Wichtige Fakten

Ein Vektordrawable ist eine Vektorgrafik, die in einer XML-Datei als eine Reihe von Punkten, Linien und Kurven zusammen mit den zugehörigen Farbinformationen definiert ist.
Vektordrawables sind skalierbar. Das heißt, ihre Größe kann ohne Verlust der Anzeigequalität geändert werden. Dadurch eignen sie sich ideal für die Verwendung in Android-Apps, da sie dazu beitragen können, die Größe von APK-Dateien zu reduzieren und die Leistung zu verbessern.
Sie können Vektordrawables in Android Studio erstellen, indem Sie mit der rechten Maustaste auf den Ordner „drawable“ in Ihrem Projekt klicken und „New > Vector Asset“ (Neu > Vektor-Asset) auswählen. Sie können auch SVG-Dateien als Vektordrawables in Android Studio importieren.

Zusammenfassung von Google Bard am 24. Juli 2023 erstellt

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 Hauptvorteil der Verwendung eines Vektordrawables ist die Skalierbarkeit des Bildes. Es kann ohne Verlust der Anzeigequalität skaliert werden. Das bedeutet, dass die Größe derselben Datei für verschiedene Bildschirmdichten geändert wird, ohne dass die Bildqualität darunter leidet. Das führt zu kleineren APK-Dateien und weniger Wartungsaufwand für Entwickler. Sie können Vektorgrafiken auch für Animationen verwenden, indem Sie mehrere XML-Dateien anstelle von mehreren Bildern für jede Bildschirmauflösung verwenden.

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

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

VectorDrawable-Klasse

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

Abbildung 1 : Beispielhierarchie eines Vektordrawable-Assets

Mit dem Vector asset studio-Tool können Sie dem Projekt auf einfache Weise eine Vektorgrafik als XML-Datei hinzufügen.

Beispiel für XML

Hier ist ein Beispiel für eine VectorDrawable XML-Datei, die ein Bild einer Batterie 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:

AnimatedVectorDrawable-Klasse

AnimatedVectorDrawable fügt den Eigenschaften einer Vektorgrafik Animationen hinzu. Sie können eine animierte Vektorgrafik als drei separate Ressourcendateien oder als eine einzelne XML-Datei definieren, die das gesamte Drawable definiert. Sehen wir uns beide Ansätze an, um sie besser zu verstehen: mehrere XML-Dateien und eine einzelne XML-Datei.

Mehrere XML-Dateien

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

Eine VectorDrawable-XML-Datei.
Eine AnimatedVectorDrawable XML-Datei, die das Ziel VectorDrawable, die Zielpfade und -gruppen für die Animation, die Eigenschaften und die Animationen definiert, die als ObjectAnimator Objekte oder AnimatorSet Objekte definiert sind.
Eine Animator-XML-Datei.

Beispiel für mehrere XML-Dateien

Die folgenden XML-Dateien veranschaulichen 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 von 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

Bei 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 erstellt das aapt Tag separate Ressourcen und verweist in der animierten Vektorgrafik darauf. Für diesen Ansatz sind Build Tools 24 oder höher erforderlich und 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 Vektordrawables

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

In Android Studio 1.4 wurde eine eingeschränkte Kompatibilitätsunterstützung für Vektor Drawables eingeführt, indem beim Erstellen PNG-Dateien generiert wurden. Die Supportbibliotheken für Vektordrawables und animierte Vektordrawables bieten jedoch sowohl Flexibilität als auch breite Kompatibilität. Da es sich um eine Supportbibliothek handelt, können Sie sie mit allen Android-Plattformversionen bis zurück zu Android 2.1 (API-Level 7+) verwenden. Wenn Sie Ihre App für die Verwendung von Vektorsupportbibliotheken konfigurieren möchten, fügen Sie das Element vectorDrawables in der Datei build.gradle im App-Modul hinzu.

Verwenden Sie den folgenden 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, wird das Laden von Vektordrawables nicht überall unterstützt, wo eine Drawable-ID akzeptiert wird, z. B. in einer XML Datei. Das android.support.v7.appcompat Paket enthält eine Reihe von Funktionen, die die Verwendung von Vektordrawables erleichtern. Wenn Sie das Paket android.support.v7.appcompat mit ImageView oder mit Unterklassen wie ImageButton und FloatingActionButton verwenden, können Sie das neue Attribut app:srcCompat verwenden, um auf Vektordrawables sowie auf alle anderen Drawables zu verweisen, die für android:src verfügbar sind:

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

Wenn Sie Drawables zur Laufzeit ändern möchten, können Sie wie zuvor die setImageResource() Methode verwenden. Die Verwendung von AppCompat und app:srcCompat ist die sicherste Methode, um Vektordrawables in Ihre App zu integrieren.

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

Pfadmorphing (PathType-Evaluator) : Wird verwendet, um einen Pfad in einen anderen zu morphen.
Pfadinterpolation : Wird verwendet, um einen flexiblen Interpolator (als Pfad dargestellt) anstelle der vom System definierten Interpolatoren wie LinearInterpolator zu definieren.

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

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

Beispiel für mehrere XML-Dateien mit der Supportbibliothek

Die folgenden XML-Dateien veranschaulichen den Ansatz, mehrere XML-Dateien zu verwenden 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 von 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 veranschaulicht den Ansatz, eine einzelne XML-Datei zu verwenden, um eine Vektorgrafik zu animieren. Beim Erstellen der App erstellt das aapt Tag separate Ressourcen und verweist in der animierten Vektorgrafik darauf. Für diesen Ansatz sind Build Tools 24 oder höher erforderlich und 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>

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

Wichtige Fakten

Einführung

VectorDrawable-Klasse

Beispiel für XML

AnimatedVectorDrawable-Klasse

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 Vektordrawables

Groovy

Kotlin

Groovy

Kotlin

Beispiel für mehrere XML-Dateien mit der Supportbibliothek

Einzelne XML-Datei

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

Vektor-Drawables – Übersicht