IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Personnaliser une ListView

Image non disponible

Le but de ce tutoriel est d'expliquer comment personnaliser une ListView sous Android.
Commentez Donner une note à l´article (4.5)

Article lu   fois.

Les deux auteurs

Profil ProSite personnel

Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Présentation


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 voir comment personnaliser une ListView.

II. Fonctionnement

Pour commencer, récupérez trois-quatre 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.

II-1. Le Code XML

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

 
Sélectionnez
<?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 :

Image non disponible

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'explication, mais cela n'empêche que si vous ne comprenez pas, vous pouvez me poser des questions en laissant un commentaire.

 
Sélectionnez
<?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.

II-2. le 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 (eh oui quand même c'est un peu pour ça qu'on est là).
Alors voici le code JAVA :

 
Sélectionnez
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 remplir 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 (converti 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ésents 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 attribue à 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éé une boite de dialogue
                AlertDialog.Builder adb = new AlertDialog.Builder(Tutoriel5_Android.this);
                //on attribue 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();
            }
         });
 
    }
}

II-3. Résultat

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

Image non disponible

Et lorsqu'on clique sur un item, on obtient ceci :

Image non disponible

III. Remerciements

Je tiens à remercier tout particulièrement Feanorinhttp://www.developpez.net/forums/u35388/feanorin/ qui a mis ce tutoriel au format Developpez.com.
Merci également à Claude Lelouphttp://www.developpez.net/forums/u124512/claudeleloup/ d'avoir pris le temps de le relire et de le corriger.

IV. Lien

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Axon de Tuto Mobile. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.