Utiliser le RecyclerView sous Android, seconde partie

Avec Android 5 Lollipop, Google a proposé un remplaçant des ListView, le RecyclerView. Les avantages de ce widgets sont détaillés dans la documentation. Cette documentation explique également comment mettre en place les différents composants. Le web a également fleuri de tutos sur ce sujet.

Et pourtant, malgré tous les tutos disponibles en ligne, il est extrêmement difficile d’en trouver un qui vous conduise à un résultat utilisable dans la vie réelle. Mettre en place une liste pour qu’un tap sur un élément affiche un Toast est très limité.

Je vous propose ici de poursuivre mon tuto inspiré de l’application Compagnon Alkemy qui est en production. Dans une première partie, nous avons défini les vues des éléments et l’Adapter, il est temps de passer à l’affichage des composants.

Déclarer le RecyclerView

Dans la première partie, nous avions défini la vue des éléments de la liste. Cette liste, il faut la placer dans votre Activity ou plus certainement dans votre Fragment. Déclarer l’élément dans le Layout est des plus triviales.

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/faction_list_view"

        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        />

</FrameLayout>

Il va y avoir un petit travail complémentaire à réaliser avant de pouvoir ajouter les éléments au RecylcerView. En effet, celui-ci a besoin d’un LayoutManager pour afficher correctement les éléments. Ce LayoutManager a en charge le positionnement des éléments et leur gestion lorsqu’ils ne sont plus visibles.

Affichage des factions dans une liste linéaire verticale dans la version 2 du Compagnon Alkemy.

Pour illustrer ce tuto, la liste est affichée de manière des plus classique, c’est à dire avec les éléments s’enchainant les un à la suite des autres dans une orientation verticale. Le SDK nous fourni un LayoutManager pour gérer ce cas, il s’agit du LinearLayoutManager. Celui-ci pourra être paramétré pour enchainer les éléments verticalement ou horizontalement.

Le SDK nous fournit deux autres LayoutManager, le GridLayoutManager et le StaggeredGridLayoutManager pour un affichage en grille. Dans la plupart des cas, ces trois LayoutManagers seront largement suffisants et vous n’aurez pas besoin de d’implémenter le votre.

Il ne nous reste donc plus qu’à déclarer le RecyclerView dans le fragment et lui ajouter le LayoutManager. Ce code prend place dans la méthode onCreateView puisque nous sommes dans un Fragment.

View v = inflater.inflate(R.layout.list_layout, container, false);

this.factionListView = (RecyclerView) v.findViewById(R.id.recyclerView);

factionListView.setHasFixedSize(false);
LinearLayoutManager llManager = new LinearLayoutManager(getActivity());
llManager.setOrientation(LinearLayoutManager.VERTICAL);
factionListView.setLayoutManager(llManager);

Dernière chose, une fois que nous disposons du RecyclerView avec son LayoutManager, il ne nous reste plus qu’à affecter l’Adapter. Ces lignes sont à la suite des précédentes.

FactionsAdapter factionsAdapter = new FactionsAdapter();
factionListView.setAdapter(factionsAdapter);

Et voilà, on peut lancer l’app ce qui va nous permettre d’afficher… Rien du tout…

Et oui, techniquement, nous avons implanté tous nos composants, mais ils n’ont aucune donnée à afficher…

Et les données à afficher dans tout ça ?

Vous vous souvenez que les données sont affichées grâce à l’Adapter. Nous avions déclaré au sein de celui-ci une liste d’objets de type Faction dans la première partie. Mais nous n’avons pas alimenté cette liste.

Il y a évidemment plusieurs manières d’alimenter cette liste. La première et la plus simple consiste à passer une liste en paramètre du constructeur. Mais ce type d’affichage est souvent dynamique ne serait-ce que parce que vous allez certainement charger des données de manière asynchrone. Je rajoute donc 3 méthodes à l’Adapter : addItem(Faction faction), addItems(List<Faction> factions) et setItems(List<Faction> factions).

final private List<Faction> factions = new ArrayList<>();

public void setFactions(List<Faction> pFactions) {
    this.factions.clear();

    if (pFactions != null) {
        this.factions.addAll(pFactions);
    }

    notifyDataSetChanged();
}

public void addFactions(List<Faction> pFactions) {
    if (pFactions != null) {
        this.factions.addAll(pFactions);
    }

    notifyDataSetChanged();
}

public void addFaction(Faction faction) {
    this.factions.add(faction);

    notifyDataSetChanged();
}

La première est destinée à ajouter un élément à la liste. La seconde ajoute une collection d’éléments à la liste existante et la troisième est destinée à remplacer le contenu de la liste affichée. Bien sûr, ici, je souhaite juste avoir des éléments à afficher. Dans la conception d’un Adapter, il faudra également ajouter des méthodes pour supprimer voir modifier des éléments.

Bien entendu, si vous exécutez le code à ce niveau, vous ne ferez toujours rien apparaitre. Il faut créer une collection d’objets de type Faction et les fournir à l’Adapter après sa création (intérêt limité à cet exemple). Je ne vous détail pas ce code qui est trivial.

Mais voilà, nous avons maintenant une liste qui s’affiche à l’écran. La prochaine étape consistera à ajouter une action au tap d’un élément.

À propos de... Darko Stankovski

iT guy, photographe et papa 3.0, je vous fais partager mon expérience et découvertes dans ces domaines. Vous pouvez me suivre sur les liens ci-dessous.

• 
• 
• 
•