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
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.
![](https://developer.android.google.cn/static/images/guide/topics/graphics/vectorpath.png?authuser=9&hl=de)
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:
![](https://developer.android.google.cn/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=9&hl=de)
Ü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:
- Eine
VectorDrawable
-XML-Datei. -
Eine
AnimatedVectorDrawable
-XML-Datei, die definiert das ZielVectorDrawable
, die zu animierende Zielpfade und -gruppen, Eigenschaften und AnimationenObjectAnimator
-Objekten oderAnimatorSet
-Objekte. - 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
Datei:
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 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>