[Tutoriel Android] Partie 6 – Les ListView

Android et les listes

Bonjour à tous et bienvenue dans ce nouveau tutoriel qui aura pour sujet les ListView, sujet très fâcheux pour les novices du monde d’Android.

Tout d’abord, je vais vous expliquer le cheminement des données pour les ListView.

Comme son nom l’indique, une ListView est une liste de vue comprenant des items ; pour afficher une liste d’item dans celle-ci, il lui faut un adaptateur de données.

Comme chaque donnée est différente selon l’application, vous devez faire un adaptateur personnalisé pour entreposer celle-ci et l’afficher.

Je vais vous montrer un exemple basique d’une ListView avec un adaptateur nommé ArrayAdapter fourni avec Android.

Tout d’abord, on crée un nouveau projet avec pour seul information dans un layout principal, une ListView avec un id et sa taille ; comme-ceci :

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ListView

android:id="@+id/lvListe"

android:layout_width="fill_parent"

android:layout_height="fill_parentA">

</ListView>

</LinearLayout>

Puis dans notre activité principale, nous allons récupérer notre ListView et lui affecter un adaptateur grâce à la méthode setAdapter. Ajoutons-y un objet de type ArrayAdapter, contenant une liste de String (pas les sous-vêtements !) avec un layout générique d’item que fournit la plateforme par défaut et enfin la liste des données.

public class MonActivite extends Activity {

ListView lvListe;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

lvListe = (ListView)findViewById(R.id.lvListe);

String[] listeStrings = {"France","Allemagne","Russie"};

lvListe.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,listeStrings));

}

}

ArrayAdapter<Type de données>(le contexte,le style des items,les données);

Rien de plus simple, lancez l’application et voyez pas vous-même.

Mais le problème se corse un petit peu si l’on désire ajouter nos propres données, ce qui sera a 99.9% le cas

Imaginons que nous allons faire une bibliothèque avec des livres, je ne vais pas vous refaire un cour de JAVA sur les objets, donc on va directement créer ce qui nous faut pour cette bibliothèque.

La bibliothèque sera définie comme une liste de type List.

Puis, nous allons créer un objet de type livre comprenant un titre et un auteur. Par la suite, vous pouvez étendre les possibilités avec un ISBN, etc… et afficher les informations lorsque l’on clique dessus (tiens ça me rappel un tutoriel où j’ai déjà écrit ça  ).

Voici la composition du type Livre :

public class Livre {

private String titre;

private String auteur;

public Livre(String titre, String auteur) {

this.titre = titre;

this.auteur = auteur;

}

public String getTitre() {

return titre;

}

public void setTitre(String titre) {

this.titre = titre;

}

public String getAuteur() {

return auteur;

}

public void setAuteur(String auteur) {

this.auteur = auteur;

}

}

Comme vous le voyez, on reste dans le B.A-BA de l’objet classique.

Puis dans notre activité, on crée notre bibliothèque.

List<Livre> maBibliotheque = new ArrayList<Livre>();

Puis, créons une fonction se nommant RemplirLaBibliotheque();

private void RemplirLaBibliotheque() {

maBibliotheque.clear();

maBibliotheque.add(new Livre("Starcraft 2 : Les diables du ciel", "William-C Dietz"));

maBibliotheque.add(new Livre("L'art du développement Android", "Mark Murphy"));

maBibliotheque.add(new Livre("Le seuil des ténèbres", "Karen Chance"));

}

J’ai ajouté trois livres aléatoires trouvés sur Amazon, mais vous pouvez en prendre d’autres, je ne serais pas vexé pour autant

Maintenant, nous allons créer notre propre Adaptateur pour gérer ces données. On va commencer par créer un layout qui formera notre item comme ceci :

Puis dans le fichier XML, on rajoutera 2 textview avec respectivement un id Titre et un id Auteur.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="wrap_content">

<TextView

android:id="@+id/tvTitre"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>

<TextView

android:id="@+id/tvAuteur"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>

</LinearLayout>

C’est simple mais efficace ! Nous voilà avec un gabarit correct pour travailler, maintenant on va se pencher sur notre adaptateur personnalisé.

Créez une classe nommée LivreAdapter, héritant de la classe BaseAdapter.

Voilà, notre classe est générée et on va pouvoir la modifier comme nous le voulons.

Le générateur de classes à rajouter directement les méthodes à remplir pour le bon fonctionnement de l’adaptateur, comme ça nous n’aurons pas de temps à perdre (merci Eclipse).

On retrouvera ces méthodes :

getCount() qui retournera le nombre d’éléments dans notre liste.

getItem() qui retournera notre objet livre à la position indiquée.

getItemId() qui retournera l’id du livre.

getView() qui retournera la vue de l’item pour l’affichage.

Rajoutons un type List<Livre> bibilo, dans notre classe et créons un constructeur par défaut prenant une liste et un contexte en paramètres.

Rajoutons aussi à notre classe un LayoutInflater, qui aura pour mission de charger notre fichier XML pour l’item, c’est là que l’on utilisatera le contexte.

List<Livre> biblio;

LayoutInflater inflater;

public LivreAdapter(Context context,List<Livre> biblio) {

inflater = LayoutInflater.from(context);

this.biblio = biblio;

}

Vous suivez toujours ? Oui alors on continue !

Remplissons nos différentes méthodes, tout d’abord getCount qui retournera la taille de la bibliothèque.

@Override

public int getCount() {

return biblio.size();

}

Ensuite, la méthode getItem qui retournera l’item.

@Override

public Object getItem(int position) {

return biblio.get(position);

}

Et la troisième, qui sera getItemId qui retournera la position de l’item.

@Override

public long getItemId(int position) {

return position;

}

Maintenant la dernière, qui est la plus difficile au début mais vraiment au début ^^

Créons une classe juste avant cette méthode (oui on peut le faire en JAVA une classe dans une classe !) qui sera nommée ViewHolder.

Elle nous servira à mémoriser les éléments de la liste en mémoire pour qu’à chaque rafraichissement l’écran ne scintille pas (c’est un genre de buffer comme en graphisme).

private class ViewHolder {

TextView tvTitre;

TextView tvAuteur;

}

Dans la méthode, nous allons utiliser un ViewHolder, puis nous allons vérifier que la view présente n’est pas null sinon nous allons la créer, et ensuite charger l’XML en mémoire pour l’attribuer à notre objet.

Et enfin tagguer notre objet pour pouvoir le récupérer à la prochaine mise à jour graphique.

Et pour finir, on y attribue les données et on retourne la vue.

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder;

if(convertView == null) {

holder = new ViewHolder();

convertView = inflater.inflate(R.layout.itemlivre, null);

holder.tvTitre = (TextView)convertView.findViewById(R.id.tvTitre);

holder.tvAuteur = (TextView)convertView.findViewById(R.id.tvAuteur);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

holder.tvTitre.setText(biblio.get(position).getTitre());

holder.tvAuteur.setText(biblio.get(position).getAuteur());

return convertView;

}

Voilà notre fonction terminée !

Retournons dans notre activité principale et modifions notre code pour que la liste prenne en paramètres notre LivreAdapter comme ceci :

LivreAdapter adapter = new LivreAdapter(this, maBibliotheque);

lvListe.setAdapter(adapter);

Lancez l’application et voyez par vous même !

Si vos données changent, penser à utiliser la fonction adapter.notifyDataSetChanged(); qui aura pour effet de notifier le changement de données et de recharger la liste automatiquement.

J’espère que ce tutoriel vous aura plus et je vous dis à la prochaine

Voici les sources : FormationListeAdapter