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-04-17 11:28:35

    TweenMax中文初级教程二

    TimelineMax是GreenSock 动画平台中的动画组织、排序、管理工具,可创建时间轴(timeline)作为动画或其他时间轴的容器,这使得整个动画控制和精确管理时间变得简单,避免了通过反复delay和回调进行动画。 作者:李霖弢 链接:https://www.jianshu.com/p/8c0361e43bf5 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2020-04-17 11:28:57

    TweenMax中文初级教程三

    动画关键词:CSS(一般可以省略) CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画 在CSSPlugin中CSS属性需要写成驼峰式,例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位,CSSPlugin还可以在不同的单位间做动画:

  • 2020-04-17 11:29:23

    TweenMax中文初级教程四

    用于滚动窗口(类似于window.scrollTo(x, y))或DOM元素(如myDiv.scrollTop = y; myDiv.scrollLeft = x;)。滚动窗口时使用window作为动画目标。

  • 2020-04-17 14:06:29

    图片解释EaseIn,EaseOut,EaseInOut

    1.EaseIn:即缓动发生在入口处,也就是刚开始的时候。 2.EaseOut:即缓动发生在出口处,也就是结束之前。 3.EaseInOut:就是两边都有缓动了.

  • 2020-04-21 14:47:13

    Redis危险命令重命名、禁用

    flushdb,清空数据库 flushall,清空所有记录,数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键

  • 2020-04-21 15:13:15

    redis 简单使用

    Redis和Memcached类似,也属于k-v数据存储 Redis官网 https://redis.io支持更多value类型,除了和string外,还支持hash、lists(链表)、sets(集合)和sorted sets(有序集合) Redis是可以把数据存储在磁盘上的并且使用了两种文件格式:全量数据(RDB)和增量请求(aof)。一般叫做redis持久化 全量数据格式是把内存中的数据写入磁盘,便于下次读取文件进行加载。

  • 2020-04-21 15:14:20

    SpringBoot + Redis:基本配置及使用

    # Redis数据库索引(默认为0) spring.redis.database=0# Redis服务器地址 spring.redis.host=127.0.0.1# Redis服务器连接端口 spring.redis.port=6379# Redis服务器连接密码(默认为空) spring.redis.password=# 连接池最大连接数(使用负值表示没有限制) spring.redis.jedis.pool.max-active=20# 连接池最大阻塞等待时间(使用负值表示没有限制) spring.redis.jedis.pool.max-wait=-1# 连接池中的最大空闲连接 spring.redis.jedis.pool.max-idle=10# 连接池中的最小空闲连接 spring.redis.jedis.pool.min-idle=0# 连接超时时间(毫秒) spring.redis.timeout=1000