Android
VectorDrawable und AnimatedVectorDrawable

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 die VectorDrawable wird
• Ein objectAnimator der definiert, welche Eigenschaft geändert werden soll und wie
• Das AnimatedVectorDrawable selbst, das den objectAnimator mit dem VectorDrawable , 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,0

• V24 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" />