Principes de base d'Android en Kotlin 07.3 : GridLayout avec RecyclerView

Cet atelier de programmation fait partie du cours Principes de base d'Android en Kotlin. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont listés sur la page de destination des ateliers de programmation Principes de base d'Android en Kotlin.

Cet atelier de programmation fait partie d'une série d'ateliers expliquant comment créer une application de suivi du sommeil qui affiche les données sur le sommeil dans un RecyclerView. Nous vous recommandons de suivre tous les ateliers de programmation dans l'ordre, car ils vous guident pas à pas dans les tâches.

Voici les ateliers de programmation de cette série :

• 7.1 Principes de base de RecyclerView
• 7.2 DiffUtil et liaison de données avec RecyclerView
• 7.3 GridLayout avec RecyclerView
• 7.4 Interagir avec des éléments de RecyclerView
• 7.5 En-têtes dans RecyclerView

Introduction

L'un des principaux atouts de RecyclerView est qu'il vous permet d'utiliser des gestionnaires de mise en page pour contrôler et modifier votre stratégie de mise en page. Un LayoutManager gère la disposition des éléments dans RecyclerView.

RecyclerView est fourni avec des gestionnaires de mise en page prêts à l'emploi pour les cas d'utilisation courants. Par exemple, vous pouvez utiliser LinearLayout pour les listes horizontales et verticales, ou GridLayout pour les grilles. Pour les cas d'utilisation plus complexes, vous devez implémenter un LayoutManager personnalisé.

Dans cet atelier de programmation, vous allez apprendre à afficher des données à l'aide d'une mise en page en grille au lieu d'une liste, en vous appuyant sur l'application de suivi du sommeil de l'atelier de programmation précédent. (Si vous n'avez pas l'application de l'atelier de programmation précédent, vous pouvez télécharger le code de démarrage pour cet atelier de programmation.)

Ce que vous devez déjà savoir

Vous devez maîtriser les éléments suivants :

• Créer une interface utilisateur de base à l'aide d'un Activity, d'un Fragments et d'un Views
• Naviguer entre les fragments et utiliser safeArgs pour transmettre des données entre les fragments
• Afficher les modèles, les fabriques de modèles et les transformations
• LiveData et ses observateurs
• Créer une base de données Room, un DAO et définir des entités
• Utiliser des coroutines pour les tâches de base de données et autres tâches de longue durée
• Implémenter un RecyclerView de base avec une mise en page Adapter, ViewHolder et d'élément
• Implémenter la liaison de données pour RecyclerView
• Créer et utiliser des adaptateurs de liaison pour transformer des données

Points abordés

• Utiliser un autre LayoutManager pour modifier l'affichage de vos données dans le RecyclerView
• Créer une mise en page en grille pour vos données de sommeil

Objectifs de l'atelier

• Utilisez l'application de suivi du sommeil de l'atelier de programmation précédent de cette série.
• Remplacez la liste des données sur le sommeil affichée par RecyclerView dans l'application par une grille de données sur le sommeil.

L'application de suivi du sommeil comporte deux écrans, représentés par des fragments, comme illustré dans la figure ci-dessous.

Le premier écran, affiché à gauche, comporte des boutons permettant de démarrer et d'arrêter le suivi. L'écran affiche certaines données de sommeil de l'utilisateur. Le bouton Effacer supprime définitivement toutes les données que l'application a collectées pour l'utilisateur. Le deuxième écran, à droite, permet de sélectionner une note de qualité du sommeil.

Cette application utilise une architecture simplifiée avec un contrôleur d'UI, un ViewModel et LiveData, ainsi qu'une base de données Room pour conserver les données de sommeil.

Les données sur le sommeil sont affichées dans un RecyclerView. Dans cet atelier de programmation, vous allez modifier l'application pour qu'elle utilise un GridLayout. L'écran final ressemblera à la capture d'écran ci-dessous.

Dans un atelier de programmation précédent, lorsque vous avez ajouté RecyclerView à fragment_sleep_tracker.xml, vous avez ajouté un LinearLayoutManager sans aucune personnalisation. Ce code affiche les données sous forme de liste verticale.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager est le gestionnaire de mise en page le plus courant et le plus simple pour RecyclerView. Il est compatible avec le placement horizontal et vertical des vues enfants. Par exemple, vous pouvez utiliser LinearLayoutManager pour créer un carrousel d'images que l'utilisateur fait défiler horizontalement.

GridLayout

Un autre cas d'utilisation courant consiste à afficher de nombreuses données à l'utilisateur, ce que vous pouvez faire à l'aide de GridLayout. Le GridLayoutManager pour RecyclerView présente les données sous la forme d'une grille que l'utilisateur peut faire défiler, comme illustré ci-dessous.

Du point de vue du design, GridLayout est idéal pour les listes qui peuvent être représentées par des icônes ou des images, comme les listes dans une application de navigation photo. Dans l'application de suivi du sommeil, vous pouvez afficher chaque nuit de sommeil sous forme de grille d'icônes de grande taille. Cette conception permet à l'utilisateur d'obtenir un aperçu de la qualité de son sommeil en un coup d'œil.

Fonctionnement de GridLayout

GridLayout organise les éléments dans une grille de lignes et de colonnes. En cas de défilement vertical, chaque élément d'une ligne occupe un "segment". (Dans ce cas, un segment équivaut à la largeur d'une colonne.)

Dans les deux premiers exemples ci-dessous, chaque ligne est composée de trois segments. Par défaut, le gestionnaire GridLayoutManager assigne chaque élément dans un segment, dans la limite du nombre de segments que vous indiquez. Lorsqu'il atteint ce nombre, il envoie le segment suivant à la ligne suivante.

Par défaut, chaque élément occupe un segment, mais vous pouvez l'élargir en spécifiant le nombre de segments qu'il doit occuper. Par exemple, l'élément supérieur de l'écran le plus à droite (ci-dessous) occupe trois spans.

Remarque  : Span peut signifier "ligne" ou "colonne". Avec GridLayoutManager, vous pouvez utiliser spanCount pour indiquer le nombre de colonnes ou de lignes d'une grille, ainsi que l'espace occupé par un élément de la grille sur le plan horizontal ou vertical.

Lorsque vous créez un GridLayoutManager, vous spécifiez l'orientation séparément du nombre d'étendues. L'étendue est "indépendante de la direction". Dans une configuration verticale (par défaut), "span" et "column" sont équivalents.

Dans cette tâche, vous allez prendre le RecyclerView que vous avez terminé dans le dernier exercice et le mettre à jour pour afficher les données à l'aide d'un GridLayoutManager. Vous pouvez continuer à utiliser l'application de suivi du sommeil de l'atelier de programmation précédent ou télécharger l'application RecyclerViewGridLayout-Starter depuis GitHub.

Étape 1 : Modifiez le LayoutManager

1. Si nécessaire, téléchargez l'application RecyclerViewGridLayout-Starter pour cet atelier de programmation depuis GitHub et ouvrez le projet dans Android Studio.
2. Ouvrez le fichier de mise en page fragment_sleep_tracker.xml.
3. Supprimez le gestionnaire de mise en page de la définition RecyclerView sleep_list.

Code à supprimer :

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager

4. Ouvrez SleepTrackerFragment.kt.
5. Dans OnCreateView(), juste avant l'instruction return, créez un GridLayoutManager vertical de haut en bas avec trois étendues.
   
   Le constructeur GridLayoutManager accepte jusqu'à quatre arguments : un contexte, qui est activity, le nombre d'étendues (colonnes, dans la mise en page verticale par défaut), une orientation (par défaut, verticale) et une indication précisant s'il s'agit d'une mise en page inversée (par défaut, false).

val manager = GridLayoutManager(activity, 3)

6. Sous cette ligne, indiquez à RecyclerView d'utiliser ce GridLayoutManager. RecyclerView se trouve dans l'objet de liaison et s'appelle sleepList. (Voir fragment_sleep_tracker.xml.)

binding.sleepList.layoutManager = manager

Étape 2 : Modifier la mise en page

La mise en page actuelle de list_item_sleep_night.xml affiche les données en utilisant une ligne entière par nuit. Au cours de cette étape, vous allez définir une mise en page d'élément carré plus compacte pour la grille.

Conseil : Si vous ne voulez pas perdre votre mise en page actuelle, commencez par faire une copie du fichier et nommez-la list_item_sleep_night_linear.xml, ou mettez le code en commentaire au lieu de le supprimer.

1. Ouvrez list_item_sleep_night.xml.
2. Supprimez le TextView sleep_length, car le nouveau design n'en a pas besoin.
3. Déplacez quality_string TextView pour qu'il s'affiche sous ImageView. Pour ce faire, vous devez mettre à jour plusieurs éléments. Voici la mise en page finale de l'quality_string TextView :

<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />

4. Dans la vue Design (Conception), vérifiez que le TextView quality_string est positionné sous le ImageView.

Comme vous avez utilisé la liaison de données, vous n'avez rien à modifier dans Adapter. Le code devrait fonctionner et votre liste devrait s'afficher sous forme de grille.

5. Exécutez l'application et observez comment les données de sommeil sont affichées dans une grille.
   
   Notez que ConstraintLayout occupe toujours toute la largeur. GridLayoutManager donne à votre vue une largeur fixe, basée sur son étendue. GridLayoutManager fait de son mieux pour respecter toutes les contraintes lors de la mise en page de la grille, de l'ajout d'espaces blancs ou du découpage des éléments.

6. Dans SleepTrackerFragment, dans le code qui crée GridLayoutManager, remplacez le nombre d'étendues pour GridLayoutManger par 1. Exécutez l'application pour obtenir une liste.
   

val manager = GridLayoutManager(activity, 1)

7. Définissez le nombre d'étendues de GridLayoutManager sur 10 et exécutez l'application. Vous remarquerez que GridLayoutManager peut contenir 10 éléments sur une ligne, mais que les éléments sont désormais coupés.
8. Définissez le nombre d'étendues sur 5 et la direction sur GridLayoutManager.VERTICAL. Exécutez l'application et remarquez comment vous pouvez faire défiler l'écran horizontalement. Vous aurez besoin d'une autre mise en page pour que cela soit esthétique.

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)

9. N'oubliez pas de redéfinir le nombre de spans sur 3 et l'orientation sur "vertical" !

Projet Android Studio : RecyclerViewGridLayout

• Les gestionnaires de mise en page gèrent la façon dont les éléments du RecyclerView sont organisés.
• RecyclerView est fourni avec des gestionnaires de mise en page prêts à l'emploi pour les cas d'utilisation courants, tels que LinearLayout pour les listes horizontales et verticales, et GridLayout pour les grilles.
• Pour les cas d'utilisation plus complexes, implémentez un LayoutManager personnalisé.
• Du point de vue de la conception, GridLayout est idéal pour les listes d'éléments pouvant être représentés par des icônes ou des images.
• GridLayout organise les éléments dans une grille de lignes et de colonnes. En cas de défilement vertical, chaque élément d'une ligne occupe un "segment".
• Vous pouvez personnaliser le nombre de colonnes qu'occupe un élément, ce qui permet de créer des grilles plus intéressantes sans avoir besoin d'un gestionnaire de mise en page personnalisé.
• Créez une mise en page pour un élément de la grille, et le gestionnaire de mise en page s'occupe d'organiser les éléments.
• Vous pouvez définir le LayoutManager pour le RecyclerView dans le fichier de mise en page XML contenant l'élément <RecyclerView> ou par programmation.

Cours Udacity :

• Développer des applications Android avec Kotlin
• Kotlin Bootcamp for Programmers (Formation Kotlin pour les programmeurs)

Documentation pour les développeurs Android :

• Créer une liste avec RecyclerView
• RecyclerView
• LayoutManager
• GridLayoutManager

Cette section répertorie les devoirs possibles pour les élèves qui suivent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. Il revient à l'enseignant d'effectuer les opérations suivantes :

• Attribuer des devoirs si nécessaire
• Indiquer aux élèves comment rendre leurs devoirs
• Noter les devoirs

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ne doivent pas hésiter à attribuer d'autres devoirs aux élèves s'ils le jugent nécessaire.

Si vous suivez cet atelier de programmation par vous-même, n'hésitez pas à utiliser ces devoirs pour tester vos connaissances.

Répondre aux questions suivantes

Question 1

Parmi les éléments suivants, quels sont les gestionnaires de mise en page fournis par Android ? Plusieurs réponses possibles.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Question 2

Qu'est-ce qu'une "étendue" ?

▢ La taille d'une grille créée par GridLayoutManager.

▢ La largeur d'une colonne dans la grille.

▢ Les dimensions d'un élément d'une grille.

▢ Le nombre de colonnes dans une grille à orientation verticale.

Passez à la leçon suivante : 7.4 : Interagir avec des éléments RecyclerView

Cet atelier de programmation fait partie d'une série d'ateliers expliquant comment créer une application de suivi du sommeil qui affiche les données sur le sommeil dans un RecyclerView. Nous vous recommandons de suivre tous les ateliers de programmation dans l'ordre, car ils vous guident pas à pas dans les tâches.

Voici les ateliers de programmation de cette série :

• 7.1 Principes de base de RecyclerView
• 7.2 DiffUtil et liaison de données avec RecyclerView
• 7.3 GridLayout avec RecyclerView
• 7.4 Interagir avec des éléments de RecyclerView
• 7.5 En-têtes dans RecyclerView