Android
VectorDrawable et AnimatedVectorDrawable

Basic VectorDrawable

Un VectorDrawable doit comporter au moins une <path> définissant une forme

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

Cela produirait un triangle noir:

En utilisant

Un <clip-path> définit une forme qui agit comme une fenêtre, permettant uniquement à des parties d'un <path> de montrer si elles se trouvent dans la forme <clip-path> et de couper le reste.

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

Dans ce cas, le <path> produit un triangle noir, mais le <clip-path> définit une forme carrée plus petite, ne permettant qu'une partie du triangle:

Mots clés

Une <group> permet d'ajuster, de modifier et de positionner un ou plusieurs éléments d'un objet 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>

L'exemple de code ci-dessus contient trois balises <path> identiques, toutes décrivant des carrés noirs. Le premier carré n'est pas ajusté. Le deuxième carré est enveloppé dans une <group> qui le déplace et le fait pivoter de 45 °. Le troisième carré est entouré d'une <group> qui le déplace et l'étire horizontalement de 50%. Le résultat est le suivant:

Une <group> peut contenir plusieurs balises <path> et <clip-path> . Il peut même contenir un autre <group> .

AnimatedVectorDrawable de base

Un AnimatedVectorDrawable nécessite au moins 3 composants:

• Un VectorDrawable qui sera manipulé
• Un objectAnimator qui définit quelle propriété à modifier et comment
• AnimatedVectorDrawable lui AnimatedVectorDrawable même qui connecte objectAnimator à VectorDrawable pour créer l'animation

Ce qui suit crée un triangle qui transforme sa couleur du noir au rouge.

Le VectorDrawable , nom du fichier: 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 , filename: 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 , nom du fichier: 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>

Notez que <target> spécifie android:name="triangle" qui correspond au <path> dans le VectorDrawable . Un objet VectorDrawable peut contenir plusieurs éléments et la propriété android:name est utilisée pour définir l'élément qui est ciblé.

Résultat:

Utiliser des traits

L'utilisation du trait SVG facilite la création d'un dessin vectoriel avec une longueur de trait unifiée, conformément aux directives de conception du matériau :

Des poids de trait constants sont essentiels pour unifier la famille des icônes du système. Conservez une largeur de 2dp pour toutes les instances de trait, y compris les courbes, les angles et les courses intérieures et extérieures.

Ainsi, par exemple, vous créez un signe "plus" en utilisant des traits:

<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 définit la couleur du trait.

• strokeWidth définit la largeur (en dp) du trait (2dp dans ce cas, comme suggéré par les directives).

• pathData est l'endroit où nous décrivons notre image SVG:

• M12,0 déplace le "curseur" sur la position 12,0

• V24 crée une ligne verticale à la position 12, 24

etc., consultez la documentation SVG et ce tutoriel utile "Chemin SVG" de w3schools pour en savoir plus sur les commandes de chemin spécifiques.

En conséquence, nous avons eu ce signe plus simple:

Ceci est particulièrement utile pour créer un AnimatedVectorDrawable , puisque vous utilisez maintenant un seul trait avec une longueur unifiée, au lieu d'un chemin compliqué.

Compatibilité vectorielle via AppCompat

Quelques pré-requis dans build.gradle pour que les vecteurs fonctionnent jusqu'à API 7 pour VectorDrawables et API 13 pour AnimatedVectorDrawables (avec quelques réserves actuellement):

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

Dans votre 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" />