Graphiques et animation Android

  • Article

Android fournit une infrastructure très riche et diversifiée pour la prise en charge des graphiques et des animations 2D. Cette rubrique présente ces frameworks et explique comment créer des graphiques et des animations personnalisés à utiliser dans une application Xamarin.Android.

Vue d’ensemble

Bien qu’elles s’exécutent sur des appareils traditionnellement de puissance limitée, les applications mobiles les mieux notées ont souvent une expérience utilisateur (UX) sophistiquée, avec des graphiques et des animations de haute qualité qui fournissent une sensation intuitive, réactive et dynamique. À mesure que les applications mobiles sont de plus en plus sophistiquées, les utilisateurs commencent à s’attendre à de plus en plus d’applications.

Heureusement pour nous, les plateformes mobiles modernes ont des frameworks très puissants pour créer des animations sophistiquées et des graphiques personnalisés tout en conservant la facilité d’utilisation. Cela permet aux développeurs d’ajouter une interactivité riche avec très peu d’effort.

Les infrastructures d’API d’interface utilisateur dans Android peuvent être divisées en deux catégories : Graphiques et Animation.

Les graphiques sont ensuite divisés en différentes approches pour effectuer des graphiques 2D et 3D. Les graphiques 3D sont disponibles via un certain nombre d’infrastructures intégrées telles que OpenGL ES (une version spécifique d’OpenGL sur mobile) et des infrastructures tierces telles que MonoGame (un kit de ressources multiplateforme compatible avec le kit de ressources XNA). Bien que les graphiques 3D ne soient pas dans le cadre de cet article, nous allons examiner les techniques de dessin 2D intégrées.

Android fournit deux API différentes pour la création de graphiques 2D. L’une est une approche déclarative de haut niveau et l’autre une API de bas niveau par programme :

  • Ressources dessinables : elles sont utilisées pour créer des graphiques personnalisés par programmation ou (plus généralement) en incorporant des instructions de dessin dans des fichiers XML. Les ressources dessinables sont généralement définies en tant que fichiers XML qui contiennent des instructions ou des actions permettant à Android de restituer un graphique 2D.

  • Canevas : il s’agit d’une API de bas niveau qui implique de dessiner directement sur une bitmap sous-jacente. Il fournit un contrôle très précis sur ce qui est affiché.

En plus de ces techniques graphiques 2D, Android propose également plusieurs façons de créer des animations :

  • Animations dessinables : Android prend également en charge les animations image par image appelées Animation dessinable. Il s’agit de l’API d’animation la plus simple. Android charge et affiche séquentiellement les ressources drawables dans l’ordre (un peu comme un dessin animé).

  • Afficher les animations : les animations d’affichage sont les API d’animation d’origine dans Android et sont disponibles dans toutes les versions d’Android. Cette API est limitée en ce qu’elle fonctionne uniquement avec les objets View et ne peut effectuer que des transformations simples sur ces vues. Les animations d’affichage sont généralement définies dans les fichiers XML trouvés dans le /Resources/anim dossier.

  • Animations de propriétés : Android 3.0 a introduit un nouvel ensemble d’API d’animation appelé Animations de propriétés. Ces nouvelles API ont introduit un système extensible et flexible qui peut être utilisé pour animer les propriétés de n’importe quel objet, et pas seulement les objets View. Cette flexibilité permet d’encapsuler les animations dans des classes distinctes qui faciliteront le partage de code.

Les animations d’affichage sont plus adaptées aux applications qui doivent prendre en charge les anciennes API antérieures à Android 3.0 (niveau API 11). Sinon, les applications doivent utiliser les API d’animation de propriétés plus récentes pour les raisons mentionnées ci-dessus.

Toutes ces infrastructures sont des options viables, mais dans la mesure du possible, la préférence doit être accordée aux animations de propriétés, car il s’agit d’une API plus flexible à utiliser. Les animations de propriété permettent d’encapsuler la logique d’animation dans des classes distinctes, ce qui facilite le partage de code et simplifie la maintenance du code.

Accessibilité

Les graphiques et les animations aident à rendre les applications Android attrayantes et amusantes à utiliser ; Toutefois, il est important de se rappeler que certaines interactions se produisent via des lecteurs d’écran, d’autres périphériques d’entrée ou avec un zoom assisté. En outre, certaines interactions peuvent se produire sans fonctionnalités audio.

Les applications sont plus utilisables dans ces situations si elles ont été conçues en tenant compte de l’accessibilité : fournir des conseils et une aide à la navigation dans l’interface utilisateur, et s’assurer qu’il existe du contenu texte ou des descriptions pour les éléments pictoriaux de l’interface utilisateur.

Pour plus d’informations sur l’utilisation des API d’accessibilité d’Android, consultez le Guide d’accessibilité de Google.

Graphiques 2D

Les ressources dessinables sont une technique populaire dans les applications Android. Comme pour les autres ressources, les ressources drawables sont déclaratives : elles sont définies dans des fichiers XML. Cette approche permet une séparation propre du code des ressources. Cela peut simplifier le développement et la maintenance, car il n’est pas nécessaire de modifier le code pour mettre à jour ou modifier les graphiques dans une application Android. Toutefois, bien que les ressources dessinables soient utiles pour de nombreuses exigences graphiques simples et courantes, elles ne disposent pas de l’alimentation et du contrôle de l’API Canvas.

L’autre technique, à l’aide de l’objet Canvas , est très similaire à d’autres frameworks d’API traditionnels tels que System.Drawing ou le dessin de base d’iOS. L’utilisation de l’objet Canvas permet de contrôler au maximum la façon dont les graphiques 2D sont créés. Il convient aux situations où une ressource drawable ne fonctionnera pas ou sera difficile à utiliser. Par exemple, il peut être nécessaire de dessiner un contrôle de curseur personnalisé dont l’apparence changera en fonction des calculs liés à la valeur du curseur.

Examinons d’abord Les ressources dessinables. Ils sont plus simples et couvrent les cas de dessins personnalisés les plus courants.

Ressources dessinables

Les ressources dessinables sont définies dans un fichier XML dans le répertoire /Resources/drawable. Contrairement à l’incorporation de PNG ou JPEG, il n’est pas nécessaire de fournir des versions spécifiques à la densité de ressources drawables. Au moment de l’exécution, une application Android charge ces ressources et utilise les instructions contenues dans ces fichiers XML pour créer des graphiques 2D. Android définit plusieurs types de ressources dessinables :

  • ShapeDrawable : il s’agit d’un objet Drawable qui dessine une forme géométrique primitive et applique un ensemble limité d’effets graphiques sur cette forme. Ils sont très utiles pour des éléments tels que la personnalisation des boutons ou la définition de l’arrière-plan de TextViews. Nous verrons un exemple d’utilisation d’un ShapeDrawable plus loin dans cet article.

  • StateListDrawable : il s’agit d’une ressource drawable qui va changer d’apparence en fonction de l’état d’un widget/contrôle. Par exemple, un bouton peut modifier son apparence selon qu’il est appuyé ou non.

  • LayerDrawable : cette ressource dessinable qui empile plusieurs autres éléments à tiroirs les uns sur les autres. Un exemple de LayerDrawable est illustré dans la capture d’écran suivante :

    Exemple LayerDrawable

  • TransitionDrawable : il s’agit d’un LayerDrawable, mais avec une différence. Une transitionDrawable est capable d’animer une couche qui s’affiche au-dessus d’une autre.

  • LevelListDrawable : il s’agit d’une image très similaire à stateListDrawable en ce qu’elle affiche une image basée sur certaines conditions. Toutefois, contrairement à un StateListDrawable, LevelListDrawable affiche une image basée sur une valeur entière. Un exemple de LevelListDrawable serait d’afficher la puissance d’un signal Wi-Fi. À mesure que la puissance du signal Wi-Fi change, le tiroir affiché change en conséquence.

  • ScaleDrawable/ClipDrawable : comme leur nom l’indique, ces drawables fournissent à la fois des fonctionnalités de mise à l’échelle et de découpage. ScaleDrawable met à l’échelle un autre Drawable, tandis que ClipDrawable va clipquer un autre Drawable.

  • InsetDrawable : ce drawable applique des insets sur les côtés d’une autre ressource Drawable. Il est utilisé lorsqu’une vue a besoin d’un arrière-plan plus petit que les limites réelles de l’affichage.

  • Bitmap XMLDrawable : ce fichier est un ensemble d’instructions, en XML, qui doivent être effectuées sur une image bitmap réelle. Certaines actions qu’Android peut effectuer sont le carrelage, le tergiversation et l’anti-aliasing. L’une des utilisations les plus courantes consiste à mettre en mosaïque une image bitmap sur l’arrière-plan d’une disposition.

Exemple dessinable

Examinons un exemple rapide de création d’un graphique 2D à l’aide d’un ShapeDrawable. Un ShapeDrawable peut définir l’une des quatre formes de base : rectangle, ovale, trait et anneau. Il est également possible d’appliquer des effets de base, tels que le dégradé, la couleur et la taille. Le code XML suivant se ShapeDrawable trouve dans le projet complémentaire AnimationsDemo (dans le fichier Resources/drawable/shape_rounded_blue_rect.xml). Il définit un rectangle avec un arrière-plan dégradé violet et des coins arrondis :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!-- Specify a gradient for the background -->
<gradient android:angle="45"
          android:startColor="#55000066"
          android:centerColor="#00000000"
          android:endColor="#00000000"
          android:centerX="0.75" />

<padding android:left="5dp"
          android:right="5dp"
          android:top="5dp"
          android:bottom="5dp" />

<corners android:topLeftRadius="10dp"
          android:topRightRadius="10dp"
          android:bottomLeftRadius="10dp"
          android:bottomRightRadius="10dp" />
</shape>

Nous pouvons référencer cette ressource drawable de manière déclarative dans une disposition ou un autre drawable, comme indiqué dans le code XML suivant :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#33000000">
    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerInParent="true"
              android:background="@drawable/shape_rounded_blue_rect"
              android:text="@string/message_shapedrawable" />
</RelativeLayout>

Les ressources dessinables peuvent également être appliquées par programmation. L’extrait de code suivant montre comment définir par programmation l’arrière-plan d’un TextView :

TextView tv = FindViewById<TextView>(Resource.Id.shapeDrawableTextView);
tv.SetBackgroundResource(Resource.Drawable.shape_rounded_blue_rect);

Pour voir à quoi cela ressemblerait, exécutez le projet AnimationsDemo et sélectionnez l’élément Dessin de forme dans le menu main. Nous devrions voir quelque chose de similaire à la capture d’écran suivante :

Textview avec un arrière-plan personnalisé, dessinable avec un dégradé et des coins arrondis

Pour plus d’informations sur les éléments XML et la syntaxe de Drawable Resources, consultez la documentation de Google.

Utilisation de l’API Dessin canevas

Les tiroirs sont puissants mais ont leurs limites. Certaines choses ne sont pas possibles ou très complexes (par exemple, l’application d’un filtre à une image qui a été prise par un appareil photo sur l’appareil). Il serait très difficile d’appliquer la réduction des yeux rouges à l’aide d’une ressource drawable. Au lieu de cela, l’API Canvas permet à une application d’avoir un contrôle très précis pour modifier de manière sélective les couleurs dans une partie spécifique de l’image.

Une classe couramment utilisée avec canvas est la classe Paint . Cette classe contient des informations de couleur et de style sur la façon de dessiner. Il est utilisé pour fournir des éléments tels qu’une couleur et une transparence.

L’API Canvas utilise le modèle du peintre pour dessiner des graphiques 2D. Les opérations sont appliquées dans des couches successives les unes sur les autres. Chaque opération couvre une zone de la bitmap sous-jacente. Lorsque la zone chevauche une zone précédemment peinte, la nouvelle peinture masque partiellement ou complètement l’ancienne. Il s’agit de la même façon que de nombreuses autres API de dessin telles que System.Drawing et Core Graphics d’iOS fonctionnent.

Il existe deux façons d’obtenir un Canvas objet . La première méthode consiste à définir un objet Bitmap , puis à instancier un Canvas objet avec celui-ci. Par exemple, l’extrait de code suivant crée un canevas avec une bitmap sous-jacente :

Bitmap bitmap = Bitmap.CreateBitmap(100, 100, Bitmap.Config.Argb8888);
Canvas canvas = new Canvas(b);

L’autre façon d’obtenir un Canvas objet est la méthode de rappel OnDraw fournie par la classe de base View . Android appelle cette méthode lorsqu’il décide qu’une vue doit se dessiner elle-même et passe un Canvas objet avec lequel l’affichage peut fonctionner.

La classe Canvas expose des méthodes pour fournir par programmation les instructions de dessin. Par exemple :

  • Canvas.DrawPaint : remplit l’intégralité de la bitmap du canevas avec la peinture spécifiée.

  • Canvas.DrawPath : dessine la forme géométrique spécifiée à l’aide de la peinture spécifiée.

  • Canvas.DrawText : dessine le texte du canevas avec la couleur spécifiée. Le texte est dessiné à l’emplacement x,y .

Dessin avec l’API Canvas

Voici un exemple de l’API Canvas en action. L’extrait de code suivant montre comment dessiner une vue :

public class MyView : View
{
    protected override void OnDraw(Canvas canvas)
    {
        base.OnDraw(canvas);
        Paint green = new Paint {
            AntiAlias = true,
            Color = Color.Rgb(0x99, 0xcc, 0),
        };
        green.SetStyle(Paint.Style.FillAndStroke);

        Paint red = new Paint {
            AntiAlias = true,
            Color = Color.Rgb(0xff, 0x44, 0x44)
        };
        red.SetStyle(Paint.Style.FillAndStroke);

        float middle = canvas.Width * 0.25f;
        canvas.DrawPaint(red);
        canvas.DrawRect(0, 0, middle, canvas.Height, green);
    }
}

Ce code ci-dessus crée d’abord une peinture rouge et un objet de peinture verte. Il remplit le contenu du canevas de rouge, puis indique au canevas de dessiner un rectangle vert correspondant à 25 % de la largeur du canevas. Vous pouvez en voir un exemple dans le AnimationsDemo projet inclus dans le code source de cet article. En démarrant l’application et en sélectionnant l’élément Dessin dans le menu main, nous devrions avoir un écran similaire à ce qui suit :

Écran avec des objets de peinture rouge et de peinture verte

Animation

Les utilisateurs aiment les éléments qui se déplacent dans leurs applications. Les animations sont un excellent moyen d’améliorer l’expérience utilisateur d’une application et de l’aider à se démarquer. Les meilleures animations sont celles que les utilisateurs ne remarquent pas, car elles se sentent naturelles. Android fournit les trois API suivantes pour les animations :

  • Afficher l’animation : il s’agit de l’API d’origine. Ces animations sont liées à une vue spécifique et peuvent effectuer des transformations simples sur le contenu de l’affichage. En raison de sa simplicité, cette API reste utile pour les animations alpha, les rotations, etc.

  • Animation de propriété : les animations de propriété ont été introduites dans Android 3.0. Ils permettent à une application d’animer presque tout. Les animations de propriété peuvent être utilisées pour modifier n’importe quelle propriété d’un objet, même si cet objet n’est pas visible à l’écran.

  • Animation dessinable : ressource Drawable spéciale utilisée pour appliquer un effet d’animation très simple aux dispositions.

En général, l’animation de propriété est le système préféré à utiliser, car elle est plus flexible et offre plus de fonctionnalités.

Afficher les animations

Les animations d’affichage sont limitées aux vues et peuvent uniquement effectuer des animations sur des valeurs telles que les points de début et de fin, la taille, la rotation et la transparence. Ces types d’animations sont généralement appelés animations d’interpolation. Les animations d’affichage peuvent être définies de deux façons : par programmation dans le code ou à l’aide de fichiers XML. Les fichiers XML sont le moyen préféré de déclarer des animations d’affichage, car ils sont plus lisibles et plus faciles à gérer.

Les fichiers XML d’animation seront stockés dans le /Resources/anim répertoire d’un projet Xamarin.Android. Ce fichier doit avoir l’un des éléments suivants comme élément racine :

  • alpha : animation en fondu ou en fondu sortant.

  • rotate : animation de rotation.

  • scale : animation de redimensionnement.

  • translate : mouvement horizontal et/ou vertical.

  • set : conteneur qui peut contenir un ou plusieurs des autres éléments d’animation.

Par défaut, toutes les animations d’un fichier XML sont appliquées simultanément. Pour que les animations se produisent séquentiellement, définissez l’attribut android:startOffset sur l’un des éléments définis ci-dessus.

Il est possible d’affecter la vitesse de modification d’une animation à l’aide d’un interpolateur. Un interpolateur permet d’accélérer, de répéter ou de décéder les effets d’animation. L’infrastructure Android fournit plusieurs interpolateurs prêtes à l’emploi, comme (mais sans s’y limiter) :

  • AccelerateInterpolator / DecelerateInterpolator : ces interpolateurs augmentent ou diminuent le taux de modification d’une animation.

  • BounceInterpolator : la modification rebondit à la fin.

  • LinearInterpolator : le taux de modifications est constant.

Le code XML suivant montre un exemple de fichier d’animation qui combine certains de ces éléments :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android=http://schemas.android.com/apk/res/android
     android:shareInterpolator="false">

    <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
           android:fromXScale="1.0"
           android:toXScale="1.4"
           android:fromYScale="1.0"
           android:toYScale="0.6"
           android:pivotX="50%"
           android:pivotY="50%"
           android:fillEnabled="true"
           android:fillAfter="false"
           android:duration="700" />

    <set android:interpolator="@android:anim/accelerate_interpolator">
        <scale android:fromXScale="1.4"
               android:toXScale="0.0"
               android:fromYScale="0.6"
               android:toYScale="0.0"
               android:pivotX="50%"
               android:pivotY="50%"
               android:fillEnabled="true"
               android:fillBefore="false"
               android:fillAfter="true"
               android:startOffset="700"
               android:duration="400" />

        <rotate android:fromDegrees="0"
                android:toDegrees="-45"
                android:toYScale="0.0"
                android:pivotX="50%"
                android:pivotY="50%"
                android:fillEnabled="true"
                android:fillBefore="false"
                android:fillAfter="true"
                android:startOffset="700"
                android:duration="400" />
    </set>
</set>

Cette animation effectue toutes les animations simultanément. La première animation de mise à l’échelle étend l’image horizontalement et la réduit verticalement, puis l’image est simultanément pivotée de 45 degrés dans le sens inverse des aiguilles d’une montre et est réduite, disparaissant de l’écran.

L’animation peut être appliquée par programmation à une vue en gonflant l’animation, puis en l’appliquant à une vue. Android fournit la classe Android.Views.Animations.AnimationUtils d’assistance qui gonfle une ressource d’animation et retourne une instance de Android.Views.Animations.Animation. Cet objet est appliqué à une vue en appelant StartAnimation et en passant l’objet Animation . L’extrait de code suivant en montre un exemple :

Animation myAnimation = AnimationUtils.LoadAnimation(Resource.Animation.MyAnimation);
ImageView myImage = FindViewById<ImageView>(Resource.Id.imageView1);
myImage.StartAnimation(myAnimation);

Maintenant que nous avons une compréhension fondamentale du fonctionnement des animations d’affichage, nous allons passer à Animations de propriétés.

Animations de propriété

Les animateurs de propriétés sont une nouvelle API introduite dans Android 3.0. Ils fournissent une API plus extensible qui peut être utilisée pour animer n’importe quelle propriété sur n’importe quel objet.

Toutes les animations de propriété sont créées par des instances de la sous-classe Animator . Les applications n’utilisent pas directement cette classe, mais utilisent l’une de ses sous-classes :

  • ValueAnimator : cette classe est la classe la plus importante dans l’ensemble de l’API d’animation de propriété. Il calcule les valeurs des propriétés qui doivent être modifiées. le ViewAnimator ne met pas directement à jour ces valeurs ; au lieu de cela, il déclenche des événements qui peuvent être utilisés pour mettre à jour des objets animés.

  • ObjectAnimator : cette classe est une sous-classe de ValueAnimator . Il est destiné à simplifier le processus d’animation d’objets en acceptant une propriété et un objet cible à mettre à jour.

  • AnimationSet : cette classe est chargée d’orchestrer la façon dont les animations s’exécutent les unes par rapport aux autres. Les animations peuvent s’exécuter simultanément, séquentiellement ou avec un délai spécifié entre elles.

Les évaluateurs sont des classes spéciales utilisées par les animateurs pour calculer les nouvelles valeurs au cours d’une animation. Android fournit les évaluateurs suivants :

Si la propriété animée n’est pas une floatcouleur ou , int les applications peuvent créer leur propre évaluateur en implémentant l’interface ITypeEvaluator . (L’implémentation d’évaluateurs personnalisés dépasse le cadre de cette rubrique.)

Utilisation de ValueAnimator

Toute animation comporte deux parties : le calcul des valeurs animées, puis la définition de ces valeurs sur les propriétés d’un objet. ValueAnimator calcule uniquement les valeurs, mais n’opère pas directement sur les objets. Au lieu de cela, les objets sont mis à jour à l’intérieur des gestionnaires d’événements qui seront appelés pendant la durée de vie de l’animation. Cette conception permet de mettre à jour plusieurs propriétés à partir d’une valeur animée.

Vous obtenez une instance de en ValueAnimator appelant l’une des méthodes de fabrique suivantes :

  • ValueAnimator.OfInt
  • ValueAnimator.OfFloat
  • ValueAnimator.OfObject

Une fois cette opération effectuée, la durée de l’instance ValueAnimator doit être définie, puis elle peut être démarrée. L’exemple suivant montre comment animer une valeur comprise entre 0 et 1 sur une période de 1 000 millisecondes :

ValueAnimator animator = ValueAnimator.OfInt(0, 100);
animator.SetDuration(1000);
animator.Start();

Mais en soi, l’extrait de code ci-dessus n’est pas très utile : l’animateur s’exécute, mais il n’y a pas de cible pour la valeur mise à jour. La Animator classe déclenche l’événement Update lorsqu’elle décide qu’il est nécessaire d’informer les écouteurs d’une nouvelle valeur. Les applications peuvent fournir un gestionnaire d’événements pour répondre à cet événement, comme indiqué dans l’extrait de code suivant :

MyCustomObject myObj = new MyCustomObject();
myObj.SomeIntegerValue = -1;

animator.Update += (object sender, ValueAnimator.AnimatorUpdateEventArgs e) =>
{
    int newValue = (int) e.Animation.AnimatedValue;
    // Apply this new value to the object being animated.
    myObj.SomeIntegerValue = newValue;
};

Maintenant que nous avons une compréhension de , permet d’en ValueAnimatorsavoir plus sur .ObjectAnimator

Utilisation d’ObjectAnimator

ObjectAnimator est une sous-classe de qui combine le moteur de ViewAnimator minutage et le calcul de valeur de avec ValueAnimator la logique requise pour relier les gestionnaires d’événements. Le nécessite que les ValueAnimator applications relient explicitement un gestionnaire d’événements . ObjectAnimator S’occupe de cette étape pour nous.

L’API pour ObjectAnimator est très similaire à l’API pour ViewAnimator, mais nécessite que vous fournissiez l’objet et le nom de la propriété à mettre à jour. L’exemple suivant montre un exemple d’utilisation ObjectAnimatorde :

MyCustomObject myObj = new MyCustomObject();
myObj.SomeIntegerValue = -1;

ObjectAnimator animator = ObjectAnimator.OfFloat(myObj, "SomeIntegerValue", 0, 100);
animator.SetDuration(1000);
animator.Start();

Comme vous pouvez le voir dans l’extrait de code précédent, ObjectAnimator peut réduire et simplifier le code nécessaire pour animer un objet.

Animations dessinables

L’API d’animation finale est l’API d’animation dessinable. Les animations pouvant être dessinées chargent une série de ressources Drawable l’une après l’autre et les affichent séquentiellement, de la même façon qu’un dessin animé à retournement.

Les ressources dessinables sont définies dans un fichier XML qui a un <animation-list> élément comme élément racine et une série d’éléments <item> qui définissent chaque image dans l’animation. Ce fichier XML est stocké dans le /Resource/drawable dossier de l’application. Le code XML suivant est un exemple d’animation pouvant être dessinée :

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/asteroid01" android:duration="100" />
  <item android:drawable="@drawable/asteroid02" android:duration="100" />
  <item android:drawable="@drawable/asteroid03" android:duration="100" />
  <item android:drawable="@drawable/asteroid04" android:duration="100" />
  <item android:drawable="@drawable/asteroid05" android:duration="100" />
  <item android:drawable="@drawable/asteroid06" android:duration="100" />
</animation-list>

Cette animation s’exécute sur six images. L’attribut android:duration déclare la durée d’affichage de chaque image. L’extrait de code suivant montre un exemple de création d’une animation Drawable et de son démarrage lorsque l’utilisateur clique sur un bouton à l’écran :

AnimationDrawable _asteroidDrawable;

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);

    _asteroidDrawable = (Android.Graphics.Drawables.AnimationDrawable)
    Resources.GetDrawable(Resource.Drawable.spinning_asteroid);

    ImageView asteroidImage = FindViewById<ImageView>(Resource.Id.imageView2);
    asteroidImage.SetImageDrawable((Android.Graphics.Drawables.Drawable) _asteroidDrawable);

    Button asteroidButton = FindViewById<Button>(Resource.Id.spinAsteroid);
    asteroidButton.Click += (sender, e) =>
    {
        _asteroidDrawable.Start();
    };
}

À ce stade, nous avons abordé les fondements des API d’animation disponibles dans une application Android.

Résumé

Cet article a présenté de nombreux nouveaux concepts et API pour aider à ajouter des graphiques à une application Android. Tout d’abord, il a abordé les différentes API graphiques 2D et montré comment Android permet aux applications de dessiner directement à l’écran à l’aide d’un objet Canvas. Nous avons également vu d’autres techniques qui permettent de créer des graphiques de manière déclarative à l’aide de fichiers XML. Nous avons ensuite abordé les anciennes et nouvelles API pour la création d’animations dans Android.