Android
VectorDrawable en AnimatedVectorDrawable

Basic VectorDrawable

Een VectorDrawable moet bestaan uit ten minste één <path> -tag die een vorm definieert

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

Dit zou een zwarte driehoek produceren:

Gebruik makend van

Een <clip-path> definieert een vorm die fungeert als een venster, waarbij alleen delen van een <path> kunnen worden weergegeven of deze zich binnen de <clip-path> -vorm bevinden en de rest afsnijden.

<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 dit geval produceert het <path> een zwarte driehoek, maar het <clip-path> definieert een kleinere vierkante vorm, waardoor slechts een deel van de driehoek zichtbaar is:

labels

Met een tag <group> kan de schaal, rotatie en positie van een of meer elementen van een VectorDrawable worden aangepast:

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

De bovenstaande voorbeeldcode bevat drie identieke <path> -tags, die allemaal zwarte vierkantjes beschrijven. Het eerste vierkant is niet aangepast. Het tweede vierkant is gewikkeld in een tag <group> die het beweegt en 45 ° roteert. Het derde vierkant is gewikkeld in een <group> tag die het verplaatst en horizontaal 50% uitrekt. Het resultaat is als volgt:

Een tag <group> kan meerdere tags <path> en <clip-path> . Het kan zelfs een andere <group> .

Basic AnimatedVectorDrawable

Een AnimatedVectorDrawable vereist minimaal 3 componenten:

• Een VectorDrawable die zal worden gemanipuleerd
• Een objectAnimator die definieert welke eigenschap moet worden gewijzigd en hoe
• De AnimatedVectorDrawable zelf die de objectAnimator verbindt met de objectAnimator om de VectorDrawable te maken

Het volgende creëert een driehoek die zijn kleur overzet van zwart naar rood.

De VectorDrawable , bestandsnaam: 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>

De objectAnimator , bestandsnaam: 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"/>

De AnimatedVectorDrawable , bestandsnaam: 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>

Merk op dat de <target> android:name="triangle" aangeeft die overeenkomt met het <path> in de VectorDrawable . Een VectorDrawable kan meerdere elementen bevatten en de eigenschap android:name wordt gebruikt om te definiëren op welk element wordt gericht.

Resultaat:

Slagen gebruiken

Het gebruik van SVG-lijn maakt het gemakkelijker om een vector-tekenbaar te maken met uniforme lijnlengte, volgens de richtlijnen voor materiaalontwerp :

Consistente slaggewichten zijn de sleutel tot het verenigen van de algemene systeempictogramfamilie. Handhaaf een breedte van 2dp voor alle lijninstanties, inclusief curven, hoeken en zowel interne als externe streken.

Dus dit is bijvoorbeeld hoe u een plusteken met streken zou maken:

<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 bepaalt de kleur van de strokeColor .

• strokeWidth definieert de breedte (in dp) van de streek (in dit geval 2dp, zoals voorgesteld in de richtlijnen).

• pathData is waar we onze SVG-afbeelding beschrijven:

• M12,0 verplaatst de "cursor" naar positie 12,0

• V24 creëert een verticale lijn naar positie 12, 24

etc., zie SVG-documentatie en deze handige "SVG Path" tutorial van w3schools voor meer informatie over de specifieke padopdrachten.

Als gevolg hiervan kregen we dit no-nonsense plusteken:

Dit is vooral handig voor het maken van een AnimatedVectorDrawable , omdat u nu werkt met een enkele lijn met een uniforme lengte, in plaats van een anders gecompliceerd pad.

Vectorcompatibiliteit via AppCompat

Enkele vereisten in de build.gradle voor vectoren om helemaal door te werken tot API 7 voor VectorDrawables en API 13 voor AnimatedVectorDrawables (met enkele kanttekeningen):

//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 uw 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" />