Apprenez du code : Jetpack Compose – Listes et pagination (Partie 1)

Apprenez à créer des listes et à gérer la pagination dans Jetpack Compose

Cela fait partie d’une série en plusieurs parties sur l’apprentissage de l’utilisation de Jetpack Compose via le code. Cette partie de la série se concentrera sur la création de l’écran de la liste des jeux ainsi que sur les cas de test pour cet écran.

Les autres volets de cette série sortent bientôt !

Si vous entendez parler de la composition du jetpack pour la première fois, Google la décrit comme :

Jetpack Compose est une boîte à outils Android moderne pour créer une interface utilisateur native. Il simplifie et accélère le développement de l’interface utilisateur sur Android, donnant vie à vos applications avec moins de code, des outils puissants et des API Kotlin intuitives. Cela rend la création de l’interface utilisateur Android plus rapide et plus facile.

Il y a beaucoup de mots-clés dans le paragraphe ci-dessus, comme moins de morueet, intuitif, plus rapide et Plus facile. L’une des principales choses qui manquent est la facilité de tester votre interface utilisateur de composition. Compose facilite grandement le test de chacun des composants individuels de l’interface utilisateur séparément.

J’entends ce que vous dites – assez d’écriture !

Quelle application allons-nous construire ?

Oui! Nous allons créer une application de découverte de jeux vidéo ! Vous pouvez faire défiler une liste interminable de jeux, cliquer sur le jeu qui vous intéresse pour voir tous les détails, et s’il y a une vidéo disponible, vous pouvez toutes les regarder ! Nous utiliserons l’incroyable API RAWG pour nos données de jeu.

Disséquer l’écran de démarrage

Comme vous pouvez le voir, il y a 2 composants principaux sur cet écran. La première est la barre d’applications qui a un titre ainsi que des options de recherche et de filtrage. L’autre est votre liste qui est chargée d’afficher tous les jeux et de gérer également la pagination. Codez !

barre d’applications

Nous pouvons concevoir notre barre d’applications en utilisant TopAppBar.

La barre d’application supérieure affiche des informations et des actions liées à l’écran actuel.

Allons de l’avant et créons un composé simple qui a un titre et 2 fonctions pour nos clics de recherche et de filtrage en tant que paramètres d’entrée.

Prévisualisons notre HomeAppBar et voyez ce que nous avons accompli jusqu’à présent.

Il a l’air plutôt bien, mais il manque un peu de style. Donnons une couleur d’arrière-plan à la barre d’applications et modifions également la couleur de nos icônes.

Concevoir une barre d’applications n’a jamais été aussi simple ! notre fin HomeAppBar ressemblera à ceci :

Liste des jeux

Notre liste de jeux est une grille avec 2 éléments dans chaque ligne. Quand on pense aux listes, la première chose qui vient à l’esprit est la RecyclerView outil. Dans la composition, nous avons composables paresseux. Comme vous l’aurez deviné, nous avons LazyColumn pour afficher une liste verticale et LazyRow pour afficher une liste horizontale. Mais pour notre cas d’utilisation spécifique, nous avons un autre composant appelé LazyVerticalGrid qui aide à afficher les éléments dans une grille.

Pour la pagination, nous pouvons utiliser le Paging 3 bibliothèque qui fournit un support de composition.

Les composants lents suivent le même ensemble de principes que le widget RecyclerView.

La bibliothèque de pagination vous permet de charger facilement et progressivement les données.

Observation: Au moment d’écrire ces lignes, lazyVerticalGrid est expérimental et la composition de pagination est toujours alpha. Les deux API peuvent changer à l’avenir et être différentes, comme décrit dans cet article.

Commençons par configurer notre bibliothèque de pagination, puis commençons à consommer les données de notre composition.

Définir une source de données

PagingSource c’est le composant principal de notre bibliothèque de pagination 3. Il est responsable de toutes nos données.

Configurer un Steam PagingData

Maintenant que notre source de pagination est prête, configurons le flux de données dans notre ViewModel. Pager La classe aide à exposer un flux de données de pagination en tant que Flow<PagingData<GameResultsEntity>> de GamesSource. Ce flux est émis à chaque fois Pager rechercher de nouvelles données de notre GamesSource.

Ici le PagingConfig prend pageSize comme paramètre d’entrée qui définit le nombre d’éléments chargés à la fois à partir du PagingSource.

Affichage des données

Maintenant que nous avons configuré un flux de données dans notre ViewModel, il ne reste plus qu’à récupérer ce flux et à l’afficher dans notre LazyVerticalGrid. Pour cela, nous pouvons utiliser le collectAsLazyPagingItems() fonction d’extension qui collecte notre flux et le convertit en LazyPagingItems.

LazyVerticalGrid également besoin de connaître les informations de la cellule. Dans notre cas, puisque nous voulons 2 colonnes fixes, nous pouvons les fournir via l’instance de GrideCells.Fixed.

Combinons notre barre d’applications et notre liste de jeux et voyons ce que nous avons jusqu’à présent !

Nous avons notre liste et nous avons aussi la pagination ! Le tout avec quelques lignes de code !

Concevoir l’objet du jeu

En haut, nous avons l’image de notre jeu, en dessous nous avons le titre du jeu et, en dessous, notre note. La première disposition qui me vient à l’esprit est une Column mais je voulais montrer l’utilisation de ConstraintLayout dans la composition, concevons-la donc en utilisant un ConstraintLayout.

De plus, nous utiliserons la bibliothèque Coil pour afficher les images.

En cours d’exécution, nous avons les éléments suivants :

Nous avons presque atteint notre état final. Ajustons un peu plus notre écran.

Affichage de l’état de chargement et de l’état d’erreur

La bibliothèque de pagination a un support intégré pour afficher l’état de chargement et l’état d’erreur. Nous pouvons obtenir l’état de chargement de LoadState objet pouvant être obtenu auprès de LazyPagingItems.

loadState.refresh est pour quand les données sont chargées pour la première fois et loadState.append est pour chaque recherche après la première fois. L’exécuter maintenant nous donnera ce qui suit :

Je vous laisse l’état d’erreur. Faites-moi part de votre conception dans les commentaires!

Tester les composés

Maintenant que nous avons conçu notre écran de démarrage, voyons comment il peut être testé.

Le test des interfaces utilisateur ou des écrans est utilisé pour vérifier le comportement correct de votre code Compose, améliorant ainsi la qualité de votre application en détectant les erreurs dès le début du processus de développement.

Pour tous nos tests, nous utiliserons ComposeTestRule – UN TestRule qui vous permet de tester et de contrôler des composés et des applications à l’aide de Compose.

Lorsque vous testez votre interface utilisateur, les trois API importantes à prendre en compte sont :

• Localisateurs: Permet de sélectionner un ou plusieurs éléments
• Affirmations: permet de vérifier si l’élément est affiché ou possède certains attributs
• Actions: vous permet d’effectuer certaines actions de prévisualisation, telles que cliquer ou faire défiler

Puisque nous avons d’abord conçu notre barre d’applications, essayons d’écrire un test pour celle-ci.

Le test est assez explicite. Nous chargeons notre barre d’application initiale et passons “Titre” comme titre, puis déclarons qu’un aperçu avec le texte “Titre” est affiché.

Je vous laisse le reste des tests de la barre d’applications. Un exemple de cas de test pourrait être de tester si notre Rechercher et filtre les icônes sont affichées dans la barre d’applications. Soyez créatif et essayez de couvrir autant de tests que possible !

Essayons d’écrire un quiz pour la liste des jeux.

Il y a quelques choses qui se passent dans le test. Tout d’abord, nous nous moquons de nos ViewModel et fourni une réponse simulée pour obtenir les données. Ensuite, nous chargeons notre écran d’accueil et veillons à ce que les jeux soient affichés dans notre liste.

Encore une fois, je vous laisse le reste des tests. Utilisez toute votre créativité et couvrez autant de tests que possible pour l’écran !