Android : L'interaction avec les appareils

Cliquer sur un RecyclerView

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Améliorez l'ergonomie de votre RecyclerView en lui ajoutant une CardView et une animation, après avoir cliqué sur un élément.
07:22

Transcription

Dans cette vidéo, nous allons voir comment faire en sorte que « DateAdapter » puisse transmettre l'événement qui a été cliqué à « MainActivity » ou à toute autre activité qu'il utiliserait. Ainsi, « MainActivity » pourra en faire ce qu'il souhaite : Modifier, le supprimer de la liste, lancer un nouvel écran, etc. Dans notre cas, nous le retirerons de la liste et nous ajouterons même, une petite animation à la suppression. Mais commençons par faire en sorte d'ajouter une animation, lorsque nous ajoutons un événement à notre liste. Je suis donc ici, à l'endroit où nous ajoutons un événement. Je vais maintenant retirer mon « Toast » et à la place, l'ajouter à ma liste. J'ai donc modifié ma liste. Ma liste ayant été modifiée, il faut que je prévienne mon « adapter » que ma liste a été modifiée. Je transmets, donc, à mon « adapter » l'instruction « notifyDataSetChanged » qui lui indique que j'ai modifié l'état de ma liste. l' « Adapter », son rôle étant d'afficher la liste, il va reparcourir toute la liste pour la réafficher avec les nouvelles données. Si je fais ça, je vais avoir un clignotement qui va faire qu'en gros, je vais juste voir ma cellule apparaître. Si je veux faire une animation, je vais pourvoir lui indiquer à quelle position j'ai ajouté l'élément. Pour que l'animation apparaisse, on va faire exprès d'ajouter l'élément au début, car par défaut, la méthode « add » ajoute l'élément à la fin de notre liste. Donc, ici, je lui dis d'ajouter l'événement au début de ma liste. Et au lieu d'utiliser « notifyDataSetChanged », Je vais utiliser « notifyItemInserted » et lui indiquer la position d'insertion. Donc, ici, zéro. Le fait de faire ça, notre « DataAdapter », au lieu de réafficher et de reparcourir toute notre liste, ne va prendre que le premier élément. Voyons le résultat. Je crée donc une nouvelle liste. Ajouter. Et là, on a donc bien eu l'animation, toutes les cellules se sont déplacées pour que notre élément puisse se mettre à la première position. Alors, attention ici, c'est vraiment source d'erreurs. Qu'est-ce qui se passe si je me retrouve dans cette situation ? J'ajoute à la fin et moi je lui indique que j'ajoute au début. Donc, lui, qu'est-ce qu'il va faire ? Il va créer un nouvel élément. Et cet élément, il va se servir du premier événement de ma liste pour le remplir. À savoir, celui qui était déjà à la première place. Donc, je vais avoir en fait mon premier élément qui va se dupliquer. On va le voir deux fois. Normal. Vu qu'en fait moi, j'aurais ajouté à la fin et non au début. Et que je lui indique que j'ai ajouté au début. Ce qui donne... Voilà. Donc, on voit bien que mon élément, ici, s'est dupliqué Mais par contre, l'élément que j'ai ajouté avec « marker text » lui, n'est pas apparu car il est sensé être là. Alors, comment le faire apparaître ? Il suffit d'en ajouter plein et après de « scroller » et au bout d'un moment, par le principe de « RecyclerView », il va réafficher la cellule à son bon emplacement. Nous avons donc, ici, un état incorrect. Je vais donc remettre mon zéro. Faisons en sorte maintenant, que « DateAdapter » puisse transmettre l'événement cliqué à « MainActivity. » Pour cela, nous allons passer par un système d'interface. Je vais donc créer une interface... que je vais appeler : « DateAdapter CallBack. » Qui aura une méthode « onEvenementClick » qui transmettra un événement. Afin que « MainActivity » puisse s'y abonner, je vais déclarer un pointeur vers un élément qui implémente cette interface. Et je vais le rajouter au constructeur. Pour cela, je vais utiliser la petite astuce : un Alt+Entrée sur mon attribut et un « Add constructor parameter. » Je vais laisser les valeurs par défaut, comme ça cela me mettra une erreur à tous les endroits où le constructeur a été appelé. Maintenant que j'ai un pointeur vers cette interface, je peux utiliser sa méthode. Et donc, au moment du clic, au lieu d'afficher un « Toast », je vais pouvoir appeler « onEvenementClick », en lui transmettant notre événement. Ici, une bonne pratique est de vérifier que mon « Adapter » est bien différent de nul. Sinon, j'ai un risque de « NullPointerException. » Je reviens donc sur « MainActivity. » Je me retrouve avec une erreur à l'endroit où mon constructeur a été appelé. Et ici, de la même manière que je m'abonne à un bouton ou que je me suis abonné au « CallBack » de mon « Time picker » de mon « Date picker », je vais m'abonner au « CallBack » de mon interface. Donc, je mets dix. Et il va falloir que j'implémente la méthode que j'ai créée. Donc, Alt+Entrée, « Make 'MainActivity' implement' », donc notre « CallBack. » Il me propose la méthode et j'ai donc ma méthode « onEvenementClick. » Au moment d'un clic sur une ligne de mon « RecyclerView », « DateAdapter » appellera la méthode « onEvenementClick » de l'objet qu'on lui a transmis. Et comme dans « MainActivity », ici, on lui a transmis ma « MainActivity », il l'appellera « MainActivity.onEvenementClick » et j'ai donc mon événement. Je peux donc transférer mon « Toast. » Ici, mon contexte est bien « MainActivity. » Alors, maintenant que j'ai mon événement qui a été cliqué, je veux le supprimer. Pour le supprimer de la liste, il suffit de prendre ma « list.remove » et de lui transmettre mon événement. Mes données ayant changé, je préviens mon « Adapter » que mes données ont changé. Ici, je vais simplement avoir un clignotement où je vais voir mon « RecyclerView » se ré-afficher dans le bon état. Si je veux voir une animation de disparition, il va falloir que je procède de la même manière, c'est-à-dire que je fasse un « DateAdapter.notifyItemRemove » et que je lui indique la position de l'élément qui a été retiré. Pour cela je vais, avant de le retirer, lui demander où il se trouve dans la liste... grâce à la méthode « IndexOf » qui va me retourner sa position dans la liste. Une fois que j'ai sa position dans la liste, je le supprime de la liste puis j'indique qu'un « item » a été retiré à la position élément. Je supprime cette ligne, car « notifyDataSetChanged » indique qu'il faut recharger toute la liste, donc si j'indique cette ligne, elle ne sert à rien. Je peux également mettre en commentaire mon « Toast » et je vais tester. Je vais donc cliquer sur celui du milieu. Et j'ai bien mon animation de suppression. Attention, ici, même chose si je n'indique pas la bonne position de l'élément qui a été supprimé, je vais me retrouver avec des décalages ou avec un affichage incorrect. De la même manière qu'il existe « ItemRemoved » et « ItemInsert », il existe « Move » qui permet de déplacer « Refresh » qui permet de rafraîchir une seule cellule. Il existe aussi la possibilité d'insérer un ensemble d'éléments à une position pour voir plusieurs animations d'insertion. Même chose pour la suppression et même chose pour le déplacement. Voilà, vous savez maintenant comment fonctionnent les animations avec un « RecyclerView. »

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 !