Créer une transition d'image

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.