Share
Alors que Android ne supporte pas directement les SVG (Scalable Vector Graphics), Lollipop a introduit une nouvelle classe appelée VectorDrawable, qui permet aux concepteurs et aux développeurs de dessiner des actifs de la même manière en utilisant uniquement du code.
Dans cet article, vous apprendrez à créer un VectorDrawable avec des fichiers XML et animez-les dans vos projets. Ceci n'est pris en charge que sur les appareils fonctionnant sous Android 5.0 ou version ultérieure, et il n'existe actuellement aucune implémentation de bibliothèque de support. Les fichiers sources de ce tutoriel sont disponibles sur GitHub.
La principale similitude entre un VectorDrawable et une image SVG standard est que les deux sont tirés à l'aide d'un chemin valeur. Bien comprendre comment les chemins SVGsont dessinés est hors du champ de cet article, la documentation officielle peut être trouvée sur le site web du W3C. Pour cet article, vous aurez simplement besoin de savoir que la balise path est l'endroit où se produit le dessin. Jetons un coup d'œil au fichier SVG qui dessine l'image suivante:
Il y a cinq parties principales à cette image:
Le code suivant dessine cette image en tant que SVG:
Même si cela peut sembler un peu difficile, vous n'avez pas besoin de bien comprendre comment tout est mis en œuvre pour mettre en œuvre une stratégie. VectorDrawable dans votre code. Cependant, il convient de noter que j'ai séparé chacune des cinq sections dans leur propre bloc unique dans le code pour des raisons de lisibilité..
La section supérieure consiste en deux arches pour tracer le carré arrondi et les sections suivantes représentent respectivement les ensembles de lignes inférieur, supérieur, droit et gauche. Pour transformer ce code SVG en un VectorDrawable, vous devez d’abord définir le vecteur objet en XML. Le code suivant est tiré de la vector_drawable_cpu.xml fichier dans l'exemple de code pour cet article.
Ensuite, vous pouvez ajouter les données du chemin. Le code suivant est divisé en cinq balises de chemin différentes plutôt qu'en un seul..
Comme vous pouvez le constater, chaque section de chemin utilise simplement le pathData attribut pour le dessin. Vous pouvez maintenant inclure le VectorDrawable Fichier XML pouvant être dessiné dans une norme ImageView et elle s'adapte à toute taille requise par votre application, sans avoir à utiliser de code Java..
Maintenant que vous savez créer des images en utilisant uniquement du code, il est temps de vous amuser un peu et de les animer. Dans l'animation suivante, vous remarquerez que chacun des groupes de fils pulsent vers et à partir du processeur..
Pour obtenir cet effet, vous devrez insérer chaque section que vous souhaitez animer dans un
Ensuite, vous voulez créer animateurs pour chaque type d'animation. Dans ce cas, il y en a un pour chaque groupe de fils pour un total de quatre. Vous trouverez ci-dessous un exemple d'animation du groupe supérieur et vous en aurez également besoin pour les groupes inférieur, gauche et droit. Chacun des fichiers XML de l'animateur se trouve dans l'exemple de code..
Comme vous pouvez le voir, le nom de la propriété est réglé sur traduction, ce qui signifie que l'animation se déplacera le long de l'axe des ordonnées. le valeurDe et valeurpour contrôler l'emplacement de début et de fin. En mettant mode répétition à sens inverse et repeatCount à infini, l'animation sera en boucle pour toujours aussi longtemps que le VectorDrawable est visible. le durée de l'animation est réglé sur 250, quel est le temps en millisecondes.
Pour appliquer les animations à votre fichier dessinable, vous devez créer un nouveau vecteur animé Fichier XML pour associer les animateurs à la VectorDrawable groupes. Le code suivant est utilisé pour créer le animated_cpu.xml fichier.
Lorsque tous vos fichiers XML sont prêts, vous pouvez utiliser la animated_cpu.xmltirable dans un ImageView pour l'afficher.
Pour démarrer votre animation, vous devez vous procurer une instance du Animable du ImageView et appeler début.
ImageView mCpuImageView = (ImageView) findViewById (R.id.cpu); Drawable drawable = mCpuImageView.getDrawable (); if (instance extractible of Animatable) ((animatable) drawable) .start ();
Après début a été appelé, les fils de l’image de la CPU vont commencer à bouger avec un code Java minimal utilisé.
Un cas d'utilisation courant pour un VectorDrawable est en train de transformer une image en une autre, telle que l’icône de la barre d’action qui passe d’une icône de hamburger à une flèche. Pour ce faire, les chemins source et de destination doivent suivre un format identique pour le nombre d'éléments. Pour cet exemple, nous allons définir les flèches face à gauche et à droite vues ci-dessus.
M300,70 l 0,70 -70, -70 0,0 70, -70z M300,70 l 0, -70 70,70 0,0 -70,70z
Ensuite, vous devrez créer un dessin initial pour une flèche en utilisant le chemin de Flèche gauche. Dans l'exemple de code, cela s'appelle vector_drawable_left_arrow.xml.
La principale différence entre l’animation du processeur et la transformation réside dans le animator_left_right_arrow.xml fichier.
Vous remarquerez le valeurDe et valeurpour les propriétés référencent les données de chemin pour les flèches gauche et droite, type de valeur est réglé sur pathType et nom de la propriétéest réglé sur pathData. Lorsque ceux-ci sont définis, l'animateur saura modifier un ensemble de données de chemin d'accès en un autre. Lorsque l'animateur est terminé, vous devez associer le VectorDrawable avec le objectAnimator en utilisant un nouveau vecteur animé objet.
Enfin, vous aurez simplement besoin d’associer le dessin dessiné animé à un ImageView et lancez l'animation dans votre code Java.
mArrowImageView = (ImageView) findViewById (R.id.left_right_arrow); drawable = mArrowImageView.getDrawable (); if (instance extractible of Animatable) ((animatable) drawable) .start ();
Comme vous l'avez vu, le VectorDrawable class est assez simple à utiliser et permet beaucoup de personnalisation pour ajouter des animations simples. Tandis que le VectorDrawable La classe n'est actuellement disponible que pour les appareils fonctionnant sous Android 5.0 ou supérieur, ils seront d'une valeur inestimable, car davantage d'appareils prennent en charge Lollipop et les futures versions d'Android.
Accentsconagua