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

2019-04-18 14:47:10

参考链接 Glide坑遇记:宽度铺满高度自适应 & GIF加载之坑

Glide坑遇记


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 的属性

<ImageView
        android:id="@+id/iv_ocnyang"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        />

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<Bitmap>() {
    @Override
    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> 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

             

https://github.com/OCNYang




  • 2019-05-07 00:04:04

    Tcpdf不使用css来实现线上合同和签章,图片悬浮

    以前虽然有了解过Tcpdf的用法,但是没有实际的应用过,最近在用tcpdf的时候发现对css支持很有限,使的如果想实现类似html的种种效果都很难,而我这次要做的就是 图片悬浮在文字上方形成类似水印或者盖章的效果。

  • 2019-05-09 11:46:30

    Glide使用高级技巧(解决Glide生成缓存Key问题)

    虽说Glide将缓存功能高度封装之后,使得用法变得非常简单,但同时也带来了一些问题。 比如之前有一位群里的朋友就跟我说过,他们项目的图片资源都是存放在七牛云上面的,而七牛云为了对图片资源进行保护,会在图片url地址的基础之上再加上一个token参数。也就是说,一张图片的url地址可能会是如下格式:

  • 2019-05-13 14:34:42

    linux系统中清理MySql的日志文件,打印日志文件

    默认情况下mysql会一直保留mysql-bin文件,这样到一定时候,磁盘可能会被撑满,这时候是否可以删除这些文件呢,是否可以安全删除,是个问题。 首先要说明一下,这些文件都是mysql的日志文件,如果不做主从复制的话,基本上是没用的,虽然没用,但是不建议使用rm命令删除,这样有可能会不安全,正确的方法是通过mysql的命令去删除。

  • 2019-05-14 16:47:27

    数据库整理碎片

    最后还是用的ALTER TABLE来修改的,不知道为什么有时候管用,有时候不管用。

  • 2019-05-17 16:27:26

    在vue项目里面使用引入公共方法

    今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅。 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js