[Tutoriel] : ListView Android

Bonjour tout le monde , ce tutoriel va vous montrer qu'est ce qu'on vu la dérniére séance du Club (23/10/2013 : 4 éme Atelier ) : 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.Pour cela vous devez  faire un adaptateur personnalisé pour entreposer celle-ci et l'afficher.

Il y on a deux types de ListView : Simple et personnalisé . 

1. ListView Simple 

Tout d'abord, on crée un nouveau projet . Dans le layout principal activity_main.xml,on ajoute  une ListView.

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <ListView

        android:id="@+id/listView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent" >

    </ListView>

</RelativeLayout>

Dans l'activité principal,on va récupérer notre ListView et lui affecter un adaptateur grâce à la méthode setAdapter. Pour les données on va créer un objet de type ArrayAdapter qui contient la liste des données qu'on souhaite afficher . Dans notre cas , on va afficher des chaines de caractères (String).

Dans la création de l'objet ArrayAdapter:

 ArrayAdapter(le contexte,le style des items,les données);

• Les données sont enregistrés dans tab (Tableau de type String)
• Le style des items : le style dont on va afficher les données (notre cas : List simple)

package com.enis.tutolistvieweac;                                           import android.app.Activity;                                              import android.os.Bundle;                                                  import android.widget.ArrayAdapter;                                          import android.widget.ListView;                                             public class MainActivity extends Activity {                                ListView lv;       // liste de données à afficher                           String[] tab = {"membre1","membre2","membre3","membre4","membre5","membre6","membre7","membre8","membre9","membre10"};
       @Override                                                           protected void onCreate(Bundle savedInstanceState) {             super.onCreate(savedInstanceState);             setContentView(R.layout.activity_main);                             //Récuperation de ListView crée                                               lv=(ListView)findViewById(R.id.listView1);                                //créattion d'un ArrayAdapter                                             ArrayAdapter arrayadp=new ArrayAdapter(this,  android.R.layout.simple_list_item_1, tab);                                       // associer l'adaptateur à la listeView  
             lv.setAdapter(arrayadp);   
       }                                                                              }

C'est simple vous voyez !

Lancez maintenant l'application 

Voilà les données qui s'affiche dans la liste .

Mais peut'on réagir avec les items ? 

Bien sur , avec la méthode setOnItemClickListener : On peut associer une action lors du clique sur une ligne de ListView : par exemple affiche plus de détailles , passer à une autre activité etc. 

Exemple :

lv.setOnItemClickListener(new OnItemClickListener() {         
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3)
 {
// faire qu'est ce vous voulez si on clique sur une ligne (item)   
// Dans notre cas on va récupérer la donnée sélectionnée , et on l'affiche dans un Toast               
//Récupérer l'elementString s=(String) (lv.getItemAtPosition(arg2));
// Créer et Afficher le Toast                                           
Toast msg=Toast.makeText(MainActivity.this.getApplicationContext(), s, Toast.LENGTH_LONG);
msg.show();               
 }                                                              
});

2. ListView personnalisée : 

Tous ce qu'on a vu jusqu'à maintenant est très simple.

Mais qu'est ce on doit faire pour afficher plusieurs données ou détailles dans cette ListView comme la photo en haut de cette article?  

Dans la suite n va voir comment utiliser les listView personnalisées.

On va faire cette exemple : ListView dont les données sont les écoles d'ingénieurs en Tunisie (ENIS , ENIT,ENIM,ESNISO,ENSI, ENSI, Esprit , ENIG etc. )

On va afficher leurs logos,le nom, et le lein du site web.

On remarque alors que chaque ligne de cette liste contient 3 informations:

• Logo : (de type Drawable ) dans un ImageView.
• Nom :  (de type String) dans un textView
• Site:  (de type String) dans un textView

==> Les écoles sera définie comme une liste de type Ecole (Logo,Nom,Site)

==> Nous avons besoin d'un objet de type Ecole qui contient 2 chaines de caractères (Nom,Site) et un drawable(logo).

Créons un nouveau projet .Puis, nous allons créer un objet de type Ecole comprenant  les 3 variables (informations). Ajoutons une classe nommée Ecole.java 

package com.enis.tutolistvieweac;

import android.graphics.drawable.Drawable;

public class Ecole {

       String nom;

       String site;

       Drawable logo;

        

       public String getNom() {

             return nom;

       }

       public void setNom(String nom) {

             this.nom = nom;

       }

       public String getSite() {

             return site;

       }

       public void setSite(String site) {

             this.site = site;

       }

       public Drawable getLogo() {

             return logo;

       }

       public void setLogo(Drawable logo) {

             this.logo = logo;

       }

      

}

Ensuite , on va ajouter à la layout principale (activity_main.xml) une ListView (Comme la précédente) 

activity_main.xml

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

   <ListView

        android:id="@+id/listView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent" >

   </ListView>

</RelativeLayout>

Dans notre cas (cas d'une listeView personnalisée) , on a besoin de personnaliser chaque ligne de la liste : on crée alor une autre layout row_list.xml : Elle contient : imageView (Logo) , TextView (Nom) et TextView (Site) ; de telle façon qu'elles soient bien formées .

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"           android:layout_height="match_parent"               android:orientation="vertical" >                                     <LinearLayout                                android:layout_width="match_parent"           android:layout_height="wrap_content" >                                 <ImageView                                      android:id="@+id/logo"            android:layout_width="wrap_content"            android:layout_height="wrap_content"                        android:src="@drawable/ic_launcher" />                               <LinearLayout                            android:layout_width="match_parent"            android:layout_height="match_parent"                        android:orientation="vertical" >                                         <TextView                                   android:id="@+id/nom"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="left"                                 android:text="Medium Text"                                android:textAppearance="?android:attr/textAppearanceMedium" />             <TextView                                      android:id="@+id/site"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="right"                             android:text="TextView" />                                       </LinearLayout>                                                   </LinearLayout>                                                  </LinearLayout>

Je pense que vous avez maintenant qu'est ce que c'est l'étape suivant , non ? 

C'est l'adaptateur  , mais cette fois , il est personnalisé.

Nous allons crée une classe nommée CustomListAdapter, 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, (Gain du temps )

Les méthodes  générées  sont :

• getCount() qui retournera le nombre d'éléments dans notre liste.
• getItem() qui retournera notre objet Ecole à la position indiquée.
• getItemId() qui retournera l'id du Ecole.
• getView() qui retournera la vue de l'item pour l'affichage.

On ajoute un constructeur prenant un arrayList et un contexte en paramètres .On crée un ArrayList qui contient une instance de l'objet Ecole comme variable globale, et un  LayoutInflater, qui aura pour mission de charger notre fichier XML pour l'item, c'est là que l'on utilisera le contexte.

ArrayList<Ecole> listEcoles;                                               LayoutInflater layoutInflater;                                       public CustomListAdapter(Context context,ArrayList<Ecole> listEcoles) {           this.listEcoles = listEcoles;                                         layoutInflater = LayoutInflater.from(context);                                  }

Maintenant, on va remplisser les méthodes générées (getView, getCount,getItemId,getItem):

• getCount retourne la taille de la liste (listEcoles):

public int getCount() {                                                                 return listEcoles.size();                                                       }

•  Ensuite, la méthode getItem qui retournera l'item:

public Object getItem(int arg0) {                                                          return listEcoles.get(arg0);                                                 }

• getItemId retourne la position de l'item:

public long getItemId(int arg0) {                                              return arg0;                                                                            }

•  Il nous reste que la dernière méthode , c'est un peu difficile mais simple à comprendre  : getView 

On crée une classe juste avant (ou après) cette méthode (getView):ViewHolder : Elle nous servira à mémoriser les éléments de la liste en mémoire.

Cette classe contient trois variables : les variables de notre item :  deux TextView et un ImageView :

static class ViewHolder {                                                          TextView NomView;                                                                TextView SiteView;                                                                ImageView LogoView;                                                             }

On revient à la méthode getView :On va utiliser la classe crée :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. (On associe à chaque composant la contenue de la variable correspondant)

pour la TextView 1 d'id :nom ==> NomView etc..

Et pour finir, on y attribue les données  de l'ArrayList (ListEcoles) et on retourne la vue.

package com.enis.tutolistvieweac;

import java.util.ArrayList;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class CustomListAdapter extends BaseAdapter{

ArrayList<Ecole> listEcoles;

LayoutInflater layoutInflater;

public CustomListAdapter(Context context,ArrayList<Ecole> listEcoles) {

this.listEcoles = listEcoles;

layoutInflater = LayoutInflater.from(context);

}

public int getCount() {

// TODO Auto-generated method stub

return listEcoles.size();

}

public Object getItem(int arg0) {

// TODO Auto-generated method stub

return listEcoles.get(arg0);

}

public long getItemId(int arg0) {

// TODO Auto-generated method stub

return arg0;

}

public View getView(int arg0, View arg1, ViewGroup arg2) {

ViewHolder holder;

if (arg1==null)

{

arg1= layoutInflater.inflate(R.layout.row_list, null);

holder = new ViewHolder();

// NomView correspondant à la textView associé au nom

holder.NomView = (TextView) arg1.findViewById(R.id.nom);

// SiteView correspondant à la textView associé au site

holder.SiteView = (TextView) arg1.findViewById(R.id.site);

// LogoView correspondant à la textView associé au logo

holder.LogoView = (ImageView) arg1.findViewById(R.id.logo);

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

arg1.setTag(holder);

}

else

{

holder = (ViewHolder) arg1.getTag();

}

// mettre les données dans chaque composante associée

// listEcoles.get(arg0).getNom() : extraire le nom de la listEcoles etc.

holder.NomView.setText(listEcoles.get(arg0).getNom());

holder.SiteView.setText(listEcoles.get(arg0).getSite());

holder.LogoView.setImageDrawable(listEcoles.get(arg0).getLogo());

return arg1;

}

static class ViewHolder {

TextView NomView;

TextView SiteView;

ImageView LogoView;

}

}

Nous avons terminé la configuration de notre adaptateur 

On retourne dans notre activité principale ActivityMain.java , on va déclarer une ListView  , et on lui associer l'adaptateur déjà crée (CustomListAdapter) en  donnant les données à afficher . 
Les données sont stockées dans un ArrayList<Ecole>.
On ajoute une méthode getListData() qui retourne la liste des informations à afficher .
Vous avez besoins des images à afficher (les logos ),de même tailles et situés dans le dossier drawable.  (lien téléchargement : 60kb)

télécharger les logos

MainActivty.java :

package com.enis.tutolistvieweac;

import java.util.ArrayList;

import android.app.Activity;

import android.os.Bundle;

import android.widget.ListView;

public class MainActivity extends Activity {

ListView lv;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Récuperation de ListView crée

lv = (ListView) findViewById(R.id.listView1);

// ecoles_details est un ArayList qui contient les données récupérées par la méthode getListData

ArrayList<Ecole> ecoles_details = getListData();

//associer l'adatateur à la ListView en donnant le contexe (this) et le sources des données

lv.setAdapter(new CustomListAdapter(this, ecoles_details));

}

// méthode qui mettre les données dans un arrayList

private ArrayList<Ecole> getListData() {

ArrayList<Ecole> resultats = new ArrayList<Ecole>();

// instancier un nouvel item de type Ecole ==> il a 3 valeurs :Nom, Logo,Site

Ecole newsData = new Ecole();

newsData.setNom("ENIS");

newsData.setSite("www.enis.rnu.tn");

/*

Puisqu'on crée le  logo comme etant un Drawable : la récupération des images se fait

par :getResources().getDrawable(R.drawable.enis) : retourner l'image "enis" depuis les ressources

*/

newsData.setLogo(getResources().getDrawable(R.drawable.enis));

resultats.add(newsData);

// de méme pour les autres items ;)

newsData = new Ecole();

newsData.setNom("INSAT");

newsData.setSite("www.insat.rnu.tn");

newsData.setLogo(getResources().getDrawable(R.drawable.insat));

resultats.add(newsData);

newsData = new Ecole();

newsData.setNom("ENIT");

newsData.setSite("www.enit.rnu.tn");

newsData.setLogo(getResources().getDrawable(R.drawable.enit));

resultats.add(newsData);

newsData = new Ecole();

newsData.setNom("ENIM");

newsData.setSite("www.enim.rnu.tn");

newsData.setLogo(getResources().getDrawable(R.drawable.enim));

resultats.add(newsData);

newsData = new Ecole();

newsData.setNom("ESPRIT");

newsData.setSite("www.esprit.ens.tn");

newsData.setLogo(getResources().getDrawable(R.drawable.esprit));

resultats.add(newsData);

newsData = new Ecole();

newsData.setNom("ENSI");

newsData.setSite("www.ensi.rnu.tn");

newsData.setLogo(getResources().getDrawable(R.drawable.ensi));

resultats.add(newsData);

//retouner resultats :de type ArrayList<Ecole> qui contient les données

return resultats;

}

}

Lancez maintenant votre l'application et voilà le résultat 

N'hésitez jamais de commenter et poser des questions s'il y a quelque  chose incompréhensible .

Voici alors le code source ( import ) et testez le  :  Lien 

lien de téléchargement mediafire