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




  • 2020-12-07 15:19:00

    响应式邮件的编写插件介绍mjml

    以前做项目碰到发邮件的需求,邮件模板的编辑就是一件头疼的事。因为虽说邮件是支持 HTML 的,但是确是 HTML 子集程度的支持,所以存在必须通过 <table> 排版的恶心之处,还有很多兼容性的坑。本质上是各家邮件商的标准有差异吧。

  • 2020-12-07 16:14:22

    nodejs队列实现amqplib,rabbitmq

    其中StartConsumer 会在项目启动时启动,在整个生命周期中一直保持监听状态,在程序结束时mq的链接关闭。需要注意的是 noAck 这个参数,当为false是表示消息出队后不会自动删除,如果设置成true,则无论消息处理成功与否此消息会被删除。注意到在消息不成功是,调用了ch.nack(msg)),此方法是将消息重新入队。

  • 2020-12-07 16:15:46

    RabbitMQ详解

    当前市面上mq的产品很多,比如RabbitMQ、Kafka、ActiveMQ、ZeroMQ和阿里巴巴捐献给Apache的RocketMQ。甚至连redis这种NoSQL都支持MQ的功能。 ActiveMQ ActiveMQ是apache出品,最流行的,能力强劲的开源消息总线,并且它一个完全支持JMS规范的消息中间件。其丰富的API、多种集群构建模式使得它成为业界老牌消息中间件,在中小型企业中应用广泛。

  • 2020-12-07 16:17:53

    nodejs用redis实现队列操作

    其实nodejs实现队列的方式又很多中,也有很多开源的插件和队列数据库可以使用,但是呢,如果我们一个简单的项目,完全可以使用redis来实现队列, 这样再不增加技术难度的同事,我们也就可以完美的实现一个队列

  • 2020-12-07 22:02:44

    intellij idea远程开发的几个想法

    我之前是用idea上面自带的stfp来做的本地开发同步到linux服务器编译,但是我发现这个如果多个客户端同时开发,或者多个同事一起开发,服务器上的就不能更新到本地。是不能增量更新到本地,必须全部下载,比对下载也行,但是工程量打了就特别慢。

  • 2020-12-07 22:06:13

    System Extension Blocked - warning

    After upgrading your macOS computer to High Sierra 10.13.4 or higher (starting in April 2018), you may see a message about a System Extension Blocked. At Williams we have seen this warning appear for these programs: