Android
VectorDrawable och AnimatedVectorDrawable

Grundläggande VectorDrawable

En VectorDrawable bör bestå av minst en <path> -tagg som definierar en form

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

Detta skulle ge en svart triangel:

Använder sig av

En <clip-path> definierar en form som fungerar som ett fönster, vilket bara tillåter delar av en <path> att visa om de är inom <clip-path> -formen och avskära resten.

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

I detta fall producerar <path> en svart triangel, men <clip-path> definierar en mindre kvadratisk form, vilket bara tillåter en del av triangeln att visa igenom:

taggar

En <group> -tagg gör det möjligt att justera skalningen, rotationen och positionen för ett eller flera element i en 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>

Exempelkoden ovan innehåller tre identiska <path> -taggar som alla beskriver svarta rutor. Det första torget är ojusterat. Den andra fyrkanten är lindad i en <group> -tagg som flyttar den och roterar den med 45 °. Den tredje fyrkanten är lindad i en <group> -tagg som flyttar den och sträcker den horisontellt med 50%. Resultatet är som följer:

En <group> -tagg kan innehålla flera <path> och <clip-path> taggar. Det kan till och med innehålla en annan <group> .

Basic AnimatedVectorDrawable

En AnimatedVectorDrawable kräver minst tre komponenter:

• En VectorDrawable som kommer att manipuleras
• Ett objectAnimator som definierar vilken egenskap som ska ändras och hur
• Själva AnimatedVectorDrawable som ansluter objectAnimator till VectorDrawable att skapa animationen

Följande skapar en triangel som övergår sin färg från svart till röd.

VectorDrawable , filnamn : 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 , filnamn: 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"/>

The AnimatedVectorDrawable , filnamn : 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>

Observera att <target> anger android:name="triangle" som matchar <path> i VectorDrawable . En VectorDrawable kan innehålla flera element och android:name egenskapen används för att definiera vilket element som inriktas.

Resultat:

Använda stroke

Användning av SVG-stroke gör det lättare att skapa en vektordragbar med enhetlig slaglängd enligt riktlinjer för materialdesign :

Konsekventa slagvikt är nyckeln till att förena den totala systemikonfamiljen. Behåll en bredd på 2 dp för alla slagfall, inklusive kurvor, vinklar och både inre och yttre slag.

Så till exempel, så här skapar du ett "plus" -tecken med hjälp av streck:

<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 definierar färgen på stroke.

• strokeWidth definierar strokeWidth bredd (i dp) (2dp i detta fall, vilket föreslås av riktlinjerna).

• pathData är där vi beskriver vår SVG-bild:

• M12,0 flyttar "markören" till position 12,0

• V24 skapar en vertikal linje till positionen 12, 24

etc., se SVG-dokumentation och denna användbara "SVG-sökväg" -studie från w3schools för att lära dig mer om de specifika sökkommandona.

Som ett resultat fick vi detta utan krusiduller plustecken:

Detta är särskilt användbart för att skapa en AnimatedVectorDrawable , eftersom du nu arbetar med ett enda slag med en enhetlig längd istället för en annars komplicerad sökväg.

Vektorkompatibilitet genom AppCompat

Några build.gradle i build.gradle för att vektorer ska fungera hela vägen ner till API 7 för VectorDrawables och API 13 för AnimatedVectorDrawables (med några varningar för närvarande):

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

I din 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" />