Glide坑遇记：宽度铺满高度自适应 & GIF加载之坑

Glide坑遇记

Glide 坑遇记

有一段时间没有更新文章了，但登录 发现时不时也有新的点赞和关注，在这里十分感谢大家的认可，也为这段时间的静默表示抱歉。这段时间确实有点忙，自己一直在利用 一些平台（这里不说出平台名称了，一来避嫌，二来现在对这些平台提供的数据也没太多好感了） 提供的接口，敲写一个生活工具类的App，一方面是使用 Retrofit + RxJava + okhttp 这种比较热门的框架结构熟悉一下，一方面是集体测试一下 GitHub 平时不太使用的热门库。现在这个项目还在开发中，上线后会通知大家，也会在适当的时候把这个项目的源代码开源到 GitHub,同时也会写一些这个项目用到的大家感兴趣的技术的介绍文章。好了，啰嗦的够多了，开始今天的正题...

Glide 的基本使用可以查看下面这些文章：

图片加载库Glide介绍
Glide图片加载库的使用

1、Glide 实现 ImageView 宽度填满，高度自适应的效果

要说这个，就要先说一下大家在平时用到 ImageView 实现宽度填满，高度自适应的方法。

ImageView 宽度填满，高度自适应常用在：

1. ListView 列表布局的条目中（RecycleView 同理），比如实现 item 中的图片充满屏幕，高度根据具体图片比例自适应，商品详情中常常用到。
2. GridView 网格布局的条目中，假如 item 有两列，想让每一列的 item 中的图片占用屏幕的一半。
3. 其他使用单独图片也想达到这种效果的场景。

这里提供两种实现方法，也都是大家都知道：

1、重写 onMeasure 方法

public class ResizableImageView extends ImageView {  
  
    public ResizableImageView(Context context) {  
        super(context);  
    }  
  
    public ResizableImageView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  
  
    @Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){  
        Drawable d = getDrawable(); 
        if(d!=null){  
            int width = MeasureSpec.getSize(widthMeasureSpec);  
            //高度根据使得图片的宽度充满屏幕计算而得  
            int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());  
            setMeasuredDimension(width, height);  
        }else{  
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
        }  
    }  
}  

在布局文件 xml 中,ImageView 不用对显示方式进行设置（使用默认就行）。

2、设置 ImageView 的属性

fitXY 这种图片的显示方式的效果是：根据 ImageView 设置的大小拉伸图片以填充满空间，（单独设置此属性时）图片会变形。
adjustViewBounds 是限制图片在显示时保持原图比例。（和 fitXY 显示方式合用能到达自适应的效果）

通过这上面两种方式显示图片一般都能够宽度充满高度自适应的效果，可是当你用 Glide 请求显示网络图片的时候，你会很失望的发现上面的设置失效了同时图片也变形了。

那么这时候是哪里出了问题了呢？（下面只做一个笼统的分析，具体可以看这个链接： Glide使用及注意的地方）
其实如果你熟知 Glide 的话，可能你还记得，Glide 在加载图片的时候，加载的大小会和 ImageView 的大小保持一致。也就是 ImageView 的大小决定了 Glide 加载图片的尺寸。而这里我们的 ImageView 设置的高度是 wrap_content，Glide 就无法准确的加载图片的大小了。

那这个时候怎么才能保证按原图的比例来自适应高度显示呢？

这里有两种方式：

1. 你已经知道图片（或其他方式提前知道）图片的比例，然后在用 Glide 请求图片时限制图片的加载大小，即设置 override(int width, int height) 。这时候加载到的图片是原图比例，显示的时候虽然有拉伸/压缩但都会保存原比例的。这种方式适用于你加载的图片大小都比较规范固定的时候。

2. 当然，你请求的图片源并不一定大小都一致。那这时候就可以使用下面这种方式了。这种方式的原理是，先使用 Glide 把图片的原图请求加载过来，然后再按原图来显示图片。

   Glide.with(mContext)
   .load(url)
   .asBitmap()
   .into(new SimpleTarget() {
   @Override
   public void onResourceReady(Bitmap resource, GlideAnimation glideAnimation) {
   ivOcnyang.setImageBitmap(resource);
   }
   });

这两种方法中，其实更加提倡的是第一种方式，因为这种方式不会造成任何负面的影响。但第二种方式，由于Glide加载图片时是以全分辨率加载的，当加载图片过大且图片很多时，可能造成 OOM。同时第二种方式使用在列表上复用时会造成条目错乱错位。

2、Glide 加载 Gif 图片的那些坑

我们知道，对比其他几大图片加载框架，我们更青睐 Glide 有一部分原因就是因为它能显示动态图，毕竟像下面这种图是让我最高兴最无法拒绝的。

每看到星期五，这两个字我就莫名的兴奋

2.1、加载 Gif 图片慢或者显示不出来

这是一个公认的问题了，在 Glide 的 issue 上有人提出过，并且作者也给出了解决方案。
加载 GIF 时需要调用 asGif() 方法，同时设置特别的缓存策略，调用 diskCacheStrategy() 将缓存策略设置为 SOURCE（缓存原图） 或者 NONE（不做缓存）。

Glide 在加载 GIF 时不调用 asGif() 方法也是能正常显示动画的。但建议调用 asGif()。

if (imgUrl.toUpperCase().endsWith(".GIF")) {
            Glide.with(mContext)
                    .load(imgUrl)
                    .asGif()
                    .override(width, height)
                    .placeholder(placeholderImg)
                    .error(errorImg)
                    .dontAnimate() //去掉显示动画
                    .centerCrop()
                    .diskCacheStrategy(DiskCacheStrategy.SOURCE) //DiskCacheStrategy.NONE
                    .into(ivOcnyang);
        } else {
            Glide.with(mContext)
                    .load(imgUrl)
                    .override(width, height)
                    .placeholder(placeholderImg)
                    .error(errorImg)
                    .crossFade()
                    .centerCrop()
                    .into(ivOcnyang);
        }

2.2、动态GIF图片显示的次数

可能你有时有需求，需要设置动态图的显示一定次数时停止。

Glide.with(mContext)
        .load(imgUrl)
        .asGif()
        .override(width,height)
        .placeholder(placeholderImg)
        .error(errorImg)
        .dontAnimate()
        .centerCrop()
        .diskCacheStrategy(DiskCacheStrategy.SOURCE)
        .into(new GlideDrawableImageViewTarget(ivOcnyang, 3));

这里的 GlideDrawableImageViewTarget(ImageView view, int maxLoopCount) 的第二个参数 maxLoopCount 就是你要循环的次数。

2.3、将 GIF 作为 Bitmap 显示

如果要显示的图片列表包含多种图像类型, 有图片和 GIF, 全都强制判断 GIF 有时是不可行的. 我们可以将 GIF 先作为 Bitmap 加载第一帧图像. 然后给用户一个提示, 当用户点击时, 再使用 GIF 方式重新加载。

Glide  
    .with(context)
    .load(gifUrl)
    .asBitmap()
    .into(imageViewGifAsBitmap);

3、Glide图片和默认图交替过程中,默认图闪烁一下

这是比较坑的一点，如果占位图要比原图大有时会出现这种问题。其实有时候你会发现占位图和 loading 图的设置有时会造成各种问题，有时可能影响图片显示不正常。

解决方法：
去掉动画：dontAnimate()

有时，使用 CircleImageView 加载图片时显示不正常，有可能是CircleImageView引起的与占位图和显示动画的冲突，解决方法同上，亦或去掉占位图。

4、CenterCrop与Transformer的共存问题

这个问题的 issues 地址。

这个问题是在网格布局和瀑布流布局中使用 .centerCrop，所以必须要在 ImageView 中去设置 scaleType 为 centerCrop。
但是，当你同时给图片设置圆角类 Transformer 时，即在 Glide 加载图片时给 .transform() 配置了一个圆角矩形，如果同时 ImageView 的 scaleType 设置了 centerCrop，那圆角就没有了。

解决方法，设置两个 Transformer：

...
.transform(new CenterCrop(getContext())
          ,new GlideRoundTransform(getContext(), 25))
...

这里给出圆角 GlideRoundTransform 源代码。（设置圆形图片，更多方式可以参考这个 How to round an image with Glide library? ）

public class GlideRoundTransform extends BitmapTransformation {

    private static 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;
    }

    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return roundCrop(pool, toTransform);
    }

    private static 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;
    }

    @Override
    public String getId() {
        return getClass().getName() + Math.round(radius);
    }
}

5、得到类似 You cannot start a load for a destroyed activity 这样的异常

解决这个办法只需在使用 Glide 时记住：不要再非主线程里面使用 Glide 加载图片，如果真的使用了，请把 context 参数换成 getApplicationContext。

6、一些使用技巧

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

2. 列表滑动时取消请求
当列表在滑动的时候，调用 pauseRequests() 取消请求，滑动停止时，调用 resumeRequests() 恢复请求。

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

3. 清除所有加载请求
当你想清除掉所有的图片加载请求时，可以使用 Glide.clear() 这个方法。

4. Glide特效转换库
glide-transformations 一个基于Glide的transformation库，拥有裁剪，着色，模糊，滤镜等多种转换效果。

5. Palette 库
GlidePalette 一个在Glide加载时很方便使用Palette的库。

参考来源：
http://blog.csdn.net/easion_zms/article/details/50263409
http://www.jianshu.com/p/4a3177b57949
http://answerzhao.github.io/2016/10/16/issues%20in%20using%20Glide/
http://blog.csdn.net/s569646547/article/details/54090034