Share
Ce que vous allez créerGlide est une bibliothèque Android open-source populaire permettant de charger des images, des vidéos et des GIF animés. Avec Glide, vous pouvez charger et afficher des médias provenant 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 Volley ou OkHttp..
Développer vos propres fonctionnalités de chargement et d’affichage de supports dans Java peut être un réel 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 entièrement testée qui peut vous faire gagner un temps précieux - et vous éviter quelques maux de tête..
Dans ce tutoriel, nous allons apprendre à propos de Glide 3 en construisant une application simple de galerie d'images. Il chargera les images via Internet et les affichera sous forme de vignettes dans un RecyclerView. Lorsqu'un utilisateur cliquera sur une image, il ouvrira une activité de détail contenant l'image plus grande..
Lancez votre Android Studio et créez un nouveau projet avec une activité vide appelée Activité principale.
Après avoir créé un nouveau projet, spécifiez les dépendances suivantes dans votre build.gradle.
repositories mavenCentral () // jcenter () fonctionne aussi car il tire de Maven Central dépendances // Glide compile 'com.github.bumptech.glide: glide: 3.7.0' // Recyclerview compile 'com.android. support: recyclerview-v7: 25.1.1 '
Ou avec Maven:
com.github.bumptech.glide glisser 3.7.0 com.google.android support-v4 r7
Assurez-vous de synchroniser votre projet après avoir ajouté la dépendance Glide..
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 à la bibliothèque que vous utilisez (au lieu de celle par défaut qui regroupe HttpURLConnection)..
dependencies compile 'com.github.bumptech.glide: glide: 3.7.0' compile 'com.github.bumptech.glide: volley-integration: 1.4.0@aar' compile 'com.mcxiaoke.volley: bibliothèque: 1.0. 8 '
dépendances // okhttp 3 compiler 'com.github.bumptech.glide: okhttp3-integration: 1.4.0@aar' compiler 'com.squareup.okhttp3: okhttp: 3.2.0' // okhttp 2 compiler 'com.github. bumptech.glide: okhttp-integration: 1.4.0@aar 'compiler' com.squareup.okhttp: okhttp: 2.2.0 '
Vous pouvez consulter le guide officiel des bibliothèques d'intégration Glide pour plus d'informations..
Puisque Glide va effectuer une requête réseau pour charger des images via Internet, nous devons inclure la permission. L'INTERNET dans notre AndroidManifest.xml.
Nous allons commencer par créer notre RecyclerVoir.
Ensuite, créons la disposition XML qui sera utilisée pour chaque élément (ImageView) dans le RecyclerVoir.
Maintenant que nous avons créé la mise en page, l’étape suivante consiste à créer le RecyclerVoir adaptateur pour le remplissage des données. Avant de le faire, cependant, créons notre modèle de données simple.
Nous allons définir un modèle de données simple pour notre RecyclerVoir. Ce modèle implémente Parcelable pour le transport hautes performances de données d'un composant à un autre. Dans notre cas, les données seront transportées de SpaceGalleryActivité à SpacePhotoActivity.
importer android.os.Parcel; importer android.os.Parcelable; Classe publique SpacePhoto implémente Parcelable private String mUrl; private String mTitle; public SpacePhoto (String url, Titre de la chaîne) mUrl = url; mTitre = titre; spacePhoto protected (Colis dans) mUrl = in.readString (); mTitle = in.readString (); public statique final CreatorCREATOR = nouveau créateur () @Override public SpacePhoto createFromParcel (Colis dans) renvoie le nouveau SpacePhoto (dans); @Override public SpacePhoto [] newArray (taille int) retour new SpacePhoto [taille]; ; public String getUrl () return mUrl; public void setUrl (String url) mUrl = url; public String getTitle () return mTitle; public void setTitle (Titre de la chaîne) mTitle = title; public SpacePhoto statique statique [] getSpacePhotos () retourne un nouveau SpacePhoto [] nouvel SpacePhoto ("http://i.imgur.com/zuG2bGQ.jpg", "Galaxy"), un nouveau SpacePhoto ("http: // i. imgur.com/ovr0NAF.jpg "," Navette spatiale "), nouvelle SpacePhoto (" http://i.imgur.com/n6RfJX2.jpg "," Galaxy Orion "), nouvelle SpacePhoto (" http: // i. imgur.com/qpr5LR2.jpg "," Terre "), nouvel SpacePhoto (" http://i.imgur.com/pSHXfu5.jpg "," astronaute "), nouvel EspacePhoto (" http: //i.imgur. com / 3wQcZeY.jpg "," Satellite "),; @Override public int describeContents () return 0; @Override public void writeToParcel (Parcelle, int i) parcel.writeString (mUrl); parcel.writeString (mTitle);
Nous allons créer un adaptateur pour renseigner le RecyclerView avec des données. Nous allons également implémenter un écouteur de clic 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 allons le créer dans une section ultérieure.
Classe publique MainActivity étend AppCompatActivity //… la classe privée ImageGalleryAdapter étend RecyclerView.Adapter@Override public ImageGalleryAdapter.MyViewHolder onCreateViewHolder (parent ViewGroup, int viewType) Contexte contextuel = parent.getContext (); LayoutInflater inflater = LayoutInflater.from (contexte); Voir photoView = inflater.inflate (R.layout.item_photo, parent, false); ImageGalleryAdapter.MyViewHolder viewHolder = new ImageGalleryAdapter.MyViewHolder (photoView); retourne viewHolder; @Override public void onBindViewHolder (ImageGalleryAdapter.MyViewHolder titulaire, int position) SpacePhoto spacePhoto = mSpacePhotos [position]; ImageView imageView = titulaire.mPhotoImageView; @Override public int getItemCount () return (mSpacePhotos.length); Classe publique MyViewHolder étend RecyclerView.ViewHolder implémente View.OnClickListener public ImageView mPhotoImageView; public MyViewHolder (Voir itemView) super (itemView); mPhotoImageView = (ImageView) itemView.findViewById (R.id.iv_photo); itemView.setOnClickListener (this); @Override public void onClick (Vue Vue) int position = getAdapterPosition (); if (position! = RecyclerView.NO_POSITION) SpacePhoto spacePhoto = mSpacePhotos [position]; Intention d'intention = nouvelle intention (mContext, SpacePhotoActivity.class); intent.putExtra (SpacePhotoActivity.EXTRA_SPACE_PHOTO, spacePhoto); startActivity (intention); private SpacePhoto [] mSpacePhotos; contexte privé mContext; public ImageGalleryAdapter (contexte de contexte, SpacePhoto [] spacePhotos) mContext = context; mSpacePhotos = spacePhotos;
C’est là que Glide doit s’acquitter de sa tâche: récupérer des images sur Internet et les afficher individuellement. ImageViews, en utilisant notre RecyclerView onBindViewHolder () méthode lorsque l'utilisateur fait défiler l'application.
//… @Override public void onBindViewHolder (titulaire de MyViewHolder, position int) Photo photo = mPhotoList.get (position); ImageView imageView = titulaire.mPhotoImageView; Glide.with (mContext) .load (spacePhoto.getUrl ()) .placeholder (R.drawable.ic_cloud_off_red) .into (imageView); //…
Pas à pas, voici ce que font les appels à Glide:
Accentsconagua
avec (contexte de contexte): nous commençons le processus de chargement en passant d'abord notre contexte dans le avec() 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.espace réservé (int resourceId): un identifiant de ressource d'application locale, de préférence dessinable, qui servira d'espace réservé jusqu'à ce que l'image soit chargée et affichée.dans (ImageView imageView): la vue de l'image cible dans laquelle l'image sera placée.Sachez que Glide peut également charger des images locales. Il suffit de passer l’identifiant de la ressource Android, le chemin du fichier ou un URI comme argument de la charge() méthode.
Vous pouvez redimensionner l’image avant de l’afficher dans le ImageView avec Glide's .override (int width, int height) méthode. Ceci est utile pour créer des vignettes dans votre application lorsque vous chargez 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 (): redimensionne l'image de manière uniforme (en conservant le rapport de format de l'image) afin que l'image s'insère dans la zone donnée. Toute l'image sera visible, mais il pourrait y avoir un remplissage vertical ou horizontal.centerCrop (): redimensionne l'image de manière uniforme (en conservant le rapport de format de l'image) de sorte que l'image remplisse la zone donnée, avec autant d'images que possible affichées. Si nécessaire, l'image sera recadrée horizontalement ou verticalement pour s'adapter.Ici nous créons notre RecyclerVoir avec GridLayoutManager en tant que gestionnaire de disposition, initialisez notre adaptateur et liez-le au RecyclerVoir.
//… @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); RecyclerView.LayoutManager layoutManager = new GridLayoutManager (this, 2); RecyclerView recyclerView = (RecyclerView) findViewById (R.id.rv_images); recyclerView.setHasFixedSize (true); recyclerView.setLayoutManager (layoutManager); Adaptateur ImageGalleryAdapter = new ImageGalleryAdapter (this, SpacePhoto.getSpacePhotos ()); recyclerView.setAdapter (adaptateur); //…
Créez une nouvelle activité et nommez-la SpacePhotoActivity. Nous obtenons le SpacePhoto extra et chargez l’image avec Glide comme nous l’avions fait auparavant. Nous nous attendons à ce que le fichier ou l’URL soit un fichier. Bitmap, donc nous allons utiliser asBitmap () fait que Glide reçoit un Bitmap. Sinon, la charge échouera et le .Erreur() Le rappel sera déclenché, ce qui entraînera l'affichage de la ressource pouvant être extraite renvoyée par le rappel d'erreur..
Vous pouvez aussi utiliser asGif () si vous voulez vous assurer que votre image chargée est un GIF. (J'expliquerai bientôt comment fonctionnent les GIF dans Glide.)
importer android.graphics.Bitmap; importer android.graphics.Color; importer android.os.Bundle; importer android.support.v7.app.AppCompatActivity; importer android.support.v7.graphics.Palette; importer android.view.ViewGroup; importer android.widget.ImageView; importer com.bumptech.glide.Glide; import com.bumptech.glide.request.RequestListener; import com.bumptech.glide.request.target.Target; Classe publique SpacePhotoActivity extend AppCompatActivity public static final Chaîne EXTRA_SPACE_PHOTO = "SpacePhotoActivity.SPACE_PHOTO"; ImageView privée mImageView; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_photo_detail); mImageView = (ImageView) findViewById (R.id.image); SpacePhoto spacePhoto = getIntent (). GetParcelableExtra (EXTRA_SPACE_PHOTO); Glide.with (this) .load (spacePhoto.getUrl ()) .asBitmap () .error (R.drawable.ic_cloud_off_red) .diskCacheStrategy (DiskCacheStrategy.SOURCE) .into (mImageView);
Notez que nous avons également initialisé un cache unique pour les images chargées: DiskCacheStrategy.SOURCE. Je vais expliquer plus sur la mise en cache dans une section ultérieure.
Voici une mise en page pour afficher l'activité de détail. Il affiche simplement un scrollable ImageView cela montrera la version en pleine résolution de l'image chargée.
Si vous observez attentivement, vous verrez que lorsque vous revisitez une image précédemment chargée, son chargement est encore plus rapide qu'auparavant. Qu'est-ce qui l'a rendu plus rapide? Le système de cache de Glide, c'est ce que.
Une fois qu'une image a été chargée une fois à partir d'Internet, Glide la met en cache dans la mémoire et sur le disque, en sauvegardant les requêtes répétées du réseau et en permettant une récupération plus rapide de l'image. Glide vérifie d’abord si une image est disponible en mémoire ou sur le disque avant de la charger à partir du réseau..
Toutefois, en fonction de votre application, vous pouvez éviter la mise en cache, par exemple si les images affichées sont susceptibles de changer souvent et de ne pas être rechargées..
Vous pouvez éviter la mémoire cache en appelant .skipMemoryCache (true). Sachez toutefois que l’image sera toujours mise en cache sur le disque. Pour éviter cela également, vous utilisez .diskCacheStrategy (stratégie DiskCacheStrategy) méthode, qui prend l'une des valeurs enum suivantes:
DiskCacheStrategy.NONE: aucune donnée n'est sauvegardée en cache.DiskCacheStrategy.SOURCE: données originales sauvegardées en cache.DiskCacheStrategy.RESULT: enregistre le résultat des données après transformations en cache.DiskCacheStrategy.ALL: met en cache les données d'origine et les données transformées. Pour éviter la mise en cache de la mémoire et du disque, appelez les deux méthodes l'une après l'autre:
Glide.with (this) .load (spacePhoto.getUrl ()) .asBitmap () .skipMemoryCache (true) .diskCacheStrategy (DiskCacheStrategy.NONE) .into (imageView);
Dans Glide, vous pouvez implémenter une RequestListener pour surveiller l’état de la demande que vous avez faite lors du 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. Pour revenir à notre application de galerie d’images, modifions un peu l’affichage en utilisant un RequestListener objet qui va définir le bitmap à la ImageView et changez également la couleur de fond de la mise en page en extrayant la couleur sombre et vibrante de notre image à l'aide de l'API de palette Android..
