Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Android : L'interaction avec les appareils

Charger des images

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à charger des images dans un RecyclerView à partir de leur URL et à l'aide de la librairie Glid.
05:36

Transcription

Pour le moment, nous avons une liste qui affiche des images qui sont stockées dans notre projet. Je vais vous montrer dans cette vidéo comment facilement travailler avec des urls, c'est-à-dire avec des images qui sont hébergées sur un serveur. Nous allons utiliser la librairie GLIDE proposée par GOOGLE. Ici, nous avons un « ImageView ». Je lui ai donné une hauteur et une largeur fixes. Pourquoi ? Tout simplement pour éviter que notre « ImageView » doit dépendant de la taille de notre image. Histoire que quel que soit le ratio ou la taille de l'image téléchargée, le rendu soit similaire. A l'aide de « adjustViewBounds » cela permet de faire en sorte de faire en sorte de coller le plus possible l'image avec les bords de l' « imageView » et « src » qui nous permet de charger une image de notre projet n'aura donc plus d'utilité. Commençons par la classe Evénements. Nous allons lui rajouter une url permettant de stocker l'image, du moins le lien vers cette image. Pour l'exemple, je vais créer un tableau contenant quatre urls, quatre urls d'images stockées sur le site PIXABAY. Au moment du constructeur, je vais attribuer une de ces quatre images à mon événement. Il ne me manque plus que le « getter ». Voilà, mon événement, maintenant, possède une url. Regardons maintenant la doc de GLIDE. Ici, le lien GitHub représentant le site de GLIDE. Nous avons ici le lien « Gradle » nous permettant de télécharger directement la librairie. Le deuxième lien représente la « support ». Je ne prends pas le deuxième lien car la « support library » que nous utilisons ici est plus récente que celle proposée par GLIDE. Concernant son fonctionnement, en fait, c'est vraiment très simple. Il suffit de faire « Glide », le contexte, l'url et le mettre dans l' « imageView »; tout simplement. Je vais donc prendre cette ligne, aller dans mon adapteur, au moment où je remplis une ligne, copier la ligne. Je vais faire un « signout »pour qu'il télécharge la librairie GLIDE. Ici, il a besoin du contexte, je vous rappelle que le contexte se trouve dans n'importe quel composant graphique, l'url, je vais prendre l'url de l'événement et le positionner dans mon « imageView » et voilà, c'est tout. Je n'ai plus qu'à lancer. Attention, petit détail, avant de lancer il faut bien faire en sorte que notre application ait le droit d'aller sur Internet vu que notre image est stockée sur Internet. Je rajoute donc la permission d'aller sur Internet. Et voilà, nous avons donc chargé trois images provenant d'un serveur. Pour aller plus loin avec GLIDE, on va pouvoir ajouter deux autres images, c'est-à-dire que je vais pouvoir ajouter une image pendant le téléchargement ainsi qu'une image en cas où il n'arrive pas à charger l'image du site Internet. Je vais donc revenir dans « DateAdapter ». Ici, après avoir chargé l'image et avant le « into », je vais pouvoir utiliser « .error » pour indiquer l'erreur et « .placeholder » pour indiquer le chargement. Dans mon cas, je vais télécharger de nouvelles images « New » « Image Asset » et l'image d'erreur donc « .error » « R.drawable.ic_» ah il n'a pas pris le bon « R » même chose avec « placeholder » donc attention à bien prendre le bon « R » celui qui représente votre projet donc celui-là, « .drawable» Je vais donc maintenant relancer mon projet. Je vais montrer l'exemple de l'erreur en passant mon téléphone en mode Avion, je lance, n'ayant pas Internet mon image est en erreur. J'enlève le mode Avion, j'ai donc Internet, je fais une rotation d'écran pour relancer le processus et voilà, on a vu le petit sablier lors du chargement d'images. Petite astuce, pour pouvoir voir le chargement d'images, il va falloir dire au téléphone d'utiliser un réseau plus faible, de simuler un réseau plus faible. Donc je vais utiliser les trois petits points qui sont ici, ce qui va me faire apparaître cette fenêtre et, dans « cellular », je vais pouvoir mettre ici « EDGE » qui va simuler un réseau faible. Maintenant, je repasse en mode Avion, je refais une rotation et voilà, les images ayant été en cache, il peut de suite me les réafficher. Il n'a pas besoin de refaire la requête. Voilà pour comment charger dynamiquement des images à partir d'urls.

Android : L'interaction avec les appareils

Exploitez les outils mis à disposition par le kit de développement Android. Améliorez l’expérience utilisateur de vos applications​ mobiles​ avec les composants et les animations.

1h58 (23 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !