duplication affichage listView

**l-amoureu** · 02/03/2011, 11h50

Bonjour

J'ai créé une listView pour pouvoir afficher plusieurs "fiches" les une sous les autre, avec a chaque fois une image sur la droite, et quelque champs text sur la gauche.
Jusque là, pas de soucis particulier... pour genre 3 fiches.

Le problème, c'est que maintenant, j'ai besoin de les mettre en favoris si l'utilisateur souhaite garder une trace de la fiche, et lorsque qu'il y a plusieurs favoris (genre 6 ou plus), ils référence tous la bonne fiche (je le sais car, lorsque je clique sur un item, sa fiche complète s'affiche dans une nouvelle activité, et c'est bien la bonne), mais l'affichage au niveau de la ListView n'est plus bon du tout, il y a des sorte de copie, et il suffit que je descende tout en bas, que je remonte, et que je redescende, et l'item a changé d'apparence (mais, je précise, il référence toujours le bon objet, c'est juste l'affichage de la ListView qui est mauvais)

Bref, je pense que vous avez compris.
Je pense qu'il doit y avoir un problème au niveau de mon adapter.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
public class DescriptionVinsAdapter extends BaseAdapter{
	private ArrayList<VinsJson> vins;
	private LayoutInflater myInflater;
	private static Context mContext;
 
	int mPosition;
	ViewHolder mHolder;
 
	private class DownloadFilesTask extends AsyncTask<String, Integer, Long>  {
 
		@Override
		protected Long doInBackground(String... urls) {
			Bitmap image = telechargerImage(urls[0]);
			mHolder.image.setImageBitmap(image);
			return null;
		}
	}
 
	public DescriptionVinsAdapter(Context context, ArrayList<VinsJson> _vins)
	{
		this.myInflater = LayoutInflater.from(context);
		this.vins = _vins;
		mContext = context;
	}
 
	@Override
	public int getCount() {
		return this.vins.size();
	}
 
	@Override
	public Object getItem(int arg0) {
		return this.vins.get(arg0);
	}
 
	@Override
	public long getItemId(int position) {
		return position;
	}
 
	public static class ViewHolder {
		ImageView image;
		TextView nom;
		TextView appellation;
		TextView prix;
	}
 
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder = null;
 
		if (convertView == null)
		{
			mPosition = position;
			mHolder = holder;
 
			convertView = myInflater.inflate(R.layout.item_vin, null);
			holder = new ViewHolder();
			holder.image = (ImageView) convertView.findViewById(R.id.imagePetiteDuVin);
			holder.nom = (TextView) convertView.findViewById(R.id.nomDuChateau);
			holder.appellation = (TextView) convertView.findViewById(R.id.appellationDuVin);
			holder.prix = (TextView) convertView.findViewById(R.id.prixDuVins);
			convertView.setTag(holder);
 
			Bitmap logo = BitmapFactory.decodeResource(mContext.getResources(),mContext.getResources().getIdentifier("com.max:drawable/logo_vinoreco",null,null));
			holder.image.setImageBitmap(logo);
 
			String mImage = vins.get(position).url_small;
//			Bitmap image = telechargerImage(mImage);
//			holder.image.setImageBitmap(image);
 
			new DownloadFilesTask().execute(mImage);
 
			holder.nom.setText(vins.get(position).nom);
			holder.appellation.setText(vins.get(position).appellation);
			holder.prix.setText("Prix : "+vins.get(position).prix);
 
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
 
		return convertView;
 
	}
 
	public static Bitmap telechargerImage(String url){
        Bitmap bm = null;
        try{
        	HttpGet httpRequest = new HttpGet(url);
        	HttpClient httpclient = new DefaultHttpClient();
        	HttpResponse response = (HttpResponse) httpclient.execute(httpRequest);
        	HttpEntity entity = response.getEntity();
        	BufferedHttpEntity bufferedHttpEntity = new BufferedHttpEntity(entity);
        	InputStream is = bufferedHttpEntity.getContent();
        	bm = BitmapFactory.decodeStream(is);
        	is.close();
        	Log.i("dl image","OK");
        } catch(IOException e){
        	Log.e("Erreur","Erreur IO");
        }
        return bm;
    }
}

J'en profite également pour demander de l'aide sur l'affichage différé d'une image de ma listView, vu que c'est le même code.
En fait, chaque item de ma listView contient une image que je télécharge sur internet, sauf que ca prend du temps, et le temps d'affichage de la list en pâti. Je me suis donc dis que j'allais accélérer l'affichage en mettant a chaque item une image par défaut (logo.png), puis lorsque les image sont fini d'être télécharger, l'image par défaut est remplacé par la nouvelle.
J'ai donc utilisé un asyncTask, mais il semblerais que la solution ne convienne pas, sauf que je sais pas pourquoi.

EDIT : pour ma seconde question, j'ai un peu modifié le code, j'ai rajouté un handler dans le GetView, et j'ai laissé le téléchargement de l'image dans le asynsTask, et j'ai mis la partis "associer l'image a l'imageView" dans le handler.
Ça ne plante plus, mais les image ne sont jamais mis à jour par contre

Cordialement.

**MrDuChnok** · 02/03/2011, 12h19

Salut,

Tu n'as pas du comprendre la notion de "ViewHolder". Il te sert à mémoriser les instance de tes composants graphiques pour plus facilement les modifier à chaque demande de cellule.

Du coup, ton code devrait ressembler à quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder = null;
 
		if (convertView == null)
		{
			mPosition = position;
			mHolder = holder;
 
			convertView = myInflater.inflate(R.layout.item_vin, null);
			holder = new ViewHolder();
			holder.image = (ImageView) convertView.findViewById(R.id.imagePetiteDuVin);
			holder.nom = (TextView) convertView.findViewById(R.id.nomDuChateau);
			holder.appellation = (TextView) convertView.findViewById(R.id.appellationDuVin);
			holder.prix = (TextView) convertView.findViewById(R.id.prixDuVins);
			convertView.setTag(holder);
 
 
 
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
 
 
Bitmap logo = BitmapFactory.decodeResource(mContext.getResources(),mContext.getResources().getIdentifier("com.max:drawable/logo_vinoreco",null,null));
			holder.image.setImageBitmap(logo);
 
			String mImage = vins.get(position).url_small;
//			Bitmap image = telechargerImage(mImage);
//			holder.image.setImageBitmap(image);
 
			new DownloadFilesTask().execute(mImage);
 
			holder.nom.setText(vins.get(position).nom);
			holder.appellation.setText(vins.get(position).appellation);
			holder.prix.setText("Prix : "+vins.get(position).prix);
 
		return convertView;
 
	}

**l-amoureu** · 02/03/2011, 16h59

J'ai essayé ta proposition, mais je ne comprend absolument pas.
J'ai essayé dans un premier temps, et ca fonctionné, mais avec du lag.
J'ai ensuite essayé d'autre implémentation, sans succés, donc j'ai voulu revenir a celle que tu m'as conseillé, mais ca ne fonctionne plus, je comprend rien.

J'ai essayé betement de mettre un log, pour mieux comprendre quand est appelé le getView, mais ...

voici mon log, que j'ai mis en dehors des if/else

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Log.i("position + holder", ""+position+" + "+holder.toString() );

Et je ne comprend absolument pas le résultat

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@46090a70
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@46099950
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@460bbf60
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@460a0688
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@46070af0
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@46079f38
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 0 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 1 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 2 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 3 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 4 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80
INFO/position + holder(25037): 5 + com.max.DescriptionVinsAdapter$ViewHolder@460b9c80

Pourquoi est ce que j'ai très souvent le même holder alors que la position de l'item est différente ?
Et, pourquoi est ce que getView est appelé autant de fois ? Pq, visiblement, elle est appelé autant de fois qu'il y a de ligne de log, et rien que pour l'initialisation de la listView.

Quelqu'un pourrait t'il m'expliquer ? Ca pourrait m'aider a comprendre

**MrDuChnok** · 02/03/2011, 18h11

As tu déjà bien saisie la notion d'adapter ?
ici tu auras une présentation rapide :
http://mickael-lt.developpez.com/tut...iser-listview/

le principe de holder c'est pour de l'optimisation. Si cela ne fonctionne pas, essaye de revenir déjà à un principe plus simple

**l-amoureu** · 02/03/2011, 18h54

J'ai lu ce que tu m'a donné, et je pense que j'ai bien compris la notion d'adapter oui.
Mais, ca ne résout pas mon problème.
Je ne vois pas comment est ce que je peux faire pour que l'image associé a mon item ne soit pas retéléchargée a chaque monté ou descente de la listView.

J'ai tout effacé, et j'ai refais mon getView sans holder, le plus simple possible (pour pouvoir optimiser proprement)

D'ailleurs, il y a quelque chose que je ne comprend pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		LinearLayout layoutItem;
 
		if (convertView == null)
		{
			layoutItem = (LinearLayout) myInflater.inflate(R.layout.item_vin, null);
		} else {
			layoutItem = (LinearLayout) convertView;
		}
 
		ImageView imageView = (ImageView) layoutItem.findViewById(R.id.imagePetiteDuVin);
		TextView nom = (TextView) layoutItem.findViewById(R.id.nomDuChateau);
		TextView appellation = (TextView) layoutItem.findViewById(R.id.appellationDuVin);
		TextView prix = (TextView) layoutItem.findViewById(R.id.prixDuVins);
 
		Bitmap image = telechargerImage(vins.get(position).url_small);
		imageView.setImageBitmap(image);
		nom.setText(vins.get(position).nom);
		appellation.setText(vins.get(position).appellation);
		prix.setText("Prix : "+vins.get(position).prix);
 
		return layoutItem;
	}

J'ai pensé a enregistré mon image en local, comme ca plus besoin de la télécharger a chaque fois sur le net, et donc plus de problème de lag je suppose, et en plus, je risque d'en avoir besoin si je veux que l'utilisateur puisse accéder aux favoris hors ligne, mais je sais pas comment le faire.

Cordialement

**MrDuChnok** · 02/03/2011, 19h06

Tu devrais trouver tous les renseignements nécessaires ici :
http://android-developers.blogspot.c...rformance.html

**l-amoureu** · 02/03/2011, 20h11

Bon, je suis partis sur une autre facon de faire.
J'ai décidé de creer un ArrayList<Bitmap> en global (global au niveau de ma class adapter)
Et, ce que je fais, c'est qu'une fois que j'ai téléchargé mon image, je l'enregistre a l'index "position".
Ca fonctionne pour les 6 premiere (car elles sont directement chargé)
Donc, ce que j'ai fais, c'est que les suivante seront chargé lorsque l'on descendra la liste, mais ca fonctionne toujours pas.
Une idée ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder = null;
		Bitmap image;
 
		if (convertView == null)
		{
			convertView = myInflater.inflate(R.layout.item_vin, null);
			holder = new ViewHolder();
			holder.image = (ImageView) convertView.findViewById(R.id.imagePetiteDuVin);
			holder.nom = (TextView) convertView.findViewById(R.id.nomDuChateau);
			holder.appellation = (TextView) convertView.findViewById(R.id.appellationDuVin);
			holder.prix = (TextView) convertView.findViewById(R.id.prixDuVins);
 
			String mImage = vins.get(position).url_small;
			image = telechargerImage(mImage);
			bitmaps.add(image);
 
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		if(position >= bitmaps.size()){
			String mImage = vins.get(position).url_small;
			image = telechargerImage(mImage);
			bitmaps.add(image);
		}
 
		try {
			holder.image.setImageBitmap(bitmaps.get(position));
			holder.nom.setText(vins.get(position).nom);
			holder.appellation.setText(vins.get(position).appellation);
			holder.prix.setText("Prix : "+vins.get(position).prix);
		} catch (Exception e) {
			e.printStackTrace();
		}
 
		return convertView;
	}

Je pense que l'idée est bonne, non ? Ca me permet d'éviter de télécharger sans cesse les image, et je peux y accéder n'importe quand (en théorie).

**l-amoureu** · 02/03/2011, 22h11

C'est bon, j'ai réussi.
J'utilise finalement un Map<String, Bitmap> au lieu de l'arrayList, c'est pleinement fonctionnel

duplication affichage listView

Composants graphiques Android

Discussions similaires

Partager

Partager