Glide 一个专注于平滑滚动的图片加载和缓存库

原文地址：http://www.jianshu.com/p/4a3177b57949

http://www.jianshu.com/p/31c82862ef19

在图片加载库烂大街的今天，选择一个适合自己使用的图片加载库已经成为了每一个Android开发者的必经之路。现在市面上知名的图片加载库有UIL,Picasso,Volley ImageLoader,Fresco以及我们今天的主角Glide。它们各有千秋，不能评定谁一定比谁好，只能说哪一个更适合你。

我的理解

下面我来谈一下个人对这些图片加载库的理解，如有错误，还望指教。

UniversalImage Loader：一个强大的图片加载库，包含各种各样的配置，最老牌，使用也最广泛。

Picasso: Square出品，必属精品。和OkHttp搭配起来更配呦！

VolleyImageLoader：Google官方出品，可惜不能加载本地图片~

Fresco：Facebook出的，天生骄傲！不是一般的强大。

Glide：Google推荐的图片加载库，专注于流畅的滚动。

更多详情请看*上这个问题。

初试Glide

下面进入今天的主题，相信之前很多同学都看到过这篇介绍Glide的文章,中文版在这里。文中从各个方面介绍和比较了Glide与Picasso，总体来说二者极为相似，有着近乎相同的API的使用风格。但Glide在缓存策略和加载GIF方面略胜一筹。最后作者也极力推荐了这个库。

而且据说在Google新出的Photos应用中，到处可见Glide的踪迹。看到这里，你是不是已经迫不及待的想试一试这个库呢？就在你下定决心尝试一记的时候，你又听说Yelp app(据说是美国的大众点评)也在使用这个吊炸天的库。你的心中激动万分，发四一定要使用这个库。说干就干，打开Android Studio，在builde.gradle里面添加上

compile 'com.github.bumptech.glide:glide:3.6.1'

然后全局搜索图片加载的地方，全部换成了下面的代码：

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

在经过漫长的编译过程之后，再次打开APP，看到有着渐现效果的图片呈现在你的面前，你不禁叫道：“wocao,真TM帅！为什么我以前没有发现呢？”。

不过在你使用了几天之后你会发现一些问题：

为什么有的图片第一次加载的时候只显示占位图，第二次才显示正常的图片呢？

为什么我总会得到类似You cannot start a load for a destroyed activity这样的异常呢？

为什么我不能给加载的图片setTag()呢？

为什么？为什么？这么NB的库竟然会有这么多的问题。没错，这就是我今天要讲的重点。怎么避免上面的问题发生。

一些解决方案

1.如果你刚好使用了这个圆形Imageview库或者其他的一些自定义的圆形Imageview，而你又刚好设置了占位的话，那么，你就会遇到第一个问题。如何解决呢？
方案一: 不设置占位；
方案二：使用Glide的Transformation API自定义圆形Bitmap的转换。这里是一个已有的例子；
方案三：使用下面的代码加载图片：

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 
        } 
    });

感谢 aeecc0d15a40指出该方法在listview上复用有问题的bug,如果在listview中加载CircleImageView，请不要使用该方法。

方案四：不使用Glide的默认动画：

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

2.至于第二个问题，请记住一句话：不要再非主线程里面使用Glide加载图片，如果真的使用了，请把context参数换成getApplicationContext。更多的细节请参考这个issue。

3.为什么不能设置Tag，是因为你使用的姿势不对哦。如何为ImageView设置Tag呢？且听我细细道来。
方案一：使用setTag(int,object)方法设置tag,具体用法如下：
Java代码是酱紫的：

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();
            }
        });

同时在values文件夹下新建ids.xml，添加

<item name="image_tag" type="id"/>

大功告成!

方案二：从Glide的3.6.0之后，新添加了全局设置的方法。具体方法如下：
先实现GlideMoudle接口，全局设置ViewTaget的tagId:

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) {

    }
}

同样，也需要在ids.xml下添加id

<item name="glide_tag_id" type="id"/>

最后在AndroidManifest.xml文件里面添加

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

又可以愉快的玩耍了，嘻嘻`( ∩_∩)′。

方案三：写一个继承自ImageViewTaget的类，复写它的get/setRequest方法。

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() {                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();            }        });<code></code>

一些使用技巧

1.Glide.with(context).resumeRequests()和 Glide.with(context).pauseRequests()

当列表在滑动的时候，调用pauseRequests()取消请求，滑动停止时，调用resumeRequests()恢复请求。这样是不是会好些呢？

2.Glide.clear()

当你想清除掉所有的图片加载请求时，这个方法可以帮助到你。

3.ListPreloader

如果你想让列表预加载的话，不妨试一下ListPreloader这个类。

一些基于Glide的优秀库

1.glide-transformations

一个基于Glide的transformation库，拥有裁剪，着色，模糊，滤镜等多种转换效果，赞的不行不行的~~

2.GlidePalette

一个可以在Glide加载时很方便使用Palette的库。

从不同的数据源加载图片

加载网络图片

很多情况下，我们使用图片加载库就是为了加载网络图片。网络操作是一个很复杂的东西。试想一下，如果没有图片加载库，我们就要手动去下载图片,缓存图片，最后再从文件里面读取bitmap并设置到Imageview里面。这还算好的，要是在Listview里面你会更头疼的。原因我就不说了，你懂的~~再加上各种各样的Bitmap操作，保准你再也不想撸代码了。而且Bitmap这东西还很占内存，伺候不好，很容易就会引发OOM，app吧唧就闪退了！！

图片加载库的优势就在于此。简简单单一句话，下载，缓存，加载统统搞定。简直就是美好一生的东西。而Glide就是这样使人美好一生的东西之一。

说了这么多，Glide如何加载网络图片？很简单，就上次的三句话:

ImageView targetImageView = (ImageView)findViewById(R.id.imageView);
String internetUrl = "http://i.imgur.com/idojSYm.png";
Glide.with(context)
   .load(internetUrl)
   .into(targetImageView);

木有什么乱七八糟的东西，直接传入要加载图片的url就可以了。那么图片加载库有很多，为什么选择Glide呢？很简单，因为它流畅，不卡，尤其是在Listview中。嗯，就是酱~

加载本地图片

下表是.load()可以传入的参数及说明

参数	说明
.load(String string)	string可以为一个文件路径、uri或者url
.load(Uri uri)	uri类型
.load(File file)	文件
.load(Integer resourceId)	资源Id,R.drawable.xxx或者R.mipmap.xxx
.load(byte[] model)	byte[]类型
.load(T model)	自定义类型

从上面可以看到Glide不仅可以加载网络图片，还可以加载本地图片。可接受的参数有文件路径，uri，文件，资源id等。基本上满足了大部分的需求。虽然加载本地图片不像网络图片那样复杂，但我还是建议使用Glide来加载本地图片。因为它是内存友好的，而且还会“偷偷地”帮我们做很多事情。比如内存缓存，Bitmap复用，修正照片方向等。当然为了满足各种各样的需求，仅仅加载图片是不够的，你还需要对图片进行各种各样的变换，也就是Transformation。后面我们会详细了解的。

加载自定义数据源

前面的表格中有一个是我们不熟悉的，就是.load(T model)，即自定义的数据源类型。那么如何去实现呢？

实际上，加载自定义数据源主要是通过ModelLoader接口来实现的。由于没有在实际项目中用到过，这方面的经验比较少。想深入了解的，可以参考这篇文章。

不过从官方Wiki上来看，设计ModelLoader接口的初衷用来加载不同尺寸的图片的。众所周知，Android设备屏幕分辨率千奇百怪，大到2K，小到320p。如果在低分辨率的手机上加载大图，不仅损耗用户流量，而且很容易造成OOM；在高分辨的手机上，加载小图又会出现模糊的情况，用户体验极差。很多时候，为了省事，很多app都会选择一个中间分辨率，然后自适应大小。当然这样做无可厚非，但是有更好的办法，我们为什么不去尝试呢？

那么如何使用Glide来实现这一具体需求呢？首先你要实现自己的ModelLoader，比较简单的方法是继承BaseGlideUrlLoader。

public interface MyDataModel {
    public String buildUrl(intwidth, int height);
}

public class MyUrlLoader extends BaseGlideUrlLoader<MyDataModel>{
    @Override
    protectedString getUrl(MyDataModel model, int width, int height) {
        //Construct the url for the correct size here.
        returnmodel.buildUrl(width, height);
    }
}

接下来我们可以这样来加载图片：

Glide.with(this)
     .using(newMyUrlLoader(this))
     .load(newMyDataModel() {
          @Override
          publicString buidUrl(int width, int height) {
              if(width >= 600) {
                  returnurl1;
              } else{
                  return url2;
                }
          }
      })
    .into(imageView);

.using(new MyUrlLoader(this))：使用我们自己的ModeLoader;
.load(new MyDataModel()):加载我们自定义的数据源

这里需要解释下getUrl的三个参数：
model：你加载的数据源
width：你加载的图片的宽度(px)
height：你加载的图片的高度(px)

这样，我们在高分率的设备上加载大图的url1，在低分辨率的设备上加载小图url2。从而实现了根据不同手机上的像素值大小加载不同尺寸的图片的需求。

当然如果你不想每次都是用.using(new MyUrlLoader())，就需要实现一个自定义的ModelLoaderFactory并在GlideModule中注册。

public class MyGlideModule implements GlideModule {
    ...
    @Override
    public void registerComponents(Contextcontext, Glide glide) {
       glide.register(MyDataModel.class, InputStream.class,
            new MyUrlLoader.Factory());
    }
}

同时也要在AndroidManifest.xml声明

<meta-data
    android:name="com.mypackage.MyGlideModule"
    android:value="GlideModule"/>

如果你有多个自定义的GlideModule类，那么也要在AndroidManifest.xml中声明多个GlideModule。

对于上面的加载不同尺寸的图片，Google的2014年I/O大会App中有一篇文章专门用来介绍这个的，地址在这里。大概原理是这样子的：

在服务端有下面的几个可以加载的url：

URL	图片大小
myserver.com/images/__w-200-400-600-800-1000__/session1.jpg	原始尺寸
myserver.com/images/w200/session1.jpg	200px
myserver.com/images/w400/session1.jpg	400px
myserver.com/images/w600/session1.jpg	600px
myserver.com/images/w800/session1.jpg	800px
myserver.com/images/w1000/session1.jpg	1000px

那么客户端如何根据不同的手机分辨率去加载不同的url呢？

Google是这样做的，下面是核心代码：

//定义正则表达式
private static final Pattern PATTERN = Pattern.compile("__w-((?:-?\\d+)+)__");

@Override
protected String getUrl(String model, int width, intheight) {
    Matcher m =PATTERN.matcher(model);
    int bestBucket= 0;
    if (m.find()) {
        String[]found = m.group(1).split("-");//拿到可以加载的尺寸数组
        for (StringbucketStr : found) {
           bestBucket = Integer.parseInt(bucketStr);
            if(bestBucket >= width) {//刚好大于要加载的尺寸，直接跳出循环
                //the best bucket is the first immediately
                //bigger than the requested width
                break;
            }
        }
        if(bestBucket > 0) {//返回合适尺寸的url
            model =m.replaceFirst("w"+bestBucket);
        }
    }
    return model;
}

大概的步骤如下：
1.根据服务端可加载的图片url定义正则表达式
2.根据正则匹配，获取到可以加载的图片尺寸数组
3.根据要加载的Imageview的大小，选择合适的尺寸的url
4.拼接url并返回

上面的例子中有200,400,600,800,1000是可以加载的，如果你要加载的Imageview的大小为600px,当遍历数组到600时，就会直接跳出循环，返回600px大小图片的url，Glide就会加载600px的图片。

秒客网