Android
VectorDrawable i AnimatedVectorDrawable

Basic VectorDrawable

VectorDrawable powinien składać się z co najmniej jednego <path> definiującego kształt

<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>

W ten sposób powstałby czarny trójkąt:

Za pomocą

<clip-path> definiuje kształt, który działa jak okno, pozwalając tylko częściom <path> pokazywać, czy są w kształcie <clip-path> i odcinając resztę.

<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>

W tym przypadku <path> tworzy czarny trójkąt, ale <clip-path> definiuje mniejszy kwadratowy kształt, pozwalając tylko na wyświetlanie części trójkąta:

tagi

Znacznik <group> umożliwia dostosowanie skalowania, obrotu i położenia jednego lub więcej elementów VectorDrawable :

<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>

Powyższy przykładowy kod zawiera trzy identyczne <path> , wszystkie opisujące czarne kwadraty. Pierwszy kwadrat jest niedostosowany. Drugi kwadrat jest owinięty znacznikiem <group> który przesuwa go i obraca o 45 °. Trzeci kwadrat jest zawinięty w znacznik <group> który przesuwa go i rozciąga w poziomie o 50%. Wynik jest następujący:

Znacznik <group> może zawierać wiele <path> i <clip-path> . Może nawet zawierać inną <group> .

Basic AnimatedVectorDrawable

AnimatedVectorDrawable wymaga co najmniej 3 składników:

• VectorDrawable którym będzie można manipulować
• objectAnimator który określa, którą właściwość zmienić i jak
• Sam AnimatedVectorDrawable , który łączy objectAnimator z VectorDrawable celu utworzenia animacji

Poniżej utworzono trójkąt, który zmienia kolor z czarnego na czerwony.

VectorDrawable , nazwa pliku: 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>

objectAnimator , nazwa pliku: 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"/>

AnimatedVectorDrawable , nazwa pliku: 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>

Zauważ, że <target> określa android:name="triangle" który odpowiada <path> w VectorDrawable . VectorDrawable może zawierać wiele elementów, a właściwość android:name służy do określania, który element jest celem.

Wynik:

Używanie uderzeń

Korzystanie z obrysu SVG ułatwia tworzenie rysunków wektorowych o zunifikowanej długości obrysu, zgodnie z wytycznymi Projektowania Materiałów :

Spójne wagi uderzeń są kluczem do ujednolicenia całej rodziny ikon systemowych. Zachowaj szerokość 2dp dla wszystkich wystąpień obrysu, w tym krzywych, kątów oraz obrysów wewnętrznych i zewnętrznych.

Na przykład w ten sposób utworzyłbyś znak „plus” za pomocą obrysów:

<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 określa kolor obrysu.

• strokeWidth określa szerokość (w dp) skoku (w tym przypadku 2dp, jak sugerują wytyczne).

• pathData to miejsce, w którym opisujemy nasz obraz SVG:

• M12,0 przesuwa „kursor” do pozycji 12,0

• V24 tworzy linię pionową do pozycji 12, 24

itd., zobacz dokumentację SVG i ten przydatny samouczek „Ścieżka SVG” autorstwa w3schools, aby dowiedzieć się więcej o konkretnych poleceniach ścieżki.

W rezultacie otrzymaliśmy ten bez dodatków znak plus:

Jest to szczególnie przydatne do tworzenia AnimatedVectorDrawable , ponieważ operujesz teraz jednym pociągnięciem o jednolitej długości, zamiast w inny sposób skomplikowanej ścieżki.

Kompatybilność wektorowa poprzez AppCompat

Kilka warunków wstępnych w build.gradle aby wektory działały aż do API 7 dla VectorDrawables i API 13 dla AnimatedVectorDrawables (obecnie z pewnymi zastrzeżeniami):

//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'
}

W twoim 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" />