Wichtige Fakten
- Ein Vektor-Drawable ist eine Vektorgrafik, die in einer XML-Datei als Gruppe von Punkten, Linien und Kurven sowie den zugehörigen Farbinformationen definiert ist.
- Vektor-Drawables sind skalierbar, d. h. ihre Größe kann ohne Qualitätsverlust angepasst werden. Dadurch eignen sie sich ideal für die Verwendung in Android-Apps, da du dadurch die Größe deiner APK-Dateien reduzieren und die Leistung verbessern kannst.
- Du kannst Vektor-Drawables in Android Studio erstellen, indem du in deinem Projekt mit der rechten Maustaste auf den Drawable-Ordner klickst und „New“ > „Vector-Asset“ auswählst. Du kannst auch SVG-Dateien als Vektor-Drawables in Android Studio importieren.
Funktionen vorstellen
EineVectorDrawable
ist eine Vektorgrafik, die in einer XML-Datei als Gruppe von Punkten, Linien und Kurven mit den zugehörigen Farbinformationen definiert ist. Der Hauptvorteil der Verwendung eines Vektor-Drawables ist die Skalierbarkeit des Bildes. Sie kann ohne Verlust der Anzeigequalität 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 Vektorbilder zur Animation nutzen, indem Sie mehrere XML-Dateien anstelle mehrerer Bilder für jede Anzeigeauflösung verwenden.
Diese Seite und das Video unten bieten einen Überblick über das Erstellen von Vektor-Drawables in XML. In Android Studio können SVG-Dateien auch in das Vektor-Drawable-Format konvertiert werden. Dies wird unter Vektorgrafiken mit mehreren Dichten hinzufügen beschrieben.
Android 5.0 (API-Level 21) war die erste Version, die offiziell Vektor-Drawables mit VectorDrawable
und AnimatedVectorDrawable
unterstützt. Ältere Versionen kannst du jedoch über die Android-Supportbibliothek unterstützen, die die Klassen VectorDrawableCompat
und AnimatedVectorDrawableCompat
bereitstellt.
Informationen zur Klasse "VectorDrawable"
VectorDrawable
definiert ein statisches Drawable-Objekt. Ähnlich wie beim SVG-Format ist jede Vektorgrafik als Baumhierarchie definiert, die aus den Objekten path
und group
besteht.
Jedes path
enthält die Geometrie des Umrisses des Objekts und group
enthält Details für die Transformation. Alle Pfade werden in der gleichen Reihenfolge gezeichnet, in der sie in der XML-Datei aufgeführt sind.
Das Tool Vector Asset Studio bietet eine einfache Möglichkeit, dem Projekt eine Vektorgrafik als XML-Datei hinzuzufügen.
Beispiel-XML
Hier siehst du ein Beispiel für eine VectorDrawable
-XML-Datei, die das 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 rendert das folgende Bild:
Über die Klasse "animateVectorDrawable"
Mit AnimatedVectorDrawable
wird den Eigenschaften einer Vektorgrafik eine Animation hinzugefügt. Du kannst eine animierte Vektorgrafik als drei separate Ressourcendateien oder als einzelne XML-Datei definieren, die das gesamte Drawable definiert. Sehen wir uns zum besseren Verständnis die beiden 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, in der die Ziel-VectorDrawable
, die zu animierenden Zielpfade und -gruppen, die Eigenschaften und die Animationen alsObjectAnimator
-Objekte oderAnimatorSet
-Objekte definiert sind. - Eine Animations-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 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:
rotation.xml
undpath_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 über das XML-Bundle-Format in einer einzigen XML-Datei zusammenführen. Beim Erstellen der App werden mit dem Tag aapt
separate Ressourcen erstellt und im animierten Vektor darauf verwiesen. 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>
Abwärtskompatibilitätslösung für Vektor-Drawables
Zur Unterstützung von Vektor-Drawable und animierten Vektor-Drawables auf Geräten mit Plattformversionen unter Android 5.0 (API-Level 21) oder zur Verwendung der Funktionen fillColor
, fillType
und strokeColor
unter Android 7.0 (API-Level 24) sind VectorDrawableCompat
und AnimatedVectorDrawableCompat
über zwei unterstützte Bibliotheken verfügbar: support-vector-drawable
und animated-vector-drawable
.
Mit Android Studio 1.4 wurde die Kompatibilitätsunterstützung für Vektor-Drawables eingeschränkt, da PNG-Dateien zum Zeitpunkt der Erstellung generiert wurden. Die Unterstützungsbibliotheken für Vektor-Drawable und animierte Vektor-Drawables bieten jedoch sowohl Flexibilität als auch umfassende Kompatibilität – es handelt sich um eine Supportbibliothek, die Sie mit allen Android-Plattformversionen ab Android 2.1 (API-Level 7 oder höher) verwenden können. Wenn Sie Ihre App für die Verwendung von Vektor-Supportbibliotheken konfigurieren möchten, fügen Sie der Datei build.gradle
im App-Modul das Element vectorDrawables
hinzu.
Verwende das folgende Code-Snippet, um das vectorDrawables
-Element 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
und AnimatedVectorDrawableCompat
auf allen Geräten mit Android 4.0 (API-Level 14) und höher verwenden. Die Art und Weise, wie Android Drawables lädt, unterstützt nicht jeder Ort, der eine Drawable-ID akzeptiert, z. B. in einer XML-Datei, das Laden von Vektor-Drawables. Das Paket android.support.v7.appcompat
hat eine Reihe von Funktionen hinzugefügt, die die Verwendung von Vektor-Drawables erleichtern. Wenn du das Paket android.support.v7.appcompat
mit ImageView
oder mit Unterklassen wie ImageButton
und FloatingActionButton
verwendest, kannst du das neue app:srcCompat
-Attribut verwenden, um auf Vektor-Drawables sowie alle anderen Drawables zu verweisen, die in android:src
verfügbar sind:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Zum Ändern von Drawables zur Laufzeit können Sie wie zuvor die Methode setImageResource()
verwenden. Mit AppCompat
und app:srcCompat
kannst du Vektor-Drawables ganz einfach in deine App einbinden.
Die Support Library 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 transformieren.
- Pfadinterpolation: Wird verwendet, um einen flexiblen Interpolator (dargestellt als Pfad) anstelle der systemdefinierten Interpolatoren wie LinearInterpolator zu definieren.
Die Support Library 26.0.0-beta1 und höher unterstützt die folgenden Funktionen:
- Entlang des Pfads bewegen Das Geometrieobjekt kann sich im Rahmen einer Animation entlang eines beliebigen Pfads bewegen.
Beispiel für mehrere XML-Dateien unter Verwendung der Support Library
Die folgenden XML-Dateien veranschaulichen, wie mehrere XML-Dateien zum Animieren einer Vektorgrafik verwendet werden.
- 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:
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 mit dem Tag aapt
separate Ressourcen erstellt und im animierten Vektor darauf verwiesen. Für diesen Ansatz sind Build Tools 24 oder höher erforderlich und 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>