Android : L'interaction avec les appareils

Animer un RecyclerView

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Voyez comment transmettre à MainActivity l'évènement qui a été cliqué. Ajoutez également des animations lors de la suppression ou de l'insertion d'éléments dans la liste.
06:25

Transcription

Dans cette vidéo, nous allons voir comment embellir un « RecyclerView » grâce à des animations et à un « CardView ». Je ne vais pas entrer en détail ici sur le fonctionnement du « RecyclerView ». Il y a déjà dans notre catalogue de formation, des vidéos qui l'expliquent. Je vais quand même faire un tour du code utilisé avant l'ajout d'animation. Tout d'abord, je vais rajouter ces deux lignes dans le « build.gradle » qui vont permettre d'utiliser le « RecyclerView » et le « CardView ». Attention, à bien mettre ici le même chiffre que vous avez pour votre numéro de compilation. J'ai créé un fichier .XML qui représente une ligne de mon « RecyclerView ». Ce fichier .XML, je l'ai encapsulé à l'aide d'un « CardView ». « CardView » est un composant qui ne peut prendre qu'un enfant. Ici, si je regroupe, je vois que je n'ai qu'un « LinearLayout ». Le « CardView », je vais lui définir l'arrondi de ses bords. Donc, ici, j'ai indiqué 4 dp pour l'arrondi des bords du « CardView ». Je lui applique un « margin » de 8 dp qui me permet de voir son contour et l'ombre qu'il y a en dessous. Sinon, si je le mets à zéro, on ne verra que le fond blanc, on ne verra pas le contour du « CardView ». Mon composant « LinearLayout » principal, je lui applique un « id/root ». Pour le reste, c'est une ligne classique. On peut donc voir ici, mon « CardView ». Passons à « l'Activity Main ». Un fichier .XML classique qui ne contient qu'un « RecyclerView » que j'ai appelé : « rv ». Petite astuce, si je veux voir le rendu avec la cellule que je viens de créer, je sélectionne mon « RecyclerView » et dans « listitem », je sélectionne la cellule que je compte utiliser. Et voilà, il me donne un rendu avec cette version. Attention ici, ce n'est que pour avoir un rendu graphique. Cela n'a aucun impact sur l'exécution de mon application. Passons donc maintenant au « DateAdapter ». Le « DateAdapter », qui étant du « RecyclerView.Adpater », va prendre en paramètre un « ArrayList » d'événements. Et afin de pouvoir afficher les dates d'une manière correcte, nous allons utiliser un « SimpleDateFormat ». Ce « SimpleDateFormat », je l'initialise dans le constructeur où je récupère également l' « ArrayList » des événements que je souhaite afficher. Donc, ici, mon « SimpleDateFormat » j'ai : jour, mois, année, heure. Et j'ai également, la lettre 'h' ici entre guillemets pour préciser que ce qui nous intéresse c'est bien la lettre H et non les heures. Dans mon « CreateViewHolder », je transmets mon fichier « rov_date » qui représente ma ligne. Dans mon « onBindViewHolder », je remplis la description avec la description de mon événement. Et je remplis l'espace qui représente ma date en faisant un « Format » de mon « SimpleDateFormat » «.format » et ici, je lui transmets une date. Et lui va automatiquement convertir ma date en « String » sous ce format-là. « itemcount » pour le nombre de dates à afficher. Et enfin, mon « ViewHolder » qui représente mes pointeurs vers tous les composants graphiques de ma ligne. Passons maintenant au « MainActivity ». J'ai donc un pointeur vers un « RecyclerView », une « ArrayList » d'événements, mon « DateAdapter » et mon objet « calendar ». Je crée mon « ArrayList » que je transmets à mon « DateAdapter ». Je règle mon « RecyclerView » à l'aide de mon « DateAdapter ». Et ici, je vais utiliser un « GridLayoutManager », plutôt qu'un « LinearLayoutManager » comme on peut voir régulièrement, qui va faire en sorte qu'au lieu d'afficher les éléments les uns en dessous des autres, je les afficherai bien les uns en dessous des autres mais cette fois sur deux colonnes ou plus. Je peux indiquer, ici, le nombre de colonnes. Si je mets une colonne, cela revient à « LinearLayoutManager » classique. Je crée un jeu de données. Grâce à mon objet « calendar », je vais pouvoir déplacer mes mois. Ici, je pars de la date courante et je retire cinquante-et-un mois. Je crée un événement. Je rajoute quarante-huit mois. Je crée un événement. J'en rajoute douze. Je crée un événement. J'ai donc un jeu avec trois données. Et le reste, c'est ce qui est classique de ce qu'on a vu dans les vidéos précédentes. Je vais donc lancer mon projet. J'ai donc mes trois éléments qui s'affichent avec ma date, mon heure. Ici, je les affiche en vue paysage. Je vais donc maintenant rajouter une animation lorsque je vais cliquer sur une cellule. Actuellement, il ne se passe rien. Pour cela, je vais simplement prendre mon élément « LinearLayout » et lui donner en « background » le thème d'ANDROID. Donc, point d'interrogation, ANDROID, deux points, « selectableItemBackground ». Je vais simplement indiquer que mon « LinearLayout » est un objet cliquable. Et donc lui, il va lui attribuer le thème cliquable. Pour rendre ma ligne cliquable, je vais simplement dans le fichier .XML d'une ligne. Dans mon « LinearLayout » parent, je vais rajouter en « background » le thème cliquable d'ANDROID. Donc, point d'interrogation pour dire qu'on parle d'un thème. Et on va utiliser le thème « selectableItemBackground » qui représente le thème indiquant que cet objet est cliquable. Il y aura donc l'animation de clic dessus. Cela marche sur à peu près tous les composants. Je vais revenir dans mon « Adapter ». J'ai ici un pointeur vers ce « LinearLayout » que je vais utiliser. Pour que cela fonctionne, il faut qu'on intercepte les clics, sinon, ce sont les composants à l'intérieur du « LinearLayout » qui les intercepteront. Je vais donc créer un objet anonyme qui intercepte les clics. Et ici je vais créer un « Toast » indiquant sur quel événement j'ai cliqué. Alors, pour récupérer le contexte, n'importe quel composant graphique possède un pointeur vers le contexte. Je prends n'importe quel composant graphique Ici, celui-ci... et je lui demande son contexte. Pour que cela fonctionne, il faut bien sûr, que événement soit final et que mon « Holder » soit également final. Je peux tester. Voilà pour le « CardView » et les animations sur les clics.

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 !