Coder une application Android de galerie d’images avec Glide

1. Qu’est-ce que Glide?

Glide est une bibliothèque Android open-source populaire pour le chargement d’images, de vidéos et de GIF animés. Avec Glide, vous pouvez charger et afficher des médias à partir de nombreuses sources différentes, telles que des serveurs distants ou le système de fichiers local.

Par défaut, Glide utilise une implémentation personnalisée de HttpURLConnection pour charger des images sur Internet. Cependant, Glide fournit également des plugins à d’autres bibliothèques réseau populaires telles que Volée ou OkHttp.

2. Alors, pourquoi utiliser Glide?

Développer vos propres fonctionnalités de chargement et d’affichage de médias en Java peut être un vrai problème: vous devez vous occuper de la mise en cache, du décodage, de la gestion des connexions réseau, du threading, de la gestion des exceptions, etc. Glide est une bibliothèque facile à utiliser, bien planifiée, bien documentée et soigneusement testée qui peut vous faire gagner un temps précieux et vous éviter des maux de tête.

Dans ce didacticiel, nous en apprendrons davantage sur Glide 3 en créant une simple application de galerie d’images. Il chargera les images via Internet et les affichera sous forme de vignettes dans un RecyclerView, et lorsqu’un utilisateur clique sur une image, il ouvrira une activité de détail contenant l’image plus grande.

3. Créer un projet Android Studio

Lancez votre Android Studio et créez un nouveau projet avec une activité vide appelée MainActivity.

Capture d'écran du nouveau projet Android Studio

4. Déclarer les dépendances

Après avoir créé un nouveau projet, spécifiez les dépendances suivantes dans votre build.gradle.

Ou avec Maven:

Assurez-vous de synchroniser votre projet après avoir ajouté la dépendance Glide.

Bibliothèques d’intégration

Si vous souhaitez utiliser une bibliothèque réseau telle que OkHttp ou Volley dans votre projet pour les opérations réseau, il est recommandé d’inclure l’intégration Glide spécifique pour la bibliothèque que vous utilisez (au lieu de celle par défaut qui regroupe HttpURLConnection).

Volée

OkHttp

Vous pouvez visiter le guide officiel des bibliothèques d’intégration Glide pour plus d’informations.

5. Ajouter une autorisation Internet

Puisque Glide va effectuer une demande réseau pour charger des images via Internet, nous devons inclure l’autorisation INTERNET dans notre AndroidManifest.xml.

6. Créer la mise en page

Nous allons commencer par créer notre RecyclerView.

Création de la disposition d’élément personnalisée

Ensuite, créons la mise en page XML qui sera utilisée pour chaque élément (ImageView) dans le RecyclerView.

Maintenant que nous avons créé la mise en page, l’étape suivante consiste à créer le RecyclerView adaptateur pour le remplissage des données. Avant de faire cela, créons notre modèle de données simple.

sept. Créer un modèle de données

Nous allons définir un modèle de données simple pour notre RecyclerView. Ce modèle implémente Colisable pour un transport performant des données d’un composant à un autre. Dans notre cas, les données seront transportées depuis SpaceGalleryActivity à SpacePhotoActivity.

8. Créer l’adaptateur

Nous allons créer un adaptateur pour remplir le RecyclerView avec des données. Nous allons également implémenter un écouteur de clics pour ouvrir l’activité de détail:SpacePhotoActivity—En passant une instance de SpacePhoto en supplément. L’activité de détail montrera un gros plan de l’image. Nous le créerons dans une section ultérieure.

9. Chargement d’images à partir d’une URL

C’est là que nous avons besoin de Glide pour faire son travail: pour récupérer des images sur Internet et les afficher individuellement ImageViews, en utilisant notre RecyclerView onBindViewHolder() méthode pendant que l’utilisateur fait défiler l’application.

Etape par étape, voici ce que font les appels à Glide:

En relation :  Boostez vos compétences en relations interpersonnelles avec ces conseils pour l'art de conclure l'affaire
  • with(Context context): nous commençons le processus de chargement en passant d’abord notre contexte dans le with() méthode.
  • load(String string): la source de l’image est spécifiée sous la forme d’un chemin de répertoire, d’un URI ou d’une URL.
  • placeholder(int resourceId): un identifiant de ressource d’application locale, de préférence un dessinable, qui sera un espace réservé jusqu’à ce que l’image soit chargée et affichée.
  • into(ImageView imageView): la vue de l’image cible dans laquelle l’image sera placée.

Sachez que Glide peut également charger des images locales. Passez simplement l’ID de la ressource Android, le chemin du fichier ou un URI comme argument au load() méthode.

Redimensionnement et transformation d’image

Vous pouvez redimensionner l’image avant qu’elle ne s’affiche dans le ImageView avec Glide’s .override(int width, int height) méthode. Ceci est utile pour créer des miniatures dans votre application lors du chargement d’une taille d’image différente à partir du serveur. Notez que les dimensions sont en pixels et non en dp.

Les transformations d’image suivantes sont également disponibles:

  • fitCenter(): sredimensionne l’image uniformément (en conservant le rapport hauteur / largeur de l’image) afin que l’image tienne dans la zone donnée. L’image entière sera visible, mais il peut y avoir un remplissage vertical ou horizontal.
  • centerCrop(): met l’image à l’échelle de manière uniforme (en conservant le rapport hauteur / largeur de l’image) de sorte que l’image remplisse la zone donnée, avec autant d’image que possible. Si nécessaire, l’image sera recadrée horizontalement ou verticalement pour s’adapter.

dix. Initialisation de l’adaptateur

Ici, nous créons notre RecyclerView avec GridLayoutManager en tant que gestionnaire de disposition, initialisez notre adaptateur et liez-le au RecyclerView.

11. Création de l’activité de détail

Créez une nouvelle activité et nommez-la SpacePhotoActivity. Nous obtenons le SpacePhoto extra et chargez l’image avec Glide comme nous l’avons fait auparavant. Ici, nous nous attendons à ce que le fichier ou l’URL soit un Bitmap, donc nous allons utiliser asBitmap() pour que Glide reçoive un Bitmap. Sinon, la charge échouera et le .error() le rappel sera déclenché, provoquant l’affichage de la ressource pouvant être retirée renvoyée par le rappel d’erreur.

Vous pouvez également utiliser asGif() si vous vouliez vous assurer que votre image chargée était un GIF. (Je vais vous expliquer sous peu comment les GIF fonctionnent dans Glide.)

Notez que nous avons également initialisé un cache unique pour les images chargées: DiskCacheStrategy.SOURCE. J’expliquerai plus en détail la mise en cache dans une section ultérieure.

La disposition détaillée

Voici une mise en page pour afficher l’activité détaillée. Il affiche juste un défilement ImageView qui affichera la version pleine résolution de l’image chargée.

12. Mise en cache dans Glide

Si vous regardez de près, vous verrez que lorsque vous revisitez une image qui a été précédemment chargée, elle se charge encore plus rapidement qu’auparavant. Qu’est-ce qui l’a rendu plus rapide? Le système de cache de Glide, c’est quoi.

Une fois qu’une image a été chargée une fois à partir d’Internet, Glide la mettra en cache en mémoire et sur le disque, enregistrant les requêtes réseau répétées et permettant une récupération plus rapide de l’image. Ainsi, Glide vérifiera d’abord si une image est disponible en mémoire ou sur le disque avant de la charger depuis le réseau.

Cependant, selon votre application, vous souhaiterez peut-être éviter la mise en cache, par exemple si les images affichées sont susceptibles de changer souvent et de ne pas être rechargées.

Alors, comment désactiver la mise en cache?

Vous pouvez éviter la mise en cache de la mémoire en appelant .skipMemoryCache(true). Mais sachez que l’image sera toujours mise en cache sur le disque. Pour éviter cela également, utilisez le .diskCacheStrategy(DiskCacheStrategy strategy) , qui prend l’une des valeurs d’énumération suivantes:

En relation :  6 applications Disney World et Disneyland pour des vacances magiques
  • DiskCacheStrategy.NONE: aucune donnée n’est enregistrée dans le cache.
  • DiskCacheStrategy.SOURCE: données d’origine enregistrées dans le cache.
  • DiskCacheStrategy.RESULT: enregistre le résultat des données après les transformations dans le cache.
  • DiskCacheStrategy.ALL: met en cache les données d’origine et les données transformées.

Pour éviter à la fois la mise en cache de la mémoire et du disque, appelez simplement les deux méthodes l’une après l’autre:

13. Demander des auditeurs

Dans Glide, vous pouvez implémenter un RequestListener pour surveiller l’état de la demande que vous avez faite pendant le chargement de l’image. Une seule de ces méthodes sera appelée.

  • onException(): déclenché chaque fois qu’une exception se produit afin que vous puissiez gérer les exceptions dans cette méthode.
  • onResourceReady(): déclenché lorsque l’image est chargée avec succès.

Revenant à notre application de galerie d’images, modifions un peu l’affichage en utilisant un RequestListener objet qui définira le bitmap sur le ImageView et modifiez également la couleur d’arrière-plan de la mise en page en extrayant la couleur sombre et vibrante de notre image à l’aide du API de la palette Android.

Ici, vous pouvez également masquer une boîte de dialogue de progression si vous en aviez une. Avec ce dernier changement, assurez-vous d’inclure la dépendance Palette dans votre build.gradle:

14. Tester l’application

Enfin, vous pouvez exécuter l’application! Cliquez sur une vignette pour obtenir une version en taille réelle de l’image.

Émulateur exécutant les captures d'écran de l'application

15. Animations

Si vous exécutez l’application, vous remarquerez une animation de fondu enchaîné qui se produit pendant que l’image est affichée. Glide a cette option activée par défaut, mais vous pouvez la désactiver en appelant dontAnimate(), ce qui provoquera simplement l’affichage de l’image sans aucune animation.

Vous pouvez également personnaliser l’animation de fondu enchaîné en appelant crossFade(int duration), en passant la durée en millisecondes pour l’accélérer ou la ralentir – 300 millisecondes est la valeur par défaut.

GIF animés

Il est très simple d’afficher un GIF animé dans votre application à l’aide de Glide. Cela fonctionne de la même manière que l’affichage d’une image ordinaire.

Si vous vous attendez à ce que l’image soit un GIF, appelez asGif(): Cela garantit que Glide reçoit un GIF, sinon le chargement échouera et le Drawable passé au .error() La méthode sera affichée à la place.

Lecture de la vidéo

Malheureusement, Glide ne prend pas en charge le chargement et l’affichage vidéo via URL. Au lieu de cela, il ne peut charger et afficher que les vidéos déjà stockées sur le téléphone. Afficher une vidéo en transmettant son URI au load() méthode.

Conclusion

Bon travail! Dans ce didacticiel, vous avez créé une application de galerie d’images complète avec Glide et vous avez appris en cours de route comment la bibliothèque fonctionne et comment vous pouvez l’intégrer dans votre propre projet. Vous avez également appris à afficher des images locales et distantes, à afficher des GIF et des vidéos animés et à appliquer des transformations d’image telles que le redimensionnement. Non seulement cela, mais vous avez vu à quel point il est facile d’activer la mise en cache, la gestion des erreurs et les écouteurs de demandes personnalisés.

Pour en savoir plus sur Glide, vous pouvez vous référer à son documentation officielle. Pour en savoir plus sur le codage pour Android, consultez certains de nos autres cours et tutoriels ici sur Envato Tuts +!

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.