Android Architecture Components - Mise en pratique (Part 4 - Préparation de la vue)

Ceci est la 4ème partie d'un lot de 7 tutoriels.

Vous pouvez repartir de l'étape précédente ou tirer la solution contenue dans le commit 3-Dagger

La solution de cette partie est disponible sur le commit 4-View.

Maquette

Notre application aura un seul écran. Il affichera une liste de cryptomonnaies.

En voici la maquette :

maquette-2

Structure d'une cryptomonnaie

Une cryptomonnaie aura la structure suivante :

coin

NB : le champ id ne sera pas utilisé dans cette partie. Cependant, je l'ajoute dès maintenant en prévision des parties suivantes.

NB bis : pour simplifier, nous stockerons le prix de la monnaie sous forme de String. L'objectif de cet article n'est pas de créer une application bancaire.

Création du modèle de données

Créer un nouveau package db. Y ajouter une une data class Coin.

Mise à jour de la vue

Pour garder une arborescence claire, créer un nouveau package "ui". Y déplacer la MainActivity. Le faire en refactor pour mettre à jour les références.

Nous allons utiliser une RecyclerView pour lister les cryptomonnaies. Chaque bloc relatif à une monnaie sera une CardView.

Ajout des dépendances

Dans build.gradle, ajouter les dépendances suivantes :

Modification du layout de la MainActivity

Modifier activity_main.xml :

Création du layout de cryptomonnaie

Créer dans le répertoire layout un fichier coin_card_view.xml:

Création de templates de texte

Aucune chaîne de caractères affichée à l'utilisateur ne doit être codée "en dur". Il faut utiliser le système natif d'internationalisation et de templating.

Modifier app/src/main/res/values/strings.xml :

Les notations %1$ / %2$ servent à formater la chaîne de caractères. Ces patterns seront détectés et remplacés dynamiquement.

Création de l'Adapter de la RecyclerView

Créer dans le package ui la classe CoinsListAdapter :

La méthode _getString(**int **resId, Object... formatArgs) _formate une chaîne de caractères contenant des patterns.

Le ViewHolder sert à améliorer les performances d'affichage de la liste. Dans notre cas, nous afficherons assez peu d'éléments. De plus, l'ensemble sera sous forme de texte. L'idée est de vous montrer une bonne pratique d'utilisation d'une RecyclerView.

Modification de la MainActivity

Pour tester le rendu de nos layouts, nous allons créer une liste de Coin contenant des données factices.

Modifier MainActivity :

Lancez l'application, elle affiche deux cryptomonnaies :

4-View-1

Conclusion

Désormais, notre application peut afficher une liste de cryptomonnaies. En revanche, en l'état, les données sont mises en dur. Nous allons dans la prochaine étape récupérer nos données de l'extérieur. Pour cela, nous utiliserons Fuel.

Sources


Vous avez trouvé cette publication utile? Cliquer sur
Author image
Nantes (FR)