Android : L'interaction avec les appareils

Améliorer la transition d'image

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce à différents composants graphiques, vous pourrez améliorer votre animation de transition d'image.
04:52

Transcription

Il va falloir que dans « MainActivity », au moment où je veux transmettre mon événement, il va falloir que je transmette en plus mes composants graphiques. Ici, je n'ai pas accès aux composants graphiques, il va falloir que je les transmettre en plus de mon événement dans mon « call back ». Je vais donc aller dans mon interface, j'ai fait « Ctrl+clic » pour rejoindre l'interface dans « DateAdapter » et ici, je transmets l'événement et je vais également transmettre le « ViewHolder ». Attention à bien transmettre le « ViewHolder » c'est-à-dire celui qui est dans « DateAdapter » et non celui qui est dans « RecyclerView » Au moment de mon clic, je transmets mon événement mais également mon « ViewHolder ». Attention à bien déclarer le « Holder » final, nous sommes dans un objet anonyme. Je peux retourner dans « MainActivity », il faut que je complète ma méthode pour correspondre à l'interface. Même chose, le « ViewHolder » de « DateAdapter ». J'ai donc maintenant accès à mes composants graphiques en plus de mon événement. Pour transmettre nos composants graphiques, il faut utiliser la classe « Pair », on nous en propose deux. Ici, comme on va utiliser la « support library », on va utiliser le « Pair » qui utilise la « support library » c'est-à-dire celui-ci. Ce sera un « Pair » de « View» et de « String» que je vais appeler « p1» égal « new Pair ». La première partie de « Pair » va représenter notre composant graphique que je vais appeler ici « ViewHolder.imageView» on va commencer par « imageView » et le deuxième va représenter le nom de la transition, ici, je vais l'appeler « imageTransition ». Là, il m'indique que « Pair » ne prend pas une « imageView » mais une « View » donc il suffit de le re « caster ». Cette « imageTransition », on va aller à l'intérieur de notre fichier xml représentant notre ligne et rajouter la balise « transitionName » avec exactement le même nom. D'ailleurs, on voit qu'il le surligne et si je le laisse, il dit que ce ne sera valable qu'à partir de LOLLIPOP. Je vais faire exactement la même chose avec le « TextView » pour la description, sauf que cette fois, je vais l'appeler « descTransition ». Je retourne dans mon « MainActivity », je duplique ma ligne et sauf que cette fois, au lieu de transmettre l'« imageView », je transmets mon « textView » de description. Donc là, j'ai fait la partie émetteur, c'est-à-dire qu'on transmet toutes ces informations à notre « detailActivity ». Dans notre « detailActivity », il va donc falloir faire la même chose, c'est-à-dire récupérer ça et pour le récupérer, en fait, on va aller dans le fichier xml de « detailActivity » et on va remettre les mêmes noms de transition, c'est-à-dire pour le « textView » je vais faire un copier-coller, pour être sûr, donc l'« imageView » et le « textView ». Ce qui est important, c'est que le nom des transitions corresponde entre les deux fichiers xml, les « ID » n'ont pas d'importance. Et pour terminer, on va utiliser l' « activityOptionCompat » « makeSceneTransitionAnimation » et on va lui transmettre le contexte et nos deux « Pair ». On peut en transmettre plus si besoin est. Dans « startActivity », on va transmettre le « bundle » à partir de nos options. Il ne nous reste plus maintenant qu'à tester. Je clique sur une image, et là on voit mon image se déplacer. Je reviens en arrière, on voit mon image retourner à sa place. Alors, pourquoi a-t-on retiré le « placeHolder » dans « detailActivity » ? Tout simplement parce que si on avait laissé le « placeHolder » il aurait affiché le « placeHolder » pendant la transition de l'animation, c'est-à-dire qu'ici, j'aurais eu un effet que ne serait pas beau c'est-à-dire que là, ce qu'il va faire c'est prendre cette « imageView », l'étirer, puis arrivé au bout, la remplacer par l'« imageView » de « detailActivity » sauf que, comme mon « imageView » de « detailActivity » n'aurait pas été la même, j'aurais vu cette image arriver sur le chemin, je l'aurais vu se transformer en sablier d'attente pour revenir sur cette image-là. Comme on utilise une gestion de cache avec GLIDE, en fait, il ne charge pas la deuxième image, du moins, il ne la charge pas sur Internet, je n'ai donc pas de temps d'attente dû au chargement, ce sera immédiat. Voilà pour les transitions animées.

Android : L'interaction avec les appareils

Exploitez les outils mis à disposition par le kit de développement Android. Améliorez l’expérience utilisateur de vos applications​ mobiles​ avec les composants et les animations.

1h58 (23 vidéos)
Aucun commentaire n´est disponible actuellement
 

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 !