Développer une listview(liste déroulante) avec des images dans les items

Dans un précédent tuto Développer une listview personnalisée avec des fichiers xml,j’ai développé une listview personnalisée en appellant des fichiers xml. Je vais dans celui-ci intégré des images dans ma listview.

Premier fichier celui de ma listview que j’appelle liste1.xml

^?Download download.txt

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

Mon fichier xml pour chaque item je crée un tableau pour mettre mon image et mon texte sur la même ligne.

^?Download download.txt

<?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"
    >
  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">
    <TableRow>
	<ImageView
	android:id="@+id/img"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />
 
     <TextView android:id="@+id/text"
         android:layout_width="70dip"
         android:layout_height="wrap_content" android:layout_weight="1"/>
 
 
    />
    </TableRow>
    </TableLayout>
</LinearLayout>

je crée ensuite une class listAvecImage qui est une extension de SimpleAdapter

^?Download download.txt

 
public class listAvecImage  extends SimpleAdapter{
 
  //la ressource de l'image
  private int Resourceid;
//identifiant de l'image dans le xml
private  int[] Ressourceidxml;
 
  //le constructeur
 public listAvecImage  (Context context,
            ArrayList<HashMap<String, String>> data,
            int resource,
            String[] from,
            int[] to,
            int idxml,
            int[] res2) {
                super(context, data, resource, from, to);
                 Resourceid =res2;
                 Ressourceidxml= idxml;
        }
 
 public View getView(int position, View convertView, ViewGroup parent) {
 
    	View v = super.getView(position, convertView, parent);
       //ressource image dans le xml
        ImageView imageView = (ImageView)v.findViewById(Resourceid);
       //affectation image
          imageView.setImageResource(Ressourceidxml[position]);
 
        return v;
    }
}

Et dans la classe ou la listview s’affiche on rajoute le code suivant

^?Download download.txt

 
setContentView(R.layout. liste1);
mPostList= (ListView) findViewById(android.R.id.list)
 ArrayList<HashMap<String, String>> mylist = new ArrayList<HashMap<String, String>>();
   			HashMap<String, String> map = new HashMap<String, String>();
 
map.put("from", "essati");
 mylist.add(map);
 map = new HashMap<String, String>();
 
SimpleAdapter mSchedule = new listAvecImage (this.getContext(), mylist, R.layout.viewitem2,
       new String[] {"from"}, new int[] {R.id.text},R.id.img, new int[]{R.drawable.gmail,R.drawable.facebook,R.drawable.twitter,R.drawable.delicious});
mPostList.setAdapter(mSchedule);

Résultat
listwiew4 Développer une listview(liste déroulante) avec des images dans les items Android France

Il est temps de mettre à profit les tutoriels d’Android France:
Passez à la vitesse supérieure et investissez quelques dizaines d’euros pour acquérir les connaissances qui vous feront gagner de l’argent avec vos applications rendez-vous sur notre boutique Android-france pour ces formations en vidéo

Formation Android en vidéo

Guy

Co-fondateur du site Android france, senior lead developper, passionné de bière et de cigare cubain

17 commentaires

Rémi

30 septembre 2009 à 9 h 46 min

Cet exemple est bourré de fautes et vraiment galère à corriger…

Connectez-vous pour répondre
Guy

30 septembre 2009 à 9 h 55 min

@Rémi: tu peux me dire ou tu as bloqué pour faire des corrections dans mon tuto merci

Connectez-vous pour répondre
Rémi

30 septembre 2009 à 10 h 02 min

Tout d’abord je débute alors je vais essayer de bien expliquer.

Il manque un ‘;’ et déclaration de type sur :
mPostList= (ListView) findViewById(android.R.id.list)

Sinon j’ai pas compris sur :
int[] to,
int idxml,
int[] res2) {
super(context, data, resource, from, to);
Resourceid =res2;
Ressourceidxml= idxml;

Il y a l’air d’avoir en problème entre le fait que les int(res2) sont des ‘tableaux’ int[] et Resourceid =res2 et également le findViewById. Mais si l’on corrige d’un côté ça plante de l’autre.

Sinon petite faute de frappe je pense, qui ne gène pas :
map.put(“from”, “essati”);
Ca devrait être essai nan ?

Pareil pour l’icone gmail qui est écrit ‘gmai’ => R.drawable.gmai

Merci

Connectez-vous pour répondre
Guy

30 septembre 2009 à 10 h 41 min

@Rémi: merci je corrige

Connectez-vous pour répondre
sangorys

15 novembre 2009 à 0 h 46 min

Est-ce que ce code marche ? Je n’arrive ni à le faire marcher, ni à le comprendre

La fonction getView() n’est jamais appelée. Et pourquoi n’implémente-on pas la fonction setViewValue(View view, Object data, String textRepresentation) ?

Merci de donner un peu d’éclaircissement…

Connectez-vous pour répondre
sangorys

15 novembre 2009 à 0 h 55 min

Oui, le code marche

Non, je ne comprends pas pourquoi ça marche. :-/

Merci pour ce tuto (pour info, j’ai trouvé le chapitre ListView de la formation vidéo incompréhensible et inadapté à niveau du lecteur. Domage, parce que le reste est en or)

Connectez-vous pour répondre
sangorys

15 novembre 2009 à 23 h 14 min

En fin de compte, le code donné dans ce tuto ne marche pas. Les explications de Remi du 30 septembre 2009 à 10 h 02 min sont correctes : dommage que l’auteur ne les est pas pris en compte pour mettre à jour son tuto !!!

Connectez-vous pour répondre
_cresus

22 novembre 2009 à 14 h 35 min

Ce tuto est incroyablement mal fait. Ca me donne pas envie d’acheter leurs vidéos si c’est pareil !!

Connectez-vous pour répondre
sangorys

23 novembre 2009 à 12 h 18 min

+1

Dommage

En ce qui me concerne, j’ai appris énormement de choses avec leur vidéo. Je partais de presque 0

Connectez-vous pour répondre
Guy

14 décembre 2009 à 22 h 56 min

Bonjour à tous l’erreur de ce tuto vient de ces lignes que j’ai corrigé
La correction
ImageView imageView = (ImageView)v.findViewById(Resourceid);
//affectation image
imageView.setImageResource(Ressourceidxml[position]);

Connectez-vous pour répondre
AndroGuy

27 octobre 2010 à 12 h 39 min

ouaip, tuto tout moisi
qui ne marche pas entre autre pour le probleme de res2 evoqué

Connectez-vous pour répondre