With image loading libraries on the rise, it has become a rite of passage for every Android developer to choose an image loading library for their own use. Famous image loading libraries on the market include UIL,Picasso,Volley ImageLoader,Fresco and today’s hero Glide. They all have their own merits. You can’t judge which one is better than the other, you can only say which one is better for you.

I understand it

Now I would like to talk about personal understanding of these picture loading libraries, if there is any mistake, please kindly advise.

Universal Image Loader: a powerful Image loading library, including a variety of configurations, the oldest and most widely used.

Picasso: By Square. Must be fine. It goes even better with OkHttp!

Volley ImageLoader: Google official product, unfortunately can not load local images ~

Fresco: From Facebook, born proud! Not just powerful.

Glide: A Google recommended image loading library that focuses on smooth scrolling.

See this issue on StackOverflow for more details.

Try a Glide

Let’s move on to today’s topic. I believe many of you have seen this article about Glide before. The Chinese version is here. Glide and Picasso are introduced and compared from various aspects. Generally speaking, they are very similar and share almost the same style of API use. Glide, however, is better at caching policies and loading GIFs. Finally, the author highly recommends this library.

And Glide is said to be ubiquitous in Google’s new Photos app. Are you eager to give this library a try? Just when you’ve decided to give it a try, you hear that Yelp is also using this amazing library. You are so excited that you must use this library. Go ahead and open Android Studio and add to builde.gradle

compile 'com. Making. Bumptech. Glide: glide: 3.6.1'
Copy the code

Then search globally for where the image is loaded and replace all with the following code:

Glide.with(mContext)
        .load(url)
        .placeholder(R.drawable.loading_spinner)
        .crossFade()
        .into(myImageView);
Copy the code

After a long compilation process, you open the APP again and see an image with a fading effect in front of you. You can’t help but cry, “Wocao! Why didn’t I notice it before?” .

But after you’ve used it for a few days you’ll notice some problems:

Why do some images only show a placeholder when loaded the first time and a normal image the second time?

Why do I always get an exception like You cannot start a load for a destroyed activity?

Why can’t I setTag() loaded images?

Why is that? Why is that? There are so many problems with such a NB library. Yes, that’s what I want to talk about today. How to avoid the above problems.

Some solutions

1. If you happen to be using this circular Imageview library or any other custom circular Imageview, and you happen to have placeholder Settings, you will run into the first problem. How to solve it? Scheme 1: do not set placeholders; Solution 2: Customize the Transformation of circular Bitmap using Glide’s Transformation API. Here’s an existing example; Option 3: Load the image using the following code:

Glide.with(mContext)
    .load(url) 
    .placeholder(R.drawable.loading_spinner)
    .into(new SimpleTarget<Bitmap>(width, height) {
        @Override 
        public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {
            // setImageBitmap(bitmap) on CircleImageView }});Copy the code

Thank aeECC0d15a40 for pointing out that this method has a problematic bug in reusing the ListView. Please do not use this method if you are loading CircleImageView in the ListView. Option 4: Do not use Glide’s default animation:

Glide.with(mContext)
    .load(url) 
    .dontAnimate()
    .placeholder(R.drawable.loading_spinner)
    .into(circleImageview); 
Copy the code

2. As for the second question, remember this: Do not use Glide to load images in the main thread, and if you do use it, change the context parameter to getApplicationContext. Please refer to this issue for more details.

3. The reason why you can’t set a Tag is because you’re using the wrong pose. How do I set the Tag for my ImageView? Let me tell you more. SetTag (int,object) setTag(int,object)

Glide.with(context).load(urls.get(i).getUrl()).fitCenter().into(imageViewHolder.image);
        imageViewHolder.image.setTag(R.id.image_tag, i);
        imageViewHolder.image.setOnClickListener(new View.OnClickListener() {
            @Override
                int position = (int) v.getTag(R.id.image_tag); Toast.makeText(context, urls.get(position).getWho(), Toast.LENGTH_SHORT).show(); }});Copy the code

In the meantime, create ids. XML in the values folder and add

<item name="image_tag" type="id"/>
Copy the code

And you’re done!

Option 2: After Glide 3.6.0, a new global setting method is added. The method is as follows: implement the GlideMoudle interface and set the tagId of ViewTaget globally:

public class MyGlideMoudle implements GlideModule{
    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        ViewTarget.setTagId(R.id.glide_tag_id);
    }

    @Override
    public void registerComponents(Context context, Glide glide) {}}Copy the code

Similarly, you need to add an ID under ids.xml

<item name="glide_tag_id" type="id"/>
Copy the code

Finally, add it to the androidmanifest.xml file

<meta-data
    android:name="com.yourpackagename.MyGlideMoudle"
    android:value="GlideModule" />
Copy the code

Can play happily again, xi xi ‘(∩_∩)’.

Plan 3: Write a class that inherits from ImageViewTaget and copies its get/setRequest methods.

Glide.with(context).load(urls.get(i).getUrl()).fitCenter().into(new ImageViewTarget<GlideDrawable>(imageViewHolder.image) {
            @Override
            protected void setResource(GlideDrawable resource) {
                imageViewHolder.image.setImageDrawable(resource);
            }

            @Override
            public void setRequest(Request request) {
                imageViewHolder.image.setTag(i);
                imageViewHolder.image.setTag(R.id.glide_tag_id,request);
            }

            @Override
            public Request getRequest(a) {
                return(Request) imageViewHolder.image.getTag(R.id.glide_tag_id); }}); imageViewHolder.image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = (int) v.getTag(); Toast.makeText(context, urls.get(position).getWho(), Toast.LENGTH_SHORT).show(); }});Copy the code

Some tips

1. Glide. With (context). ResumeRequests () and Glide with (context). PauseRequests ()

PauseRequests () is called to cancel the request while the list is sliding, and a resumeRequests() is called to restore the request when the sliding stops. Isn’t that better?

2.Glide.clear()

This method can help you when you want to clear all image loading requests.

3.ListPreloader

If you want lists to be preloaded, try the ListPreloader class.

Some excellent libraries based on Glide

1.glide-transformations

Transformation is a Glide based transformation library with cropping, shading, blur, filter, and many other transformation effects

2.GlidePalette

A library that can easily use the Palette when Glide loads.