[置顶] 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