您的位置：首页 > 移动开发 > Android开发

图片加载框架Glide

2016-11-17 15:59 162 查看

①之前一直使用XUtils和利用Lrucash自定义的图片加载框架，现在转为使用Google推荐的Glide进行加载图片。②Glide与Facebook开源的Fresco有和区别：Fresco在需要加载大量的图片（越多越好）时，对占用的内存要节省不少，但是在加载少量的图片的时候使用Glide比较好，Glide的jar包只有几百k，而Fresco却要占用2M多的内存（宰鸡焉用牛刀）③ Glide都在jcenter上。在项目中添加依赖非常简单：[js] viewplain copydependencies { compile 'com.github.bumptech.glide:glide:3.5.2' compile 'com.android.support:support-v4:22.0.0' } ④加载图片的方式Glide[js] viewplain copyGlide.with(context) .load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg") .into(ivImg); ⑤Glide易用，因为Glide的with方法不光接受Context，还接受Activity 和 Fragment，Context会自动的从他们获取。

同时将Activity/Fragment作为with()参数的好处是：图片加载会和Activity/Fragment的生命周期保持一致，比如Paused状态在暂停加载，在Resumed的时候又自动重新加载。所以我建议传参的时候传递Activity 和 Fragment给Glide，而不是Context。⑥默认加载的Bitmap是565，如果需要提高显示的精度那么就像下面这样修改可以创建一个新的

GlideModule

将Bitmap格式转换到

ARGB_8888

：[js] viewplain copypublic class GlideConfiguration implements GlideModule { @Override public void applyOptions(Context context, GlideBuilder builder) { // Apply options to the builder here. builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888); } @Override public void registerComponents(Context context, Glide glide) { // register ModelLoaders here. } }

同时在AndroidManifest.xml
中将[code]GlideModule

定义为

meta-data

Glide特点

使用简单可配置度高，自适应程度高支持常见图片格式 Jpg png gif webp支持多种数据源网络、本地、资源、Assets 等高效缓存策略支持Memory和Disk图片缓存默认Bitmap格式采用RGB_565内存使用至少减少一半生命周期集成根据Activity/Fragment生命周期自动管理请求高效处理Bitmap 使用BitmapPool使Bitmap复用，主动调用recycle回收需要回收的Bitmap，减小系统回收压力

Glide简单使用

1.）添加引用 build.gradle 中添加配置

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

2.）设置绑定生命周期

我们可以更加高效的使用Glide提供的方式进行绑定，这样可以更好的让加载图片的请求的生命周期动态管理起来

  Glide.with(Context context);// 绑定ContextGlide.with(Activity activity);// 绑定ActivityGlide.with(FragmentActivity activity);// 绑定FragmentActivityGlide.with(Fragment fragment);// 绑定Fragment

3. ）简单的加载图片实例

Glide.with(this).load(imageUrl).into(imageView);

4.）设置加载中以及加载失败图片

api里面对placeholder()、error()函数中有多态实现用的时候可以具体的熟悉一下

Glide.with(this).load(imageUrl).placeholder(R.mipmap.ic_launcher).error(R.mipmap.ic_launcher).into(imageView);

5.）设置跳过内存缓存

Glide.with(this).load(imageUrl).skipMemoryCache(true).into(imageView);

6.）设置下载优先级

Glide.with(this).load(imageUrl).priority(Priority.NORMAL).into(imageView);

7.）设置缓存策略

Glide.with(this).load(imageUrl).diskCacheStrategy(DiskCacheStrategy.ALL).into(imageView);

策略解说：all:缓存源资源和转换后的资源none:不作任何磁盘缓存source:缓存源资源result：缓存转换后的资源

8.）设置加载动画

api也提供了几个常用的动画：比如crossFade()

Glide.with(this).load(imageUrl).animate(R.anim.item_alpha_in).into(imageView);

R.anim.item_alpha_in

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><alphaandroid:duration="500"android:fromAlpha="0.0"android:toAlpha="1.0"/></set>

9.）设置缩略图支持

这样会先加载缩略图然后在加载全图

Glide.with(this).load(imageUrl).thumbnail(0.1f).into(imageView);

10.）设置加载尺寸

Glide.with(this).load(imageUrl).override(800, 800).into(imageView);

11.）设置动态转换

Glide.with(this).load(imageUrl).centerCrop().into(imageView);

api提供了比如：centerCrop()、fitCenter()等函数也可以通过自定义Transformation，举例说明：比如一个人圆角转化器

 public class GlideRoundTransform extends BitmapTransformation {private float radius = 0f;public GlideRoundTransform(Context context) {this(context, 4);}public GlideRoundTransform(Context context, int dp) {super(context);this.radius = Resources.getSystem().getDisplayMetrics().density * dp;}@Overrideprotected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {return roundCrop(pool, toTransform);}private Bitmap roundCrop(BitmapPool pool, Bitmap source) {if (source == null) return null;Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);if (result == null) {result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);}Canvas canvas = new Canvas(result);Paint paint = new Paint();paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));paint.setAntiAlias(true);RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());canvas.drawRoundRect(rectF, radius, radius, paint);return result;}@Overridepublic String getId() {return getClass().getName() + Math.round(radius);}}

具体使用

Glide.with(this).load(imageUrl).transform(new GlideRoundTransform(this)).into(imageView);

12.）设置要加载的内容

项目中有很多需要先下载图片然后再做一些合成的功能，比如项目中出现的图文混排，该如何实现目标下

        Glide.with(this).load(imageUrl).centerCrop().into(new SimpleTarget<GlideDrawable>() {@Overridepublic void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {imageView.setImageDrawable(resource);}});

13 .）设置监听请求接口

  Glide.with(this).load(imageUrl).listener(new RequestListener<String, GlideDrawable>() {@Overridepublic boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {return false;}@Overridepublic boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {//imageView.setImageDrawable(resource);return false;}}).into(imageView);

设置监听的用处可以用于监控请求发生错误来源，以及图片来源是内存还是磁盘

15.)设置动态GIF加载方式

 Glide.with(this).load(imageUrl).asBitmap().into(imageView);//显示gif静态图片Glide.with(this).load(imageUrl).asGif().into(imageView);//显示gif动态图片

16.）缓存的动态清理

 Glide.get(this).clearDiskCache();//清理磁盘缓存 需要在子线程中执行Glide.get(this).clearMemory();//清理内存缓存  可以在UI主线程中进行

[js] viewplain copy<meta-data android:name="com.inthecheesefactory.lab.glidepicasso.GlideConfiguration" android:value="GlideModule"/> <img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294447874.jpg" alt="quality2" style="border:none; max-width:100%">这样看起来就会好很多。我们再来看看内存开销图，这次貌似Glide花费了两倍于上次的内存，但是Picasso的内存开销仍然远大于Glide。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294918728.png" alt="ram2_1" style="border:none; max-width:100%">原因在于Picasso是加载了全尺寸的图片到内存，然后让GPU来实时重绘大小。而Glide加载的大小和ImageView的大小是一致的，因此更小。当然，Picasso也可以指定加载的图片大小的：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">Picasso.with(this) .load("http://nuuneoi.com/uploads/source/playstore/cover.jpg") .resize(768, 432) .into(ivImgPicasso);</pre>但是问题在于你需要主动计算ImageView的大小，或者说你的ImageView大小是具体的值（而不是wrap_content），你也可以这样：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">Picasso.with(this) .load("http://nuuneoi.com/uploads/source/playstore/cover.jpg") .fit() .centerCrop() .into(ivImgPicasso);</pre>现在Picasso的内存开销就和Glide差不多了。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294433243.png" alt="memory3" style="border:none; max-width:100%">虽然内存开销差距不到，但是在这个问题上Glide完胜Picasso。因为Glide可以自动计算出任意情况下的ImageView大小。<h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t3"></a>Image质量的细节</h2>这是将ImageView还原到真实大小时的比较。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294704430.png" alt="quality3" style="border:none; max-width:100%">你可以看到，Glide加载的图片没有Picasso那么平滑，我还没有找到一个可以直观改变图片大小调整算法的方法。但是这并不算什么坏事，因为很难察觉。 <h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t4"></a>磁盘缓存</h2>Picasso和Glide在磁盘缓存策略上有很大的不同。Picasso缓存的是全尺寸的，而Glide缓存的是跟ImageView尺寸相同的。 <img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294110987.jpg" alt="cache" style="border:none; max-width:100%">上面提到的平滑度的问题依然存在，而且如果加载的是RGB565图片，那么缓存中的图片也是RGB565。 我尝试将ImageView调整成不同大小，但不管大小如何Picasso只缓存一个全尺寸的。Glide则不同，它会为每种大小的ImageView缓存一次。尽管一张图片已经缓存了一次，但是假如你要在另外一个地方再次以不同尺寸显示，需要重新下载，调整成新尺寸的大小，然后将这个尺寸的也缓存起来。具体说来就是：假如在第一个页面有一个200x200的ImageView，在第二个页面有一个100x100的ImageView，这两个ImageView本来是要显示同一张图片，却需要下载两次。不过，你可以改变这种行为，让Glide既缓存全尺寸又缓存其他尺寸：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">Glide.with(this) .load("http://nuuneoi.com/uploads/source/playstore/cover.jpg") .diskCacheStrategy(DiskCacheStrategy.ALL) .into(ivImgGlide);</pre>下次在任何ImageView中加载图片的时候，全尺寸的图片将从缓存中取出，重新调整大小，然后缓存。Glide的这种方式优点是加载显示非常快。而Picasso的方式则因为需要在显示之前重新调整大小而导致一些延迟，即便你添加了这段代码来让其立即显示：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">//Picasso .noFade();</pre><img src="http://jcodecraeer.com/uploads/allimg/150327/163Aa632-0.gif" alt="loading3" style="border:none; max-width:100%; display:block; margin-left:auto; margin-right:auto"> Picasso和Glide各有所长，你根据自己的需求选择合适的。对我而言，我更喜欢Glide，因为它远比Picasso快，虽然需要更大的空间来缓存。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294447874.jpg" alt="quality2" style="border:none; max-width:100%">这样看起来就会好很多。我们再来看看内存开销图，这次貌似Glide花费了两倍于上次的内存，但是Picasso的内存开销仍然远大于Glide。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294918728.png" alt="ram2_1" style="border:none; max-width:100%">原因在于Picasso是加载了全尺寸的图片到内存，然后让GPU来实时重绘大小。而Glide加载的大小和ImageView的大小是一致的，因此更小。当然，Picasso也可以指定加载的图片大小的：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">Picasso.with(this) .load("http://nuuneoi.com/uploads/source/playstore/cover.jpg") .resize(768, 432) .into(ivImgPicasso);</pre>但是问题在于你需要主动计算ImageView的大小，或者说你的ImageView大小是具体的值（而不是wrap_content），你也可以这样：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">Picasso.with(this) .load("http://nuuneoi.com/uploads/source/playstore/cover.jpg") .fit() .centerCrop() .into(ivImgPicasso);</pre>现在Picasso的内存开销就和Glide差不多了。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294433243.png" alt="memory3" style="border:none; max-width:100%">虽然内存开销差距不到，但是在这个问题上Glide完胜Picasso。因为Glide可以自动计算出任意情况下的ImageView大小。<h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t5"></a>Image质量的细节</h2>这是将ImageView还原到真实大小时的比较。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294704430.png" alt="quality3" style="border:none; max-width:100%">你可以看到，Glide加载的图片没有Picasso那么平滑，我还没有找到一个可以直观改变图片大小调整算法的方法。但是这并不算什么坏事，因为很难察觉。 <h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t6"></a>磁盘缓存</h2>Picasso和Glide在磁盘缓存策略上有很大的不同。Picasso缓存的是全尺寸的，而Glide缓存的是跟ImageView尺寸相同的。 <img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427445294110987.jpg" alt="cache" style="border:none; max-width:100%">上面提到的平滑度的问题依然存在，而且如果加载的是RGB565图片，那么缓存中的图片也是RGB565。 我尝试将ImageView调整成不同大小，但不管大小如何Picasso只缓存一个全尺寸的。Glide则不同，它会为每种大小的ImageView缓存一次。尽管一张图片已经缓存了一次，但是假如你要在另外一个地方再次以不同尺寸显示，需要重新下载，调整成新尺寸的大小，然后将这个尺寸的也缓存起来。具体说来就是：假如在第一个页面有一个200x200的ImageView，在第二个页面有一个100x100的ImageView，这两个ImageView本来是要显示同一张图片，却需要下载两次。不过，你可以改变这种行为，让Glide既缓存全尺寸又缓存其他尺寸：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">Glide.with(this) .load("http://nuuneoi.com/uploads/source/playstore/cover.jpg") .diskCacheStrategy(DiskCacheStrategy.ALL) .into(ivImgGlide);</pre>下次在任何ImageView中加载图片的时候，全尺寸的图片将从缓存中取出，重新调整大小，然后缓存。Glide的这种方式优点是加载显示非常快。而Picasso的方式则因为需要在显示之前重新调整大小而导致一些延迟，即便你添加了这段代码来让其立即显示：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">//Picasso .noFade();</pre><img src="http://jcodecraeer.com/uploads/allimg/150327/163Aa632-0.gif" alt="loading3" style="border:none; max-width:100%; display:block; margin-left:auto; margin-right:auto"> Picasso和Glide各有所长，你根据自己的需求选择合适的。对我而言，我更喜欢Glide，因为它远比Picasso快，虽然需要更大的空间来缓存。 <h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t7"></a>特性 </h2>你可以做到几乎和Picasso一样多的事情，代码也几乎一样。Image Resizing<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">// Picasso .resize(300, 200); // Glide .override(300, 200);</pre>Center Cropping<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">// Picasso .centerCrop(); // Glide .centerCrop();</pre>Transforming<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">// Picasso .transform(new CircleTransform()) // Glide .transform(new CircleTransform(context))</pre>设置占位图或者加载错误图：<pre class="js" style="white-space:pre-wrap; word-wrap:break-word; color:rgb(51,51,51); font-size:14px; line-height:26px; background-color:rgb(255,255,255)" name="code">// Picasso .placeholder(R.drawable.placeholder) .error(R.drawable.imagenotfound) // Glide .placeholder(R.drawable.placeholder) .error(R.drawable.imagenotfound)</pre>几乎和Picasso一样，从Picasso转换到Glide对你来说就是小菜一碟。 <h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t8"></a>有什么Glide可以做而Picasso做不到</h2>Glide可以加在GIF动态图，而Picasso不能。<img src="http://jcodecraeer.com/uploads/20150327/1427445366503084.gif" alt="gifanimation2" style="border:none; max-width:100%"> 同时因为Glide和Activity/Fragment的生命周期是一致的，因此gif的动画也会自动的随着Activity/Fragment的状态暂停、重放。Glide 的缓存在gif这里也是一样，调整大小然后缓存。 但是从我的一次测试结果来看Glide 动画会消费太多的内存，因此谨慎使用。除了gif动画之外，Glide还可以将任何的本地视频解码成一张静态图片。还有一个特性是你可以配置图片显示的动画，而Picasso只有一种动画：fading in。最后一个是可以使用<code>thumbnail()产生一个你所加载图片的thumbnail。</code><code>其实还有一些特性，不过不是非常重要，比如将图像转换成字节数组等。</code><h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t9"></a><code>配置</code></h2>有许多可以配置的选项，比如大小，缓存的磁盘位置，最大缓存空间，位图格式等等。可以在这个页面查看这些配置 <code><a target="_blank" href="https://github.com/bumptech/glide/wiki/Configuration" style="color:rgb(51,102,153); text-decoration:none">Configuration</a></code>。 <h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t10"></a>库的大小</h2>Picasso (v2.5.1)的大小约118kb，而Glide (v3.5.2)的大小约430kb。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427453389115686.png" alt="librarysize" style="border:none; max-width:100%">Anyway 312KB difference might not be that significant.不过312kb的差距并不是很重要。Picasso和Glide的方法个数分别是840和2678个。<img class="width-100percent" src="http://jcodecraeer.com/uploads/20150327/1427453390188737.png" alt="methodcount" style="border:none; max-width:100%">必须指出，对于DEX文件65535个方法的限制来说，2678是一个相当大的数字了。建议在使用Glide的时候开启ProGuard。 <h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t11"></a>总结 </h2>Glide和Picasso都是非常完美的库。Glide加载图像以及磁盘缓存的方式都要优于Picasso，速度更快，并且Glide更有利于减少OutOfMemoryError的发生，GIF动画是Glide的杀手锏。不过Picasso的图片质量更高。你更喜欢哪个呢？虽然我使用了很长事件的Picasso，但是我得承认现在我更喜欢Glide。我的建议是使用Glide，但是将Bitmap格式换成 ARGB_8888、让Glide缓存同时缓存全尺寸和改变尺寸两种。 <h2 style="margin:0px; padding:0px; color:rgb(51,51,51); font-family:Arial; line-height:26px"><a name="t12"></a>相关资源</h2>- <a target="_blank" href="http://google-opensource.blogspot.com/2014/09/glide-30-media-management-library-for.html" style="color:rgb(51,102,153); text-decoration:none">Glide 3.0: a media management library for Android</a>- <a target="_blank" href="https://github.com/bumptech/glide/wiki" style="color:rgb(51,102,153); text-decoration:none">Glide Wiki</a>- <a target="_blank" href="http://pluu.github.io/android%20study/2015/01/15/android-glide-picasso/" style="color:rgb(51,102,153); text-decoration:none">Android Picasso vs Glide</a>- <a target="_blank" href="http://vardhan-justlikethat.blogspot.com/2014/09/android-image-loading-libraries-picasso.html" style="color:rgb(51,102,153); text-decoration:none">Android: Image loading libraries Picasso vs Glide</a> 我尝试将ImageView调整成不同大小，但不管大小如何Picasso只缓存一个全尺寸的。Glide则不同，它会为每种大小的ImageView缓存一次。尽管一张图片已经缓存了一次，但是假如你要在另外一个地方再次以不同尺寸显示，需要重新下载，调整成新尺寸的大小，然后将这个尺寸的也缓存起来。具体说来就是：假如在第一个页面有一个200x200的ImageView，在第二个页面有一个100x100的ImageView，这两个ImageView本来是要显示同一张图片，却需要下载两次。不过，你可以改变这种行为，让Glide既缓存全尺寸又缓存其他尺寸：[js] viewplain copyGlide.with(this) .load("http://nuuneoi.com/uploads/source/playstore/cover.jpg") .diskCacheStrategy(DiskCacheStrategy.ALL) .into(ivImgGlide); 下次在任何ImageView中加载图片的时候，全尺寸的图片将从缓存中取出，重新调整大小，然后缓存。Glide的这种方式优点是加载显示非常快。而Picasso的方式则因为需要在显示之前重新调整大小而导致一些延迟，即便你添加了这段代码来让其立即显示：[js] viewplain copy//Picasso .noFade();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： android 图片框架 Glide

相关文章推荐

新的分享

章节导航