Android Kotlin Fundamentals 07.3: GridLayout with RecyclerView

Cet atelier de programmation fait partie du cours Android Kotlin Fundamentals. Vous tirerez le meilleur parti de ce cours si vous suivez les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont répertoriés sur la page de destination des ateliers de programmation Android Kotlin Fundamentals.

Cet atelier de programmation fait partie d'une série qui vous aidera à créer une application de suivi du sommeil qui affiche des données sur votre sommeil dans un RecyclerView. Nous vous recommandons de suivre tous les ateliers de programmation dans l'ordre, car ils progressent étape par étape.

Les ateliers de programmation de cette série sont les suivants:

• 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 RecyclerView
• 7.5 En-têtes dans RecyclerView

Introduction

L'un des points forts de RecyclerView est qu'il vous permet de contrôler et de modifier votre stratégie de mise en page à l'aide de gestionnaires de mise en page. Un LayoutManager gère la disposition des éléments dans le RecyclerView.

RecyclerView est fourni avec des gestionnaires de mise en page prêts à l'emploi pour les cas d'utilisation les plus fréquents. 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 les données à l'aide d'une grille en lieu et place d'une liste, en vous servant de l'application de suivi du sommeil de l'atelier de programmation précédent. (Si vous ne disposez pas de l'application lors de l'atelier de programmation précédent, vous pouvez télécharger le code de démarrage pour cet atelier.)

Ce que vous devez déjà savoir

Vous devez être au fait:

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

Points abordés

• Utiliser un autre LayoutManager pour modifier l'affichage de vos données dans RecyclerView
• Comment créer une présentation en grille pour vos données de sommeil ?

Objectifs de l'atelier

• Créez une application basée sur l'application de suivi du sommeil de l'atelier de programmation précédent.
• Remplacez la liste des données de sommeil affichées par RecyclerView dans l'application par une grille de données de 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. Certaines des données sur le sommeil de l'utilisateur s'affichent à l'écran. Le bouton Effacer supprime définitivement toutes les données collectées par l'utilisateur. Le deuxième écran, à droite, permet de sélectionner un niveau de qualité du sommeil.

Cette application utilise une architecture simplifiée avec un contrôleur d'interface utilisateur, un modèle de vue et LiveDataet une base de données Room pour conserver les données de sommeil.

Les données sur le sommeil s'affichent dans un RecyclerView. Dans cet atelier de programmation, vous modifierez l'application pour qu'elle utilise un objet GridLayout. La capture d'écran ci-dessous ressemblera au dernier écran.

Dans un atelier de programmation précédent, lorsque vous avez ajouté RecyclerView à fragment_sleep_tracker.xml, vous avez ajouté un LinearLayoutManager sans 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 l'emplacement horizontal et vertical des vues enfants. Par exemple, la fonction LinearLayoutManager vous permet de créer un carrousel d'images que l'utilisateur fait défiler horizontalement.

Disposition en grille

Un autre cas d'utilisation courant consiste à présenter beaucoup de données à l'utilisateur, à l'aide de l'instruction GridLayout. Le GridLayoutManager pour RecyclerView affiche les données sous forme de grille à faire défiler, comme illustré ci-dessous.

En termes de conception, GridLayout est idéal pour les listes qui peuvent être représentées par des icônes ou des images, comme des listes dans une application de recherche de photos. Dans l'application de suivi du sommeil, vous pouvez afficher chaque nuit de sommeil sous la forme d'une grande grille d'icônes. Ce mode offrirait à l'utilisateur une vue d'ensemble de la qualité de son sommeil.

Mise en page des éléments dans GridLayout

GridLayout dispose les éléments dans une grille de lignes et de colonnes. Supposons que le défilement vertical s'applique par défaut à chaque élément d'une ligne. (Dans ce cas, un délai équivaut à la largeur d'une colonne.)

Dans les deux premiers exemples ci-dessous, chaque ligne est composée de trois délais. Par défaut, GridLayoutManager définit chaque élément dans un délai jusqu'au nombre de délais, que vous spécifiez. Lorsque le nombre de délais est atteint, il passe à la ligne suivante.

Par défaut, chaque élément n'occupe qu'un seul délai. Toutefois, vous pouvez élargir un élément en spécifiant le nombre de délais qu'il doit occuper. Par exemple, l'élément en haut de l'écran (illustré ci-dessous) occupe trois délais.

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 qu'un élément de la grille peut occuper à l'horizontale ou à la verticale.

Lorsque vous créez un élément GridLayoutManager, vous spécifiez l'orientation séparément du nombre de délais, ce qui est indépendant de l'ensemble de la route. Dans une configuration verticale (par défaut), les paramètres &spant et colonnes équivalents.

Dans cette tâche, vous allez utiliser 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 sur GitHub.

Étape 1: Modifiez le gestionnaire de mise en page

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 de 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 délais.
   
   Le constructeur GridLayoutManager utilise jusqu'à quatre arguments: un contexte (activity), le nombre de délais (colonnes, la mise en page verticale par défaut) et une orientation (par défaut, verticale), et s'il s'agit d'une mise en page inverse (false par défaut).

val manager = GridLayoutManager(activity, 3)

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

binding.sleepList.layoutManager = manager

Étape 2: Modifiez la mise en page

La mise en page actuelle dans list_item_sleep_night.xml affiche les données en utilisant une ligne entière par nuit. Dans cette étape, vous allez définir une mise en page carrée plus compacte pour la grille.

Conseil : Si vous ne souhaitez pas perdre la mise en page actuelle, créez d'abord 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 sleep_length TextView, car il n'est pas nécessaire dans la nouvelle interface.
3. Déplacez le quality_string TextView pour qu'il s'affiche sous le ImageView. Pour cela, vous devez apporter quelques modifications. Voici la mise en page finale pour le 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. Vérifiez dans la vue Design que le TextView quality_string est positionné sous le ImageView.

Comme vous avez utilisé la liaison de données, vous n'avez aucune modification à effectuer dans le Adapter. Le code doit simplement fonctionner, et la liste doit s'afficher sous forme de grille.

5. Exécutez l'application et observez comment les données relatives au sommeil sont affichées dans une grille.
   
   Notez que l'attribut ConstraintLayout occupe toujours toute la largeur. Le GridLayoutManager donne à votre vue une largeur fixe, en fonction de son intervalle. GridLayoutManager s'efforce de répondre à toutes les contraintes liées à la disposition de la grille, en ajoutant des espaces blancs ou des extraits.

6. Dans SleepTrackerFragment, dans le code qui crée la GridLayoutManager, définissez le nombre de délais pour GridLayoutManger sur 1. Exécutez l'application pour obtenir une liste.
   

val manager = GridLayoutManager(activity, 1)

7. Définissez le nombre de délais associé à GridLayoutManager sur 10 et exécutez l'application. Notez que le fichier GridLayoutManager inclura 10 éléments consécutifs, mais que ceux-ci seront désormais associés à des extraits.
8. Définissez le nombre de délais sur 5 et le sens sur GridLayoutManager.VERTICAL. Exécutez l'application et observez comment faire défiler la page horizontalement. Vous aurez donc besoin d'une autre mise en page.

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

9. N'oubliez pas de redéfinir le nombre d'intervalles et de choisir l'orientation verticale.

Projet Android Studio : RecyclerViewGridLayout

• Les gestionnaires de mise en page gèrent la façon dont les éléments de la RecyclerView sont organisés.
• RecyclerView intègre des gestionnaires de mise en page prêts à l'emploi pour des 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, cette approche est particulièrement adaptée aux listes d'éléments pouvant être représentés sous forme d'icônes ou d'images.
• GridLayout dispose les éléments dans une grille de lignes et de colonnes. Selon le défilement vertical, chaque élément d'une ligne occupe ce que l'on appelle un &spant;
• Vous pouvez personnaliser le nombre d'intervalles d'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. Le gestionnaire se charge de l'organiser.
• Vous pouvez définir LayoutManager pour le RecyclerView soit dans le fichier de mise en page XML contenant l'élément <RecyclerView>, soit 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 effectuent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. C'est à l'enseignant de procéder comme suit:

• Si nécessaire, rendez-les.
• Communiquez aux élèves comment rendre leurs devoirs.
• Notez les devoirs.

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ils n'ont pas besoin d'attribuer les devoirs de leur choix.

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

Répondez à ces questions.

Question 1

Quels sont les gestionnaires de mise en page fournis par Android ? Sélectionnez toutes les réponses applicables.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Question 2

Qu'est-ce qu'un &spant?

▢ Taille de la grille créée par GridLayoutManager.

▢ La largeur d'une colonne dans la grille

▢ Dimensions de l'élément sur une grille.

▢ Nombre de colonnes d'une grille ayant une orientation verticale.

Démarrez la leçon suivante : 7.4: Interagir avec les éléments RecyclerView

Cet atelier de programmation fait partie d'une série qui vous aidera à créer une application de suivi du sommeil qui affiche des données sur votre sommeil dans un RecyclerView. Nous vous recommandons de suivre tous les ateliers de programmation dans l'ordre, car ils progressent étape par étape.

Les ateliers de programmation de cette série sont les suivants:

• 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 RecyclerView
• 7.5 En-têtes dans RecyclerView