Android
VectorDrawable und AnimatedVectorDrawable
Suche…
Grundlegende VectorDrawable
Ein VectorDrawable
sollte aus mindestens einem <path>
-Tag bestehen, das eine Form definiert
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M0,24 l12,-24 l12,24 z"/>
</vector>
Dies würde ein schwarzes Dreieck erzeugen:
Verwenden
Ein <clip-path>
definiert eine Form, die als Fenster fungiert, und lässt nur Teile eines <path>
anzeigen, wenn sie sich innerhalb der <clip-path>
-Form befinden und den Rest abschneiden.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<clip-path
android:name="square clip path"
android:pathData="M6,6 h12 v12 h-12 z"/>
<path
android:name="triangle"
android:fillColor="#FF000000"
android:pathData="M0,24 l12,-24 l12,24 z"/>
</vector>
In diesem Fall erzeugt der <path>
ein schwarzes Dreieck, der <clip-path>
definiert jedoch eine kleinere quadratische Form und lässt nur einen Teil des Dreiecks durchscheinen:
Stichworte
Mit einem <group>
-Tag können Sie die Skalierung, Drehung und Position eines oder mehrerer Elemente eines VectorDrawable
anpassen:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M0,0 h4 v4 h-4 z"
android:fillColor="#FF000000"/>
<group
android:name="middle square group"
android:translateX="10"
android:translateY="10"
android:rotation="45">
<path
android:pathData="M0,0 h4 v4 h-4 z"
android:fillColor="#FF000000"/>
</group>
<group
android:name="last square group"
android:translateX="18"
android:translateY="18"
android:scaleX="1.5">
<path
android:pathData="M0,0 h4 v4 h-4 z"
android:fillColor="#FF000000"/>
</group>
</vector>
Der obige Beispielcode enthält drei identische <path>
-Tags, die alle schwarze Quadrate beschreiben. Das erste Quadrat ist nicht angepasst. Das zweite Quadrat wird in ein <group>
-Tag gehüllt, das es bewegt und um 45 ° dreht. Das dritte Quadrat wird in ein <group>
-Tag eingeschlossen, das es bewegt und horizontal um 50% streckt. Das Ergebnis ist wie folgt:
Ein <group>
-Tag kann mehrere <path>
und <clip-path>
-Tags enthalten. Es kann sogar eine andere <group>
.
Grundlegende AnimatedVectorDrawable
Ein AnimatedVectorDrawable
erfordert mindestens 3 Komponenten:
- Eine
VectorDrawable
dieVectorDrawable
wird - Ein
objectAnimator
der definiert, welche Eigenschaft geändert werden soll und wie - Das
AnimatedVectorDrawable
selbst, das denobjectAnimator
mit demVectorDrawable
, um die Animation zu erstellen
Im Folgenden wird ein Dreieck erstellt, das seine Farbe von Schwarz nach Rot übergibt.
Die VectorDrawable
, Dateiname: triangle_vector_drawable.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:name="triangle"
android:fillColor="@android:color/black"
android:pathData="M0,24 l12,-24 l12,24 z"/>
</vector>
Der objectAnimator
, Dateiname: color_change_animator.xml
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="fillColor"
android:duration="2000"
android:repeatCount="infinite"
android:valueFrom="@android:color/black"
android:valueTo="@android:color/holo_red_light"/>
Die AnimatedVectorDrawable
, Dateiname: triangle_animated_vector.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/triangle_vector_drawable">
<target
android:animation="@animator/color_change_animator"
android:name="triangle"/>
</animated-vector>
Beachten Sie, dass das <target>
android:name="triangle"
angibt, das dem <path>
in der VectorDrawable
. Eine VectorDrawable
kann mehrere Elemente enthalten. Mit der Eigenschaft android:name
wird festgelegt, auf welches Element abgezielt werden soll.
Ergebnis:
Striche verwenden
Die Verwendung des SVG-Strichs erleichtert das Erstellen eines Vektors, der mit einer einheitlichen Hublänge gemäß den Material Design-Richtlinien gezeichnet werden kann :
Konsistente Strichgewichte sind der Schlüssel zur Vereinheitlichung der gesamten Systemsymbolfamilie. Behalten Sie eine Breite von 2 dp für alle Striche, einschließlich Kurven, Winkel sowie innere und äußere Striche bei.
So erstellen Sie beispielsweise mit Strichen ein Pluszeichen:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#FF000000"
android:strokeColor="#F000"
android:strokeWidth="2"
android:pathData="M12,0 V24 M0,12 H24" />
</vector>
strokeColor
definiert die Farbe des Strichs.strokeWidth
definiert die Breite (in dp) des Strichs (in diesem Fall 2dp, wie von den Richtlinien vorgeschlagen).pathData
beschreiben wir unser SVG-Image:M12,0
bewegt den "Cursor" an die Position 12,0V24
erzeugt eine vertikale Linie zur Position 12, 24
usw. finden Sie in der SVG-Dokumentation und in diesem nützlichen Tutorial "SVG-Pfad" von w3schools , um mehr über die spezifischen Pfadbefehle zu erfahren.
Als Ergebnis erhielten wir dieses No-Frills-Plus-Zeichen:
Dies ist besonders nützlich , wenn Sie ein AnimatedVectorDrawable
erstellen AnimatedVectorDrawable
, da Sie jetzt mit einem einzelnen Strich mit einer einheitlichen Länge anstelle eines sonst komplizierten Pfads arbeiten.
Vektorkompatibilität durch AppCompat
Einige Voraussetzungen im build.gradle
für Vektoren, die bis API 7 für VectorDrawables und API 13 für AnimatedVectorDrawables funktionieren (mit einigen Einschränkungen):
//Build Tools has to be 24+
buildToolsVersion '24.0.0'
defaultConfig {
vectorDrawables.useSupportLibrary = true
generatedDensities = []
aaptOptions {
additionalParameters "--no-version-vectors"
}
}
dependencies {
compile 'com.android.support:appcompat-v7:24.1.1'
}
In Ihrer layout.xml
:
<ImageView
android:id="@+id/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
appCompat:src="@drawable/vector_drawable"
android:contentDescription="@null" />