Une manière simple d’ajouter des icônes à une ListView

Capture d’écran du résultat final

Saviez-vous que l’on peut obtenir ce résultat sans utiliser de “custom layout” ?

À Gemalto, l’une de mes missions a été de fusionner mon application avec un ancien projet, déjà approuvé par l’équipe marketing. En lançant l’application, on tomberait sur une ListView qui sert à naviguer dans les différents écrans de l’application.

Pour arriver à ce résultat rapidement et sans trop d’efforts, j’ai utilisé une combinaison de compound drawables et des layouts par défaut d’Android.

Comment ça marche

  1. Créer une structure qui représente les éléments du menu ;
  2. Créer une liste (le menu) et y ajouter des éléments ;
  3. Mettre en place une ListView dans un des layouts ;
  4. Faire le lien entre le menu et la ListView, en utilisant un Adapter ;
  5. Implémenter la navigation.

Représenter les éléments du menu

Chaque élément du menu est une combinaison d’une image (drawable) et d’une chaîne de caractères. Cette information sera représentée sous la forme d’un objet ImageMenuItem.

Comme recommandé par Google, la chaîne de caractères est stockée en tant que string resource, afin qu’elle soit facile à traduire et à modifier.

Créer une liste d’éléments du menu

Dans l’Activity, on crée l’ArrayList qui stockera tous les éléments:

private final ArrayList<ImageMenuItem> menuItems = new ArrayList<>();

Dans la méthode onCreate() de cette Activity, on remplit cette liste en utilisant ArrayList.add:

static final int ITEM_FIRST = 0;
static final int ITEM_SECOND = 1;

menuItems.add(ITEM_FIRST, new ImageMenuItem(R.drawable.ic_first, R.string.menuitem_first));
menuItems.add(ITEM_SECOND, new ImageMenuItem(R.drawable.ic_second, R.string.menuitem_second));

Mettre en place une ListView

(S’assurer qu’elle soit dotée d’un android:id.)

<?xml version="1.0" encoding="utf-8"?>
<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

Lier le menu à la ListView

final ListView listView = (ListView)findViewById(R.id.listView);
listView.setAdapter(new ImageMenuAdapter(this, menuItems));

Toute la magie de cette solution se situe dans ImageMenuAdapter:

  1. Dire à l’Adapter d’utiliser le simple_list_item_1 d’Android, et
  2. Définir la chaîne de caractères, et ajouter un compound drawable à chaque élément.

Implémenter la navigation

Si l’on a défini des constantes auparavant, c’est pour que la navigation soit simple à gérer :

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
        switch (position) {
            case ITEM_SECOND:
                // Do whatever you want here
                break;
            default:
                Log.w("ImageMenu", "Menu item at position #" + position + " not yet implemented");
        }
    }
});

Pour ceux d’entre vous qui préfèrent lire du code :

« Une manière simple d’ajouter des icônes à une ListView » a été mise à jour pour la dernière fois le 2017-09-19.

Cette page est open source. Vous pouvez l’améliorer sur GitHub.