Android
VectorDrawable e AnimatedVectorDrawable

Basic VectorDrawable

Un VectorDrawable deve consistere in almeno un tag <path> definisce una forma

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

Questo produrrebbe un triangolo nero:

utilizzando

Un <clip-path> definisce una forma che funge da finestra, consentendo solo a parti di un <path> di mostrare se si trovano all'interno della forma <clip-path> e di tagliare il resto.

<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 questo caso il <path> produce un triangolo nero, ma il <clip-path> definisce una forma quadrata più piccola, consentendo solo a una parte del triangolo di mostrare:

tag

Un tag <group> consente di ridimensionare, ruotare e posizionare uno o più elementi di un VectorDrawable da regolare:

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

Il codice di esempio sopra contiene tre tag <path> identici, tutti che descrivono i quadrati neri. Il primo quadrato non è corretto. Il secondo quadrato è avvolto in un tag <group> che lo sposta e lo ruota di 45 °. Il terzo quadrato è avvolto in un tag <group> che lo sposta e lo allunga orizzontalmente del 50%. Il risultato è il seguente:

Un tag <group> può contenere più tag <path> e <clip-path> . Può anche contenere un altro <group> .

Basic AnimatedVectorDrawable

Un AnimatedVectorDrawable richiede almeno 3 componenti:

• Un VectorDrawable che verrà manipolato
• Un objectAnimator che definisce quale proprietà modificare e come
• AnimatedVectorDrawable stesso che collega objectAnimator a VectorDrawable per creare l'animazione

Di seguito viene creato un triangolo che passa dal colore nero al rosso.

The VectorDrawable , filename: 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>

L' objectAnimator , nomefile: 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 , filename: 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>

Nota che <target> specifica android:name="triangle" che corrisponde al <path> in VectorDrawable . Un VectorDrawable può contenere più elementi e android:name proprietà android:name viene utilizzata per definire quale elemento viene scelto come target.

Risultato:

Uso di tratti

L'uso del tratto SVG semplifica la creazione di un vettore disegnato con una lunghezza del tratto unificata, come da linee guida sulla progettazione dei materiali :

I pesi di colpo coerenti sono fondamentali per unificare la famiglia di icone del sistema in generale. Mantieni una larghezza di 2 dpi per tutte le istanze di tratto, comprese le curve, gli angoli e i tratti interni ed esterni.

Quindi, ad esempio, questo è il modo in cui crei un segno "più" usando i tratti:

<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 definisce il colore del tratto.

• strokeWidth definisce la larghezza (in dp) del tratto (in questo caso 2dp, come suggerito dalle linee guida).

• pathData è dove descriviamo la nostra immagine SVG:

• M12,0 sposta il "cursore" nella posizione 12,0

• V24 crea una linea verticale nella posizione 12, 24

ecc., consultare la documentazione SVG e questo utile tutorial "SVG Path" di w3schools per ulteriori informazioni sui comandi specifici del percorso.

Di conseguenza, abbiamo ottenuto questo segno più senza fronzoli:

Ciò è particolarmente utile per creare un oggetto AnimatedVectorDrawable , dal momento che ora si sta lavorando con un singolo tratto con una lunghezza unificata, invece di un percorso altrimenti complicato.

Compatibilità vettoriale tramite AppCompat

Alcuni prerequisiti nel build.gradle per i vettori funzionano fino all'API 7 per VectorDrawables e API 13 per AnimatedVectorDrawables (con alcune avvertenze attualmente):

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

Nel tuo 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" />