Android Vector Drawable

Dans ce tutoriel, nous allons discuter de Android Vector Drawable. En outre, nous allons les mettre en œuvre dans notre application Android.

Android Vector Drawable

Souvent, nous utilisons des PNG comme nos images dessinables. Afin que les images PNG fonctionnent pour différentes tailles d’écran, nous créons plusieurs actifs PNG avec différentes tailles et densités. Par la suite, les images PNG prennent de l’espace supplémentaire et conduisent à des tailles APK importantes des applications Android.

C’est là que les Vector Drawable viennent à notre secours ! Ils sont votre remplacement pour les images PNG.

Un VectorDrawable est un graphique vectoriel défini dans un fichier XML comme un ensemble de points, de lignes et de courbes ainsi que ses informations de couleur associées.

Ils peuvent être mis à l’échelle selon la taille de l’écran sans perte de qualité. Ils sont également rendus rapidement à l’écran. Les VectorDrawable sont un fichier XML.

Vous pouvez ajouter un nouveau Vector Asset dans votre dossier drawable en utilisant New | Vector Asset.

Nous pouvons donc créer des Vector drawables d’icônes Material Design. Le code pour le VectorDrawable ressemble à ceci:

Ils sont définis dans la balise vector. android:viewportWidth et android:viewportHeight sont utilisées pour définir la largeur et la hauteur des limites du dessinable. Dans ces dimensions, le dessinable vectoriel est dessiné sur le canevas.

path est la balise qui crée le dessinable. À l’intérieur du chemin, nous créons des lignes, des courbes, des arcs et définissons la bordure, la couleur de fond. Nous faisons ainsi des commandes de chemin dans le pathData.

Création de chemin pour les actifs vectoriels

Les commandes de chemin consistent en un alphabet suivi de coordonnées. Imaginez la création de chemins comme la réalisation d’une peinture. Les alphabets en majuscules représentent la position absolue. Les minuscules représentent une position relative.

• M – commande moveto. C’est une façon de dire déplacez votre crayon à la coordonnée donnée sur la vue. Exemple M 100 100 déplace un crayon imaginaire à la coordonnée 100, 100 sur le canevas.
• L – commande line to. Est utilisé pour dessiner une ligne de la position actuelle à la position spécifiée.
  Exemple : M 100 100, L 120 100 dessine une ligne horizontale.
• z – Cette commande est utilisée pour fermer un chemin. Il dessine une ligne de la dernière position à la première position. Exemple M 100 100 L 120 100 L 120 120 L 100 120 Z crée un carré.
• C – Ceci est utilisé pour créer une courbe de bézier. Nous devons spécifier trois ensembles de coordonnées après cela. Le premier et le deuxième seraient les deux points de contrôle entre le point initial et le point final.
• A – est utilisé pour dessiner un arc. Après un vous devez spécifier le format suivant : (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry et x axis sont les deux rayons spécifiés.

Créons au hasard un intéressant Vector Drawable dans notre application Android en utilisant les connaissances ci-dessus.

Structure d’exemple de projet Android Vector Drawable

Code Android Vector Drawable

Le code de l’activité_main.xml est donné ci-dessous:

Examinons une à une chacune des implémentations de Vector Drawables.

ic_rectangle.xml

Dans le code ci-dessus, nous avons créé deux chemins. Chacun d’eux est un triangle rectangle.

Dans notre LinearLayout, le fond ressemblerait à :

ic_w.xml

Dans le code ci-dessus, nous essayons de créer un symbole W en utilisant des lignes.

Note : Au lieu d’un chemin séparé, nous pouvons tout fusionner dans une seule commande de chemin. Bien que vous puissiez utiliser plusieurs chemins pour avoir une compréhension claire de ce que fait chaque chemin.

ic_w_filled.xml
Dans le code ci-dessous, nous utiliserons la commande z pour fermer les chemins et remplir la couleur à l’intérieur:

ic_a.xml
Créons la lettre A en utilisant des chemins.

ic_c.xml

Les lettres A et C vectoriellement dessinables se présentent comme:

ic_0.xml

Un cercle est réalisé à l’aide de deux arcs qui sont ensuite fermés.

Maintenant pour la dernière. Créons une icône d’exemple de JournalDev JD en utilisant le dessinable vectoriel.

Finalement, la sortie de notre application ressemble à ceci:

Ceci met un terme à ce tutoriel. Vous pouvez télécharger le projet final Android VectorDrawable à partir du lien ci-dessous:

.