Skip to content

4 juillet 2010 | Rédigé par Axon

129

Personnaliser une ListView [Tutoriel Android n°7]

Les ListView sont très utiles pour afficher clairement un grand nombre de données. Néanmoins insérer une simple ListView dans son application Android peut ne pas convenir esthétiquement parlant. Nous allons donc voire comment personnaliser une ListView.

Alors comme d’habitude avant de se lancer dans le code je vous montre ce que l’on veut faire :

Pour commencer, récupérez 3-4 icônes pour pouvoir développer votre ListView personnalisée, comme vous pouvez le constater moi j’ai récupéré les icônes de la suite Office.

Code XML

Nous allons d’abord créer une ListView dans le fichier main.xml, il n’y a aucune difficulté pour cette étape.

<?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/listviewperso"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
      />
 
</LinearLayout>

Maintenant créons un nouveau fichier XML que l’on va appeler affichageitem.xml, qui comme son nom l’indique va nous permettre de créer la vue qui affichera l’item dans la ListView. Voici un petit schéma montrant comment nous allons construire notre vue affichageitem:


Donc voici le fichier affichageitem.xml correspondant à ce schéma. Normalement il n’y a pas de difficulté particulière donc je ne vais pas donner d’explications particulières ;) mais cela n’empêche que si vous ne comprenez pas, vous pouvez me poser des questions en laissant un commentaire.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
 
    <ImageView
		android:id="@+id/img"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
	   	android:layout_gravity="center_vertical"
	   	android:padding="10px"
		/>
 
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:orientation="vertical"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	   	android:layout_gravity="center_vertical"
	   	android:paddingLeft="10px"
	    android:layout_weight="1"
	    >
 
	    <TextView android:id="@+id/titre"
	         android:layout_width="fill_parent"
	         android:layout_height="fill_parent"
	         android:textSize="16px"
	         android:textStyle="bold"
	         />
 
	    <TextView android:id="@+id/description"
	         android:layout_width="fill_parent"
	         android:layout_height="fill_parent"
	         />
 
    </LinearLayout>
 
</LinearLayout>

Concernant le codage XML, c’est fini ! Maintenant passons à la partie code JAVA.

Code JAVA

Encore une fois, comme d’habitude j’ai commenté le code JAVA, je n’ai donc pas d’explication à faire en plus. Simplement grâce à ce tutoriel Android, vous allez apprendre à utiliser les SimpleAdapter, les AlertDialog, et bien évidemment les ListView (et oui quand même c’est un peu pour ça qu’on est là…) ;) Alors voici le code JAVA :

package com.tutomobile.android.listView;
 
import java.util.ArrayList;
import java.util.HashMap;
 
import com.tutomobile.android.listView.R;
 
import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.AdapterView.OnItemClickListener;
 
public class Tutoriel5_Android extends Activity {
 
	private ListView maListViewPerso;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        //Récupération de la listview créée dans le fichier main.xml
        maListViewPerso = (ListView) findViewById(R.id.listviewperso);
 
        //Création de la ArrayList qui nous permettra de remplire la listView
        ArrayList<HashMap<String, String>> listItem = new ArrayList<HashMap<String, String>>();
 
        //On déclare la HashMap qui contiendra les informations pour un item
        HashMap<String, String> map;
 
        //Création d'une HashMap pour insérer les informations du premier item de notre listView
        map = new HashMap<String, String>();
        //on insère un élément titre que l'on récupérera dans le textView titre créé dans le fichier affichageitem.xml
        map.put("titre", "Word");
        //on insère un élément description que l'on récupérera dans le textView description créé dans le fichier affichageitem.xml
        map.put("description", "Editeur de texte");
        //on insère la référence à l'image (convertit en String car normalement c'est un int) que l'on récupérera dans l'imageView créé dans le fichier affichageitem.xml
        map.put("img", String.valueOf(R.drawable.word));
        //enfin on ajoute cette hashMap dans la arrayList
        listItem.add(map);
 
        //On refait la manip plusieurs fois avec des données différentes pour former les items de notre ListView
 
        map = new HashMap<String, String>();
        map.put("titre", "Excel");
        map.put("description", "Tableur");
        map.put("img", String.valueOf(R.drawable.excel));
        listItem.add(map);
 
        map = new HashMap<String, String>();
        map.put("titre", "Power Point");
        map.put("description", "Logiciel de présentation");
        map.put("img", String.valueOf(R.drawable.powerpoint));
        listItem.add(map);
 
        map = new HashMap<String, String>();
        map.put("titre", "Outlook");
        map.put("description", "Client de courrier électronique");
        map.put("img", String.valueOf(R.drawable.outlook));
        listItem.add(map);
 
        //Création d'un SimpleAdapter qui se chargera de mettre les items présent dans notre list (listItem) dans la vue affichageitem
        SimpleAdapter mSchedule = new SimpleAdapter (this.getBaseContext(), listItem, R.layout.affichageitem,
               new String[] {"img", "titre", "description"}, new int[] {R.id.img, R.id.titre, R.id.description});
 
        //On attribut à notre listView l'adapter que l'on vient de créer
        maListViewPerso.setAdapter(mSchedule);
 
        //Enfin on met un écouteur d'évènement sur notre listView
        maListViewPerso.setOnItemClickListener(new OnItemClickListener() {
			@Override
        	@SuppressWarnings("unchecked")
         	public void onItemClick(AdapterView<?> a, View v, int position, long id) {
				//on récupère la HashMap contenant les infos de notre item (titre, description, img)
        		HashMap<String, String> map = (HashMap<String, String>) maListViewPerso.getItemAtPosition(position);
        		//on créer une boite de dialogue
        		AlertDialog.Builder adb = new AlertDialog.Builder(Tutoriel5_Android.this);
        		//on attribut un titre à notre boite de dialogue
        		adb.setTitle("Sélection Item");
        		//on insère un message à notre boite de dialogue, et ici on affiche le titre de l'item cliqué
        		adb.setMessage("Votre choix : "+map.get("titre"));
        		//on indique que l'on veut le bouton ok à notre boite de dialogue
        		adb.setPositiveButton("Ok", null);
        		//on affiche la boite de dialogue
        		adb.show();
        	}
         });
 
    }
}

Une fois le code compilé et l’émulateur Android lancé on obtient donc ceci :

Et lorsque l’on clique sur un item on obtient ceci :

J’espère que ce tutoriel Android, vous a plu et surtout qu’il vous a appris quelque chose… A très vite pour un prochain tuto Android ! :D

Encore un peu de lecture :

129 Commentaires Poster un commentaire
  1. zouriteman
    28 sept 2011

    dans la ligne JAVA de votre tuto :
    SimpleAdapter mSchedule = new SimpleAdapter (this.getBaseContext(), listItem, R.layout.affichageitem ,

    j’ai une erreur sur le « layout.affichageitem » indiquant que affichageitem ne peut pas etre résolu ou n’est pas un field.
    je trouve bizarre que d’autres personnes n’ai pas eu cette erreur.
    Serait-ce en raison de ma version (très récente) de Eclipse et du SDK ?

  2. Goel
    6 oct 2011

    Bonjour,

    Impossible de cliquer sur un élémant de ma listview… en enssayant la machine virtuelle 1.6, je suis arrivé à pourvoir « sélectionner un élément » en utilisant la molette de ma souris. A ce moment, si je remplace « setOnItemClickListener » par « setOnItemSelectedListener », j’arrive à déclancher les actions liées à l’événement (lorsque je bouge ma molette).
    Questions:
    - Pourquoi la molette ne marche pas avec toutes mes machines virtuelles (que j’ai essayé de paramétrer, ex. en mettant un attribut « cliquable ») ???
    - Pourquoi le clic n’est-il pas détecté ??? (non seulement l’événement n’est pas déclenché, mais l’item n’est même pas mis en surbrillance…
    Je vous remercie par avance pour votre aide :) (je suis un poil désespéré !)

  3. Fl0
    18 oct 2011

    Il y’a une version android minimum à avoir ? (j’utilise 2.1) Eclipse me sort une dizaine d’erreurs dans le fichier java :(

  4. NewDevAndroid
    19 oct 2011

    Bonjour est merci pour ce tuto.

    Ma question est, est-il possible de faire cela dynamiquement ?

    Merci d’avance.

  5. mbm
    16 déc 2011

    SVP, esque quelqu’un peut m’aider :(
    je veux afficher une listeview qui contient une image à chaque item;
    les données de la liste sont stochées dans un fichier xml dans le dossier raw.
    j’ai réussi à afficher les variables de type String mais les images non :(
    merci d’avance

  6. Laurent
    20 déc 2011

    Merci beaucoup pour ce tuto !

  7. Quasar
    17 jan 2012

    Please, can you send me this complete source project as example ?

    Because there are other files and configuration that is not exemplified here.

    Thanks

  8. Ulquiorra
    22 jan 2012

    Merci pour ce super tuto :) , ça m’a aidé beaucoup

  9. Salem Moussa
    29 jan 2012

    Bonjour ,je suis debutant en Android,quand je teste un des application que vous avez fourni ,toujours ils n’affichent rien,mon version sdk est:8,j’utilise la version:Android 2.2,svp aident moi ,puisque j’ai un PFE sous la platform Android,Merci d’avance.

  10. 13 fév 2012

    thanks

  11. SuSu
    17 fév 2012

    SVP klk’1 peu m’aider ;; j arrive pas a corriger lé fautes
    j arriv pa connaitr ou j peu recupéré lé images puisk j le copier sou drawable!!!!! :-( ((

  12. Arnaoud
    19 fév 2012

    Merci,
    toujours aussi géniaux tes tutaux.

  13. David
    21 fév 2012

    Votre tuto est tout a fait parfait!!!

    Et surtout merci bcp!!!

  14. David
    21 fév 2012

    Merci maintenant je voudrais avoir des onglets clikable en dessous de ma liste ki me permettent de naviguer d’une page à une autre et surtout retrouver ces onglets sur toutes les pages sans avoir reecrire le meme code.
    Merci de m’accorder votre aide

  15. Camille
    29 fév 2012

    Bonjour !

    Je suis tombé sur votre tuto étant novice sur Android.

    Je voudrais savoir d’où provient le R.drawable.word ???
    Où et comment faire sa déclaration ?

    Merci d’avance.

    Cordialement, Camille

  16. Mna Takwa
    25 mar 2012

    Merci beaucoup pour ce tuto mais j’ai besoin encore losque je clique sur ok sur le boite de dialogue une liste view va t’il s’afficher SVP aide moi et merciiiiiiiii :)

  17. Mna Takwa
    25 mar 2012

    j’ai besoin de faire une action sur le boite de dialogue sous android, losque je clique sur ok une listeview va etre s’afficher SVP qulqu’un m’aider et merciiiiiiiiiiii d’avance :)

  18. marouen
    28 mar 2012

    est il possible lors de la clique sur un item de changer la valeur de son nom??

  19. kirov
    3 avr 2012

    bonjour
    merci beaucoup pour ce tuto , il m’a bien aidé

  20. Beber
    5 avr 2012

    Merci Axon pour ce tuto!!

    comment ferais tu pour charger des img qui se trouvent dans le virtual device??

    par exemple au lieu de :
    map.put(« img », String.valueOf(R.drawable.outlook));

    un truc du genre :
    map.put(« img », String.valueOf(« /data/img1.jpeg));

    ??

  21. Beber
    5 avr 2012

    bon bin ca marche en fait, suffit de rajouter directement le path a la place de String.valueOf(R……..)!!!

  22. imen
    9 avr 2012

    bns tt le monde
    j’ai essayé de faire ce code mais seulemet des listes view vides ont été affiché :/ ni image ni texte
    aide moi s’il vous plais :) et merci d’avance

  23. Starnight
    28 avr 2012

    Bonjour, Grâce a votre tutoriel j’ai réussi a comprend le fonctionnement des listview, mais depuis qq jours j’essaie d’y ajouter un clic sur l’image tout en gardant évidement le clic sur la listview.
    le principe est :
    Clic sur la list view : option: delete edit ( déjà en place et fonctionnel)
    Clic sur image, autre fonction (affichage d’un toast (ex: clic sur image position xx) pour exemple)

    Merci pour vos aides

  24. Anthony
    19 juin 2012

    Bonjour

    Le souhaiterais afficher une image provenant d’une url et non pas de R.drawable

    Comment procéder svp ?

    Merci

  25. 21 juin 2012
  26. tigersplash14
    8 jan 2013

    s’il vous plait aidez moi a ce que quand on clique sur l’un des Item qu’il envois a une activity grace au Intent.chacun des ces 4 Item comportera une Activity DIFERRENT

  27. Walid belf
    19 fév 2013

    Merci bcp pour le tuto, ça aide vraiment trop , merci encore

Trackbacks & Pingbacks

  1. Android Intent : comment passer d'une Activty à une autre | Tuto Mobile
  2. Tuto développement Android : Personnaliser une ListView

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires