Découvrir le développement d'applications avec Android 5

Animer ses vues et layouts

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez découvrir comment mettre en place des animations sur vos vues et vos layouts, très facilement.
05:40

Transcription

Un autre élément que nous allons voir qui va vous permettre d'agrémenter votre interface graphique, ce sont les animations. Il y a plusieurs façons d'animer des objets sur Android, je vais d'abord vous montrer le plus simple de tous, qui est disponible à partir d'Android 3.0 donc normalement, c'est quand même assez ancien maintenant et on pourra s'en servir assez souvent. Le moyen le plus simple à l'heure actuelle c'est d'ajouter dans le XML dans un groupe, c'est animateLayoutChanges vous mettez à true dans n'importe quel groupe, là je suis dans un LinearLayout, animateLayoutChanges et si je venais à ajouter ou à masquer un élément là-dedans, ça va animer cette disparition ou cette ajout. Par exemple, je vais aller dans mon cacheChecker, vous vous rappelez, celui qui changeait la valeur de mon champ Texte et à la fin, au lieu de marquer ça, je vais faire disparaitre mon label. visibility, on va mettre gone, donc ça va le retirer de la vue et au lieu de le retirer d'un coup, ça va animer ce changement donc on va voir ce que ça donne, je vais lancer mon application... Il fait le chargement, et normalement en arrivant à 100% il va disparaitre, et voyez... il a disparu et on a eu une petite animation qui a remonté le bouton, si j'avais pas mis cette propriété-là, le bouton aurait sauté directement en haut bon ça ce sont les premiers types d'animation, tous les changements de layout, donc de positionnement des éléments dans un groupe peuvent être animés juste en ajoutant cette propriété-là. C'est très simple à faire, et ça apporte déjà beaucoup. Si vous souhaitez aller plus loin, vous pouvez contrôler vos animations, on va par exemple, aller en page d'accueil, et on peut essayer de le faire là, peut-être, dans le cacheChecker, mouais, on va faire ça, tiens. On va dire qu'on va animer le label pour qu'il grossisse en hauteur, on sera pas progressif, on va fixer à l'avance une durée et une taille, c'est juste pour vous montrer le principe, donc on utilise un objectAnimator, on va l'appeler Animation... est égal à objectAnimator, Et là vous devez choisir quel type de propriété vous allez faire varier, nous, on va faire varier la hauteur donc ça sera un entier, uiStatusLabel... L'entier, il s'appelle height alors sachant que cette propriété pour la choisir, là j'ai choisi height, il faut que ce soit quelque chose qui ressemble à set, et il faut trouver une propriété qui puisse être variable donc setText par exemple, non ça marchera pas pour un texte. et là du coup, moi j'ai pris height, qui m'intéresse puisque finalement, on va faire grossir l'élément setHeight, je prends juste le Height et j'enlève la majuscule, et c'est ma propriété. setHeight valeur de départ, on va dire qu'on va commencer à 0 valeur d'arrivée, on va mettre 300 alors attention, c'est en pixels c'est pas en dp pour les animations où est-ce que je suis là, pourquoi j'ai ça ? Ah oui, c'était pour trouver la propriété. Donc là on a notre animation, comme je disais c'est en pixels et non en dp, si vous voulez réfléchir en dp, vous pouvez obtenir la résolution de votre appareil via une classe device, et à partir de cette résolution, vous pouvez faire le calcul pour convertir. On va pas le faire là, parce que c'est pas l'objet de la chose, mais sachez que si vous voulez vous pouvez faire un petit calcul de ratio pour connaitre, si vous voulez 300 dp, et bien combien ça ferait de pixels sur le téléphone-là. On choisit la durée de l'animation, on va dire, bien... 4 secondes, et on va dire animation, point, start et on va lancer ça pour voir si ça marche. Donc ça marche, voyez il a commencé à 0 et puis pendant 4 secondes il grossit, jusqu'à ce qu'il arrive à la fin de son animation, et ensuite, comme on le fait disparaitre ça remonte vers le haut. Donc ça vous montre qu'il est relativement facile de faire ce genre de choses. Si vous souhaitez faire plusieurs animations, les coordonner, tout ça, alors on va renommer cette animation... ... rename... ... height animation... ... 4 secondes., et ensuite on va en créer une autre, donc... object, Animator... alpha... animation... c'est égal à object... Animator... of... cette fois-ci ce sera un Float qu'on va utiliser, sur uiStatusLabel alpha...on va aller de 0... Float... jusqu'à 1... Float... sur la même durée... alpha... animation... j'ai fait une erreur, on la corrigera après... setDuration, donc on va garder 4 000 c'est pour montrer le principe... je vais corriger ça... alpha... animation... il manquait le a, et au lieu de démarrer chacune des animations, je vais créer un Animator, set... AnimatorSet... est égal à newAnimatorSet... et vous allez pouvoir coordonner tout ça, par exemple, animator... point... play... heightAnimation... after, before.... et moi je voudrais with, « en même que »... alphaAnimation... Et ensuite on fait le Start par contre, sur l'Animator. On peut ajouter plusieurs commandes de Play, With, After etc., une fois qu'on est sûr que c'est bon, on appuie sur Start. Mais là vous voyez on a simultanément le alpha qui devient positif et la hauteur qui grossit. Donc voilà pour animer les objets, ce que j'ai montré, c'est pas super utile en terme d'ergonomie, mais c'est utile de savoir comment ça fonctionne, et à vous d'adapter à vos besoins pour vos applications.

Découvrir le développement d'applications avec Android 5

Développez des applications mobiles pour Android. Créez un projet de A à Z sous Android Studio, de l’installation du kit de développement, jusqu’à sa publication sur le Play Store.

3h17 (39 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Android Android 5
Spécial abonnés
Date de parution :17 mars 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !