Discussion :

[gilloddon]

Bonjour à tous,

Je me confronte aujourd'hui à un nouveau problème, après avoir passé l'après-midi dessus.
Dans l'application que je développe, il y a une listeView "personnalisée" qui contient une image à gauche, deux editText au milieu, puis une autre image à droite.

Mon problème est le suivant : l'image de gauche correspond à une image se trouvant sur internet.
Pour éviter de rester trop longtemps bloqué, l'application affiche dans un premier temps la ListView avec une image par défaut, enregistré dans l'application.
Dans un second temps, la ListView doit se réactualiser en affichant les images téléchargées. Et c'est là que ça coince.

Code xml pour structure les éléments de la ListView (list_item.xml) :

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
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="1dp"
    android:background="#FFF"
    android:orientation="horizontal" >
 
    <ImageView
        android:id="@+id/itemImagePhoto"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" />
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_toRightOf="@id/itemImagePhoto"
        android:orientation="vertical" >
 
        <TextView
            android:id="@+id/itemTexteNom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="1dp"
            android:paddingRight="46dp"
            android:textStyle="bold"
            android:textColor="#000"
            android:textAppearance="?android:attr/textAppearanceSmall" />
 
        <TextView
            android:id="@+id/itemTexteMarque"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="1dp"
            android:paddingRight="46dp"
            android:textColor="#000"
            android:textAppearance="?android:attr/textAppearanceSmall" />
 
    </LinearLayout>
 
 
 
    <ImageView
        android:id="@+id/itemImageNote"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />
 
</RelativeLayout>

Le remplissage de base, effectué par une AsyncTask "ProductsTask", se déroule correctement.
Dans un ArrayList, j'enregistre un HashMap pour chaque produit (qui contient les couples clé/valeur pour remplir l'adapter selon img, nom, marque, et note).
Dans ce premier remplissage, je met donc une image intégrée dans l'application, en attendant qu'une autre tâche télécharge les images sur internet. Cette image étant localisable via R.drawable.nom, il n'y a aucun problème avec cet adapter.

Code du premier remplissage de la listView, par une AsyncTask :

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

1
2
3
4
5
6
7
/*** Premier remplissage de la listView, par une AsyncTask ***/
ArrayList<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
...
SimpleAdapter adapter = new SimpleAdapter (context, list, R.layout.list_item,
	new String[] {"img", "nom", "marque", "note"}, 
	new int[] {R.id.itemImagePhoto, R.id.itemTexteNom, R.id.itemTexteMarque, R.id.itemImageNote});
this.listView.setAdapter(adapter);

Le problème survient peu après. Les images téléchargées sur internet sont sous la forme d'un objet "BitMap", alors que l'adapter souhaite un entier en paramètre, ciblant une ressource inscrite dans la classe R.

Après avoir parcouru le site des ressources Android, et après quelques recherches et réflexion, j'ai pensé à quelques pistes : utiliser LayoutInflater, créé ma propre classe Adapter, créer ma propre classe ListView.
Cependant, je ne suis à l'aise avec aucun de ces pistes, et c'est pourquoi j'aimerais avoir vos avis et conseils.
Ou alors, peut-être faut-il procéder autrement ?

Je vous remercie d'avance pour vos réponses.

[nicroman]

Oui... tu te crée une classe qui hérite de ImageView, capable de charger (en arriere plan) une image depuis internet.

Ensuite il faut surcharger l'adapter (le SimpleAdapter), pour faire:

Code :

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

1
2
3
4
5
6
 
public View getView(int position, View convertView, ViewGroup parent) {
   ViewGroup vg = (ViewGroup) super.getView(position,convertView,parent);
   ((UrlImageView)vg.findViewById(R.id.itemImageNote)).setUrl(....);
   return vg;
}

Et voila, des images qui se chargent en background... Apres il faut optimiser avec un loader approprié...

[Ryu2000]

Je viens d'essayer d'utiliser cette méthode, mais je dois me louper quelque part, parce que parfois les mêmes images Bitmap se dessinent alors que c'est impossible.

Ma classe qui extends ImageView fait ç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
public void download(String URL){
	new DownloadFilesTask(this).execute(URL);
}
 
public class DownloadFilesTask extends AsyncTask<String, Integer, Bitmap>{
	private ImageView imageView;
 
	public DownloadFilesTask(ImageView imageView){
		this.imageView=imageView;
	}
 
	@Override
	protected Bitmap doInBackground(String... arg0) {
		return methodeQuiDownloadEtRetourneUnBitmap(arg0[0]);
	}
 
	@Override
	 protected void onPostExecute(Bitmap bitmap) {
		imageView.setImageBitmap(bitmap);
     }
}

Une telle méthode ne peut pas fonctionner ?
J'arrive à finir par provoquer une erreur.
Mais c'est peut être mon getView qui déconne, il redessine toujours 4 fois la vue à la position 0...

======================================================
Edit :
Soit il manque quelque chose, soit j'ai raté un truc dans mon Adapter, parce chez moi :

Code :

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

ViewGroup vg = (ViewGroup) super.getView(position,convertView,parent);

C'est null la première fois.
Puisque convertView est null.

Il faut regarder si convertView est null et si c'est le cas créer un nouveau ViewGroup ?

[gilloddon]

Alors, tout d'abord, merci pour ta réponse.
J'ai bien créé mes propres classes, l'une héritant de ImageView, et l'autre de SimpleAdapter.

J'ai d'abord essayé d'utiliser le CustomSimpleAdapter (en remplaçant les images par une autre image de l'application, dans le code du getView). Ca fonctionne.

J'ai ensuite essayé d'utiliser le CustomImageView, mais l'application plante (même sans aucun modificatione dans setUrl).
En regardant ça de plus près puis en décomposant, je peux voir que c'est en fait le cast qui crash.

Code :

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

1
2
3
4
5
6
7
ViewGroup vg = (ViewGroup) super.getView(position,convertView,parent);
ImageView img = (ImageView) vg.findViewById(R.id.itemImagePhoto);
CustomImageView cust = (CustomImageView) img; // CRASH
 
/* Un cast directement de la view crash aussi
CustomImageView cust = (CustomImageView) vg.findViewById(R.id.itemImagePhoto);
*/

Pourtant, j'ai normalement bien étendu ma classe customImageView (j'ai directement demandé à Eclipse de le faire, à la création de la classe).

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
public class CustomImageView extends ImageView
{
 
	public CustomImageView(Context context)
	{
		super(context);
	}
 
	public CustomImageView(Context context, AttributeSet attrs)
	{
		super(context, attrs);
	}
 
	public CustomImageView(Context context, AttributeSet attrs, int defStyle)
	{
		super(context, attrs, defStyle);
	}
}

Je ne vois pas d'où le problème peut venir.
J'ai vérifié si img (l'ImageView récupérée) était correcte, et il n'y a pas de problème de ce côté puisque je peux bien l'utiliser pour modifier l'image.

Voilà le logcat, à partir du moment où la ligne est exécuté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
40
41
42
43
44
45
46
47
48
49
50
51
52
04-06 10:38:00.629: D/AndroidRuntime(674): Shutting down VM
04-06 10:38:00.629: W/dalvikvm(674): threadid=3: thread exiting with uncaught exception (group=0x4001b188)
04-06 10:38:00.676: E/AndroidRuntime(674): Uncaught handler: thread main exiting due to uncaught exception
04-06 10:38:01.676: E/AndroidRuntime(674): java.lang.ClassCastException: android.widget.ImageView
04-06 10:38:01.676: E/AndroidRuntime(674): 	at com.appli.extend.CustomSimpleAdapter.getView(CustomSimpleAdapter.java:42)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.AbsListView.obtainView(AbsListView.java:1274)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.ListView.measureHeightOfChildren(ListView.java:1147)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.ListView.onMeasure(ListView.java:1060)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:888)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.LinearLayout.measureVertical(LinearLayout.java:350)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.LinearLayout.onMeasure(LinearLayout.java:278)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:888)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.LinearLayout.measureVertical(LinearLayout.java:350)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.LinearLayout.onMeasure(LinearLayout.java:278)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.LinearLayout.measureVertical(LinearLayout.java:464)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.LinearLayout.onMeasure(LinearLayout.java:278)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.View.measure(View.java:7964)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewRoot.performTraversals(ViewRoot.java:763)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.view.ViewRoot.handleMessage(ViewRoot.java:1633)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.os.Handler.dispatchMessage(Handler.java:99)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.os.Looper.loop(Looper.java:123)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at android.app.ActivityThread.main(ActivityThread.java:4363)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at java.lang.reflect.Method.invokeNative(Native Method)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at java.lang.reflect.Method.invoke(Method.java:521)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:860)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)
04-06 10:38:01.676: E/AndroidRuntime(674): 	at dalvik.system.NativeStart.main(Native Method)
04-06 10:38:02.646: I/dalvikvm(674): threadid=7: reacting to signal 3
04-06 10:38:02.807: I/dalvikvm(674): Wrote stack trace to '/data/anr/traces.txt'

[Ryu2000]

T'as un problème de cast de classe à la ligne 42 de CustomSimpleAdapter.java.

T'as pas du inclure tes.packages.CustomImageView partout.

[gilloddon]

Oui, c'est bien ce que j'ai dis (problème de cast).

Je ne pense pas que ça vienne d'un problème de package.
Le CustomSimpleAdapter et le CustomImageView sont dans le même package.

Par ailleurs, eclipse ne compilerait pas (erreur affichée) si la classe/le package n'était pas importé aux endroits où la classe est utilisée.

[Ryu2000]

En tout cas chez moi quand dans un fichier de layout je met CustomImageView ça compile bien, mais j'ai une erreur.

Et c'est en passant par le mode graphique et dans "Custom & Library Views" que j'ai vu que le fichier XML avait besoin du chemin du package.

Mais ton erreur est peut être différente.

[gilloddon]

La construction du CustomSimpleAdapter étant appelée par une tâche asynchrone, et en attendant de trovuer une autre solution, j'effectue le téléchargement des images directement de le getView.

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
public View getView(int position, View convertView, ViewGroup parent)
	{
		// Récupération de base des éléments
		ViewGroup vg = (ViewGroup) super.getView(position,convertView,parent);
 
		// Récupération de l'imageView du produit
		ImageView img = (ImageView) vg.findViewById(R.id.itemImagePhoto);
 
		// Récupération de l'identifiant du produit
		String id = (String) data.get(position).get("id");
 
		try
		{
			URL urlImage = new URL(URL_PRE + id + URL_POST);
			HttpURLConnection connection = (HttpURLConnection) urlImage.openConnection();
			InputStream inputStream = connection.getInputStream();
			img.setImageBitmap(BitmapFactory.decodeStream(inputStream));
			inputStream.close();
		}
		catch (Exception e) { }
 
		return vg;
	}

Ca fonctionne bien, mais j'ai l'impression que l'application recharge la listView (et donc re-télécharge les images) à chaque fois que je change d'activity, et même quand je "déroule/fais glisser" la listeView.
C'est assez gênant, il y a un moyen d'empêcher la listview de se recharger une fois que tout est terminé ? Peut-être effectuer ces changements dans une autre méthode que getView (mais où ? ^^).

Et du coup, est-ce qu'il faudrait "sauvegarder l'état de la liste" quand on change d'activity ?

[Ryu2000]

Une ListView se reconstruit sans arrêt.
Met un System.out.println() dans un getView tu va voir, combien de fois cette méthode est appelé.

Tu devrais stocker les images, mais tu ne peux pas simplement les stocker dans un ArrayList <Bitmap> parce que très vite tu serais Out of memory.

Tu peux par contre les stocker dans la base de donnée SQLite sous forme de blob et les récupérer en tableau d'octets pour ensuite les retransformer en Bitmap.

[gilloddon]

Sous forme de blob dans SQLite ? Est-ce que tu peux me donner plus de détails ?
---
J'ai aussi pensé à les enregistrer en "local" (FileOutputStream...FileInputStream), est-ce que c'est plus efficace que "blob" ?

[Ryu2000]

Après je ne connais pas toutes les solutions, mais si t’arrive à enregistrer directement les fichiers dans le téléphone ou sur sa carte SD ce sera encore plus performant.

Regarde là dedans :
http://developer.android.com/guide/t...a-storage.html

[gilloddon]

Oui, c'est à ça que je pensais (code que j'utilise ci-dessous).
Le plus gros problème en fait, c'est que la listView se recharge à chaque fois, ça gaspille de la ressource pour rien.

L'appli ne va pas arrêter d'ouvrir des flux pour récupérer l'image dans le téléphone

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
  // Enregistrement local de l'image
 
	        FileOutputStream fos = openFileOutput(FILENAME, MODE_PRIVATE);
	        bitmap.compress(Bitmap.CompressFormat.PNG, 90, fos);
	        fos.flush(); fos.close();
 
 
	        // Chargement de l'image
	        ImageView image = (ImageView) findViewById(R.id.mainImageView);
 
	        FileInputStream ins;
	        ins = openFileInput(String.valueOf(711));
	        bitmap = BitmapFactory.decodeStream(ins);
	        ins.close();
 
	        image.setImageBitmap(bitmap);

[Ryu2000]

C'est pour économiser des ressources que la ListView se reconstruit.
Imagine que ta liste possède 300 items et que la ListView en affiche que 3.
Tu peux pas stocker 300 vues en cache pour en afficher 3.

Les ressources sont limité sur un téléphone.
Et reconstruire une ListView ça doit pas être super gourmand en ressource...

C'est ce que j'ai compris, je pense que la réalité doit être dans le sens de ce que je dis.

[gilloddon]

Merci pour vos réponses, notamment pour le CustomAdapter. Voilà finalement mon petit système :

- Une première tâche charge les données de base dans le CustomSimpleAdapter. On a donc rapidement un aperçu de la listeView.

- La méthode getView du CustomSimpleAdapter regarde dans le dossier locale si l'image existe. Si oui, elle est chargée, sinon, image par défaut. Ca permet de mettre en place la ListView directement avec l'adapter conçu pour afficher une image téléchargée (ou non).

- Lorsque cette première tâche est terminée, une seconde tâche se lance afin de télécharger toutes les images manquantes (tableau d'id transmis). Du coup, lorsqu'on bouge la listView (étant donné qu'elle se rafraichi), on voit apapraitre petit à petit les images manquantes.


Ca fonctionne donc plutôt bien, juste quelques léger freeze lorsque le Garbage Collector passe le balais.
Pensez vous que je puisse optimiser davantage ?


A part ça, je n'ai toujours pas trouvé pourquoi le cast du CustomImageView ne focntionne pas (voir plus haut). Mais bon, ça marche bien comme ça, c'est plutôt par curiosité.