Android : L'interaction avec les appareils

Créer une transition d'image

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Créez une animation de transition d'éléments graphiques entre deux activités. Ainsi, vous améliorerez la fluidité de votre application.
04:02

Transcription

Dans cette vidéo, je vais vous montrer deux choses, dans la première partie, je vais faire en sorte que lorsque l'on clique sur une ligne de mon « RecylerView », cela lance une nouvelle activité, et affiche la description et l'image de la ligne cliquée. Et dans la deuxième partie, qui est tout l'intérêt de la vidéo, comment le faire avec une transition animée. Alors, pour la première partie, j'ai simplement créé une nouvelle activité que j'ai appelée « DetailActivity. » Dans le fichier XML de cette « activity », j'ai mis un « TexteView » et un « ImageView », rien de très compliqué. Au niveau de « MainActivity », au moment où j'intercepte le clic sur un Évènement, j'ai mis en commentaire la suppression, et à la place, je lance « DetailActivity. » Je vais en plus de ça, transmettre mon Évènement, pour cela, je vais utiliser un « Intent » dans lequel je vais mettre en extra, mon Évènement. « DetailActivity.EVENEMENT_EXTRA », c'est simplement une constante déterminée dans « DetailActivity » qui représente n'importe quel caractère, qu'on verra après. Et ici, mon « Evenement », c'est l' « Evenement » sur lequel j'ai cliqué. L'erreur m'indique que « putExtra » ne prend pas en paramètre d'Evenement. Lui, ce qu'il attend, c'est soit un parcelable, soit un serializable, je vais donc rendre mon « Evenement » serializable, et quand je retourne sur « MainActivity », notre fichier compile. Allons voir le contenu de « DetailActivity » maintenant, donc, la fameuse clé qui est associée à mon « Evenement » qui me permet de récupérer mon « Evenement » dans l' « Intent » à partir de cette clé. J'ai mes pointeurs vers mes différents composants graphiques, je récupère les instances à l'aide des « findViewById », et j'ai plus qu'à remplir mon « TextView » en faisant « evenement.getDescription », et pour l'« ImageView », je vais faire comme « DateAdapter », c'est-à-dire « Glide.load » de mon URL contenu dans mon « Evenement » .l'image d'erreur s'il y a une erreur, et où est-ce que je le mets dans mon «ImageView ». Ici, j'ai retiré la partie «.placeHolder » qui est l'image d'attente de chargement, j'expliquerai après pourquoi, dans la deuxième partie. Je peux donc maintenant tester. J'ai donc ma liste, je clique, j'affiche bien ma description et mon image. Je reviens en arrière. Passons donc à la deuxième partie, c'est-à-dire réaliser exactement la même chose, sauf qu'on va faire une animation de transition. Donc le but, faire en sorte que la description qui est ici se déplace et s'anime jusqu'à cette position et même chose pour l'image, qu'elle s'agrandisse et quelle s'anime jusqu'à cette position. En premier lieu, on va donc activer la transition. Pour cela, on va aller dans le fichier « styles.xml » de notre projet, et on va faire « windowsContentTransition » et on va l'activer. Là, je vais avoir un erreur, ici, si je laisse le curseur, il m'indique que ce n'est valable qu'à partir de « Lollipop ». Je vais donc cliquer dessus, faire Alt + Entrée, et lui dire « Override Resource in values-v21 ». Là, il m'a créé ce dossier avec un nouveau « styles.xml » qui contient exactement la même chose. Sauf que ce « styles.xml » étant dans le répertoire « values-v21 », part du principe que c'est uniquement à partir de « Lollipop », donc ici la ligne n'est plus en erreur. Par contre, si je reviens dans les autres versions, donc toutes les version avant « Lollipop » la ligne est en erreur, je vais donc la supprimer. Ce que nous sommes en train de faire n'est valable qu'à partir de « Lollipop ». Maintenant que j'ai activé les transitions, le but va être de déclarer les composants graphiques et de les relier entre eux. C'est-à-dire relier le composant graphique qui contient l'image dans ma première activité et le composant graphique qui contient l'image dans la deuxième activité, de manière à ce qu'ils puissent faire l'animation.

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 !