Nous utilisons les cookies sur ce site pour améliorer votre expérience utilisateur.

5 min de lecture 2 partages Pas de commentaire

Picasso : le "peintre" pour développeurs Android

Pour ceux d'entre vous qui ont suivi les derniers développements dans le monde Android, vous savez peut-être que Square Inc. a lancé quelques projets open source une semaine avant le Google I/O 2013. Comme ils s'appuient fortement sur des logiciels open source, c'était une manière de rendre la pareille à la communauté.

picasso
Picasso © Square Inc.

Aujourd'hui j'aimerai vous parler de l'une de ces bibliothèques Android, Picasso, que j'utilise en ce moment pour développer la nouvelle version de notre application AndroidPIT, et qui me facilite vraiment la vie en tant que développeur.

Si vous avez déjà essayé de développer une application Android ou si vous souhaitez savoir comment le faire, sachez qu'il vous faudra probablement afficher des images, certainement téléchargées depuis Internet.

Gérer des images dans Android est extrêmement difficile pour un débutant et particulièrement frustrant si vous n'avez pas assez d'expérience en informatique. Heureusement, le site officiel des Développeurs Android, présente désormais beaucoup de documentation à ce sujet accompagnée d'exemples de projets que vous pouvez utiliser pour faciliter votre travail.

Si vous êtes un développeur Android à plein temps, je suis sûr que vous avez développé votre propre version de votre AwesomeAsyncImageView.java. Tout le monde l'a fait !

Mais puisque je veux que cet article soit compris par la plupart des gens qui utilisent Android et qui sont intéressés par les détails techniques, je vais vous expliquer ce que sont les problèmes qui se produisent lorsque vous avez affaire à des images.

Tout d'abord, vous devez avoir à l'esprit que la batterie de votre appareil est ce qui nourrit le CPU (ou processeur) et plus vous utilisez ce dernier, moins vous aurez de batterie. Je suis sûr que c'est assez évident pour tout le monde.

Donc, disons que vous vouliez afficher une liste d'articles de news, peut-être juste le titre et une image de teaser comme nous c'est le cas sur notre page d'accueil.

Le problème de l'ANR

anr
Un dialogue ANR s'affiche. © Creative Commons Attribution 2.5

Tout d'abord, vous devrez contacter le serveur pour lui demander d'afficher quelques articles d'actualité. Il peut vous donner un titre et une URL pour l'image par exemple, l'application commence alors à télécharger les images l'une après l'autre pour les afficher et soudain votre application se bloque avec la terrible boîte de dialogue ANR (Application Ne Répond pas).

Pourquoi ? Parce que, pendant que votre application est en train de télécharger les images, celles-ci n'ont pas le temps de s'afficher à l'écran et le système d'exploitation Android pense que votre application est bloquée. Bien sûr, vous, en tant qu'utilisateur, pouvez toujours appuyer sur "Wait" et laisser l'application terminer son travail, mais c'est une très mauvaise expérience utilisateur (UX).

Introduction aux threads

Améliorer l'UX de notre application passe par apprendre le concept de thread. Les Threads sont juste des unités d'exécution parallèles, ce qui signifie qu'elles tournent en même temps et que chaque application a au moins une thread principale, habituellement appellée UI thread pour l'Interface Utilisateur. Ce thread est chargé d'afficher l'application sur l'écran.

Ce problème est résolu très facilement en créant un nouveau thread qui permette de télécharger les images en arrière-plan et quand c'est fini, il communique avec le thread principal en lui disant "Hé ! Je viens de terminer le téléchargement d'une image, tu peux l'afficher!". Ainsi vous évitez la boîte de dialogue ANR.

Premier problème résolu, mais il y en a d'autres !

Le problème de la rotation de l'écran

Disons que vous faites pivoter votre écran, l'application devra se réafficher pour vous proposer une organisation optimisée en mode paysage et il va donc falloir retélécharger les images. Non c'est une perte d'énergie de batterie mais en plus cela consommera votre trafic mensuel de données.

La solution de mise en cache de la mémoire

Maintenant, il va falloir vous familiariser avec le concept de cache. C'est un composant de votre application qui va stocker les données pour que votre future demande soit traitée plus rapidement.

Un cache va faire consommer plus de mémoire à votre app, bien-sûr, mais la mémoire est peu chère et les avantages gagnés sont beaucoup plus grands.

Avec un cache, votre application se comporte comme cela : le thread de l'UI dit au cache "Hé ! J'ai besoin de l'image nexus4.png". Le cache n'a rien (on appelle cela cache miss) et il télécharge donc l'image, la donne au thread de l'UI, mais la garde en mémoire. Vous faites pivoter votre écran, le thread de l'UI redemande donc l'image, et le cache dit "C'est bon ! Je l'ai ici ! Prends-le." (on appelle cela cache hit). Nous sommes en 2013 et nous n'avons donc pas à nous soucier de ces quelques kilo-octets de mémoire supplémentaire, surtout si elle accélère la vitesse de l'application et nous économise de la batterie.

Le problème de "fermeture d'application"

Un dernier problème qui peut intervenir : vous appuyez sur le bouton Retour, le système d'exploitation Android ferme alors l'application et vous devez la rouvrir. Malheureusement, il va falloir tout retélécharger. Mais heureusement, il y a une solution (qui prendra un peu plus de place sur l'espace disque). Au lieu d'utiliser la mémoire cache, vous pouvez également mettre en cache sur le disque. Votre application se comporte comme ci-dessus, mais cette fois, après avoir donné l'image au thread d'UI, il la stockera dans le disque juste au cas où l'application ferme et que l'image doive de nouveau être téléchargée. Cette fois, le thread UI demandera l'image mais le cache ne l'aura pas en mémoire puisque l'application aura été fermée. Le thread vérifie le disque, l'image est là, le disque l'envoie au thread et voilà : pas besoin de retélécharger l'image !

Picasso
 © Square Inc.

Conclusion

Pour conclure, ce qui rend cette bibliothèque Picasso si impressionnante, c'est que avec une seule ligne de code, elle prend soin de tous ces trucs pour vous, afin que vous, en tant que développeur, ayez plus de temps pour des choses plus intéressantes que de gérer des images.

J'espère que vous en avez appris un peu plus sur le comportement des applications Android et ces sujets très communs en informatique.

2 partages

Pas de commentaire

Ecrire un nouveau commentaire :

Nous utilisons les cookies sur ce site pour améliorer votre expérience utilisateur. Plus d'informations