Tutoriel Android Query: Chargement asynchrone d'images dans une listview

Ce post sera sûrement le premier d'une série de posts consacrés à une bibliothèque que je découvre, Android Query ou aQuery. Cette bibliothèque suit l'état d'esprit du framework jQuery, dans le sens elle permet au développeur de coder moins pour des taches courantes.

Voici un liste de ce qu'elle permet de faire à l'heure actuelle selon son auteur:

• Moins de code
• Appels AJAX
• Chargement des images
• Parcours des XML
• le chainage des fonctions
• l'attachement de listeners
• l'authentification Facebook, Twitter, Google Reader, Picasa, Youtube, au contacts, emfin åa toutes les API Google ou même à votre propre service.
• Ne plus se préoccuper de la fragmentation (accélération matérielle, etc...)
• Ne plus se préoccuper de différents layout pour les différentes tailles d'écran
• Etc...

Ça paraît prometteur sur le papier, et ça l'est, en tous cas pour ce que j'en ai testé. Pour vous en convaincre, voici une petite démo, qui est déjà en partie obsolète par rapport à la dernière version d'aQuery:

Pour vous montrer la puissance de cette librairie, voici comment tout simplement je l'ai implémentée dans mon appli pour faire un chargement passif de mes image web dans une listview en utilisant un cache sur la SDCard.

• Tout d'abord, récupérez le projet librairie sur Google Code : http://code.google.com/p/android-query/
• Ajoutez la bibliothèque à votre projet:
   
  
• OPTIONNEL: Au chargement de mon activité, j'ai préféré désigner moi-même un répertoire de cache sur ma carte SD plutôt que de garder le répertoire par défaut dans le dossier interne de l'appli:
  
  

  // Le dossier de cache sera créé dans le répertoire de stockage "externe" dans le dossier prévu à cet effet sous le nom du package de votre appli
  String dir = Environment.getExternalStorageDirectory().getPath() + "/Android/data/" + getPackageName() + "/files/images";
  
  final File directory = new File(dir);
  
  // On teste tout de même si le stockage externe est dispo
  if (Environment.MEDIA_MOUNTED.equals(Environment.getExternalStorageState()))
  {
      // Fichier qui va indiquer au système que notre dossier ne contient rien qui intéresse la galerie 
      File nomedia = new File(dir + "/.nomedia");
      if (!nomedia.exists())
      {
          try
          {
              directory.mkdirs();
              nomedia.createNewFile();
          }
          catch (IOException e)
          {
              e.printStackTrace();
          }
      }
      AQUtility.setCacheDir(directory);
  }
  
  
  

• Au chargement de ma ListActivity (ou de mon ListFragment en l'occurence), j'initialise une instance de aQuery:
  
  

  listAq = new AQuery(this.getActivity());

  
  
• Dans mon adapter, je charge l'image à partir de son URL web. Si elle est déjà en cache je l'affiche, sinon je la télécharge:
  
  
  

  public View getView(int position, View convertView, ViewGroup parent)
  {
      View v = super.getView(position, convertView, parent);
  
      //la fonction recycle permet de ne pas dupliquer l'objet aQuery de nombreuses fois lors du parcours de la liste
      AQuery aq = listAq.recycle(v);
  
      
      final String url = "http://une.url.vers/mon.image.jpg";
      Bitmap placeholder = aq.getCachedImage(url);
  
      //Si la liste est en train de défiler rapidement on affiche l'image en mémoire ou rien (ou un placeholder, mais dans mon cas le placeholder est l'image en cache):
      if(aq.shouldDelay(position, v, parent, url))
      {
       
          aq.id(R.id.ImageView_icon).image(placeholder,1f);
   
      //Sinon on télécharge l'image     
      }else
      {
          //Si l'image était en cache en la charge
          if(placeholder!=null)
          {
              //la fonction progress gère le chargement de l'image. La vue R.id.progressBar1 reste affichée jusqu'au chargement
              aq.id(R.id.ImageView_icon).progress(R.id.progressBar1).image(placeholder, 1f);
  
          //Si non on la télécharge, toujours avec une vue de chargement
          }else
          {
              //placeholder2 remplacera l'image en cas d'échec du téléchargement
              Bitmap placeholder2 = aq.getCachedImage(R.id.placeholder);
              aq.id(R.id.ImageView_icon).progress(R.id.progressBar1).image(url, true, true, 0, 0, placeholder2, 0, 1f);
          }
      }
  
      return v;
  }
  

Voilà, vous avez un chargement asynchrone de vos images sans bug et dans un cache. Ma façon de l'implémenter est assez verbeuse, mais si vous avez des besoins moins poussés que moi quelques lignes suffisent. Lorsque je testerai d'autres fonctionnalités de aQuery je posterai mes retours. Je ne peux que vous conseiller de lire la doc de la librairie, qui est très bien fournie.