Challenge: Afficher une liste de plage

Temps : 2h.
Difficulté : ***

Prérequis : ViewBinding, Resources

Ce challenge propose d'afficher une liste de plage, en Kotlin, avec Android, en utilisant un RecyclerView.

Voici les étapes d'implémentation :
> Créer le modèle de données
> Créer l'adaptateur RecyclerView
> Configurer le RecyclerView

> Créer le modèle de données

Tout d'abord, il s'agit de créer un nouveau projet Android.
Ensuite, le modèle de données est mis en place.
Enfin, les données sont implémentées dans un tableau.

1. Créez un nouveau projet Android, nommez-le Beach.
2. Choisissez Empty Activity comme modèle de projet.
3. Ajoutez une nouvelle classe de données Kotlin, nommez-la Beach :

   
    data class Beach(var name: String)
   
   

4. Dans MainActivity, déclarez un tableau d'objet Beach :

   
   val items = Array<Beach>(9, {Beach("Bocca")})
   
   

À présent, les données sont crées.

> Créer l'adaptateur RecyclerView

L'objectif est de créer le RecyclerView.Adapter pour automatiser l'affichage des données des plages. Ensuite, le RecyclerView est à déclarer dans la vue de MainActivity.

1. Ajoutez un nouveau layout xml, nommez-le item_beach.xml, c'est la vue représentant une ligne de la liste :

   
     <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="@dimen/common_size">
   
        <TextView
            android:id="@+id/beachName"
            android:layout_width="match_parent"
            android:layout_height="@dimen/common_size" />
   
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorPrimaryDark" />
    </LinearLayout>
   
   

2. Ajoutez une nouvelle classe Kotlin héritant de RecyclerView.Adapter, nommez-la BeachAdapter :

   
   class BeachAdapter(val items: Array<Beach>) :
     RecyclerView.Adapter<BeachAdapter.ViewHolder>() {
   
    }
   
   

3. Ajoutez la classe interne ViewHolder dans BeachAdapter :

   
   inner class ViewHolder(val binding: ItemBeachBinding) :
     RecyclerView.ViewHolder(binding.root)
   
   

   Note : pour utiliser le ViewBinding il faut modifier le fichier gradle du module :

   
   android {
          ...
          buildFeatures {
            viewBinding true
          }
   
   

   Pour plus d'explication, consultez l'article ChillCoding.com : Accéder facilement aux éléments d'une vue Android.

4. Générez les méthodes liées au RecyclerView.Adapter, dans BeachAdapter :
   la méthode pour retourner le nombre d'élément dans la liste :

   
    override fun getItemCount(): Int = items.size
   
   

   la méthode pour retourner l'affichage d'un élément :

   
   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
      val binding = ItemAndVersionBinding.inflate(LayoutInflater.from(parent.context), parent, false)
      return ViewHolder(binding)
       }
   
   

   la méthode pour charger les données dans la vue :

   
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    }
   
   

5. Ajoutez la fonction de chargement des données dans la vue, dans le ViewHolder :

   
     fun bindBeach(beach: Beach) {
         bindind.beachName.text = "$beach.name"
     }
   
   

6. Implémentez la fonction onBindViewHolder de RecyclerView.Adapter :

   
   override fun onBindViewHolder(holder: ViewHolder, position: Int) {
            holder.bindBeach(items[position])
    }
   
   

Maintenant le RecyclerView.Adapter est implémenté.

> Configurer le RecyclerView

Il s'agit de déclarer un RecyclerView dans la vue MainActivity.
Ensuite, le RecyclerView peut être configuré dans le code.

1. Ajoutez un RecyclerView dans activity_main.xml :

   
    <androidx.recyclerview.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/beachRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
   
   

   Note : Il n'y a pas besoin de LinearLayout ou de ConstraintLayout dans le vue car il y a seulement un élément.

2. Initialisez le layoutManager de beachRecyclerView, dans la méthode onCreate() de MainActivity :

   
   beachRecyclerView.layoutManager = LinearLayoutManager(this)
   
   

3. Initialisez l'adapter de beachRecyclerView, dans le méthode onCreate() de MainActivity:

   
   beachRecyclerView.adapter = BeachAdapter(items)
   
   

Maintenant le RecyclerView de MainActivity est configuré.
Le projet peut finallement être exécuté.

Plus loin

Le but est d'ajouter des informations sur la plage et de peaufiner son affichage.

1. Ajoutez un tableau de string pour les noms des plages.
2. Ajoutez une image pour chaque plage.
3. Ajoutez une description pour chaque plage.
4. Ajoutez un écouteur de clics pour chaque plage (lorsque l'utilisateur clique sur une plage, une fenêtre contextuelle affiche un lien pour obtenir plus de détails).
5. Mettre à jour les informations du RecyclerView :

   
   beachRecyclerView.adapter.notifyDataSetChanged()
   
   

</> Solution du challenge

Obtenez les codes sources dans les Ressources supplémentaires de ce thème sur le RecyclerView.