Android平滑图片加载和缓存库 Glide 使用详解

一：简介

在泰国举行的谷歌开发者论坛上，谷歌为我们介绍了一个名叫 Glide的图片加载库，作者是bumptech。这个库被广泛的运用在google的开源项目中，包括2014年google
I/O大会上发布的官方app。

二：使用

dependencies {

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

compile 'com.android.support:support-v4:23.3.0’

}

　如何查看最新版本
http://search.maven.org/#search%7Cga%7C1%7Ca%3A%22glide%22　
3：使用方法及详细介绍
http://mrfu.me/2016/02/27/Glide_Getting_Started/ 介绍的很详细，强烈建议看看。

Yelp app是如何使用Glide优化图片加载的

原文：Glide – How Yelp’s Android App Loads Images

动态加载图片是很多安卓应用的基础。在Yelp（美国最大点评网站）中，图片在把消费者与商家联系起来的过程中至关重要。随着网络通信和硬件水平的越发强大，消费者对于图片数量和图片质量的期望日益增长。图片可以轻易的成为内存和网络流量的消耗大户，处理图片数据的下载和管理成为了一个让人望而却步的任务。我们探索了几种处理这个问题的解决办法，最终认为Glide在性能，使用方便性，稳定性上达到了相当好的平衡。

Glide最简单的使用案例就是从远程服务器或者本地文件系统加载图片，把它们放在磁盘与内存缓存中，然后加载到view上。它可以用在全市图片的app中，Glide为包含图片的滚动列表做了尽可能流畅的优化。

对象池

Glide原理的核心是为bitmap维护一个对象池。对象池的主要目的是通过减少大对象的分配以重用来提高性能（至于对象池的概览，可以查看这个Android
performance pattern视频）。

Dalvik和ART虚拟机都没有使用compacting garbage collector，compacting
garbage collector是一种模式，这种模式中GC会遍历堆，同时把活跃对象移到相邻内存区域，让更大的内存块可以用在后续的分配中。因为安卓没有这种模式，就可能会出现被分配的对象分散在各处，对象之间只有很小的内存可用。如果应用试图分配一个大于邻近的闲置内存块空间的对象，就会导致OutOfMemoryError，然后崩溃，即使总的空余内存空间大于对象的大小。

使用对象池还可以帮助提高滚动的性能，因为重用bitmap意味着更少的对象被创建与回收。垃圾回收会导致“停止一切(Stop The World)”事件，这个事件指的是回收器执行期间，所有线程（包括UI线程）都会暂停。这个时候，图像帧无法被渲染同时UI可能会停滞，这在滚动期间尤其明显。

scrolling-slight

Glide的使用

Glide使用起来很简单，而且不需要任何特别的配置就自动包含了bitmap pooling。

DrawableRequestBuilder requestBuilder = Glide.with(context).load(imageUrl);
requestBuilder.into(imageView);

这就是加载一张图片的全部要求。就像安卓中的很多地方一样，with()方法中的context到底是哪种类型是不清楚的。有一点很重要需要记住，就是传入的context类型影响到Glide加载图片的优化程度，Glide可以监视activity的生命周期，在activity销毁的时候自动取消等待中的请求。但是如果你使用Application
context，你就失去了这种优化效果。

译者注：其实以上的代码是一种比较规范的写法，我们更熟悉的写法是：

Glide.with(context)
.load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg")
.into(ivImg);

优化特性

类似的是，如果相关的item已经滚出了屏幕的范围，Glide会自动取消列表中的悬着的图片请求。因为绝大多数开发者都会在adapter中利用view的回收，Glide做到这点是通过在ImageView上设置一个tag，在加载另外一张图片之前检查这个tag，如果存在就取消第一次请求。

Glide提供了几个让你感觉图片加载速度变快的特性。第一个就是在图片显示在屏幕上之前就预先取出图片。它提供了一个ListPreloader类，它被应该事先取出的item数目实例化。然后通过setOnScrollListener(OnScrollListener).被传递给ListView。你想在ListView之外也能预先取出图片吗？没问题，使用前面的builder对象就可以了，只需调用builder.downloadOnly()。

downloadOnly见：https://github.com/bumptech/glide/wiki/Loading-and-Caching-on-Background-Threads。

我们发现了Glide提供的可以大大提高性能，稳定性的功能，以及安卓图片加载领域的一些设计哲学。这些特性和优化确实可以很好的将图片加载的体验变成一种享受。

Glide：快速和高效的Android平台多媒体资源管理库

Glide 是一个android平台上的快速和高效的开源的多媒体资源管理库,提供多媒体文件的压缩,内存和磁盘缓存,资源池的接口

glide_logo

Glide 支持获取,解压展示视频,图像和GIFs, Glide有一个可弹性的api可以让开发者自定义网络栈技术,默认使用HttpUrlConnection
,你可以替换为 Google’s Volley或者 OkHttp

Glide 开始的目的是提供一个快速和平滑展示图片列表,但是Glide对你需要拉取,
resize和展示远程的图片这些场景都是很管用的.

使用

参考这里 GitHub wiki和这里 javadocs.

简单的例子

// For a simple view:
@Override
public void onCreate(Bundle savedInstanceState) {
...

ImageView imageView = (ImageView) findViewById(R.id.my_image_view);

Glide.with(this).load("http://goo.gl/h8qOq7").into(imageView);
}

// For a list:
@Override
public View getView(int position, View recycled, ViewGroup container) {
final ImageView myImageView;
if (recycled == null) {
myImageView = (ImageView) inflater.inflate(R.layout.my_image_view,
container, false);
} else {
myImageView = (ImageView) recycled;
}

String url = myUrls.get(position);

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

return myImageView;
}

Volley

如果你想使用Volley

Gradle

dependencies{

compile'com.github.bumptech.glide:volley-integration:1.0.+'

compile'com.mcxiaoke.volley:library:1.0.+'

}

然后在你的Activity或者程序中,注册Volley为基本模块

public void onCreate() {
Glide.get(this).register(GlideUrl.class, InputStream.class,
new VolleyUrlLoader.Factory(yourRequestQueue));
...
}

OkHttp

Gradle:

dependencies{

compile'com.github.bumptech.glide:okhttp-integration:1.0.+'

compile'com.squareup.okhttp:okhttp:2.0.+'

}

然后在你的Activity或者程序中,注册Volley为基本模块

public void onCreate() {
Glide.get(this).register(GlideUrl.class, InputStream.class,
new OkHttpUrlLoader.Factory(yourOkHttpClient));
...
}

常见问题

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

为什么
我总会得到类似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
}
};

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

The key is

ViewTarget.setTagId

;
setting it will free up the default

setTag

on
the

ImageView

so
you can use it as root in the item layout. It was introduced in Glide 3.6.0 in issue
#370.

In your manifest add this:

<application
android:name=".App"

Then create an application context class:

public class App extends Application {
@Override public void onCreate() {
super.onCreate();
ViewTarget.setTagId(R.id.glide_tag);
}
}

Add the following as contents for

src/main/values/ids.xml

:

<resources>
<item type="id" name="glide_tag" />
</resources>

(or just add the above

<item
... />

into any

resources

xml
in

values

)

3.为什么不能设置Tag，是因为你使用的姿势不对哦。如何为ImageView设置Tag呢？且听我细细道来。

方案一：使用setTag(int,object)方法设置tag,具体用法如下：

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

一些使用技巧

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

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

2.Glide.clear()

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

3.ListPreloader

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

一些基于Glide的优秀库

1.glide-transformations
https://github.com/wasabeef/glide-transformations
一个基于Glide的transformation库，拥有裁剪，着色，模糊，滤镜等多种转换效果，赞的不行不行的~~

2.GlidePalette
https://github.com/florent37/GlidePalette
一个可以在Glide加载时很方便使用Palette的库。

参考：http://www.jianshu.com/p/4a3177b57949