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-03-17 22:19:28

    动态更新Toolbar Menu以及Menu中同时显示文字和图标

    我们经常会有这样的需求,在切换Fragment或者点击某个按钮后动态更新Toolbar上Menu项.但是onCreateOptionsMenu方法只在创建Activity的时候调用一次,以后就不再调用了,所以就不能在onCreateOptionsMenu中做处理了。 不过系统提供了另外的一个方法onPrepa

  • 2019-03-26 19:25:01

    Android studio 打包后安装闪退 Fatal Signal 6(SIGABRT)...

    项目上线前打包安装后闪退,查了很多原因,比如混淆文件的内容,第三方库不加入混淆等等,均未成功,后来关闭混淆打包后运行成功,原因可能是依赖工程中的库文件不能被混淆,关闭本工程混淆开关后,依赖工程的混淆开关也要关闭,关闭混淆后如果怕被反编译,可使用百度开发平台的app加固,加固的同时还能使用多渠道打包工具。

  • 2019-03-26 19:29:05

    Android NDK开发Crash错误定位

     在Android开发中,程序Crash分三种情况:未捕获的异常、ANR(Application Not Responding)和闪退(NDK引发错误)。其中未捕获的异常根据logcat打印的堆栈信息很容易定位错误。ANR错误也好查,Android规定,应用与用户进行交互时,如果5秒内没有响应用户的操作,则会引发ANR错误,并弹出一个系统提示框,让用户选择继续等待或立即关闭程序。并会在/data/anr目录下生成一个traces.txt文件,记录系统产生anr异常的堆栈和线程信息。如果是闪退,这问题比较难查, --------------------- 作者:xyang0917 来源:CSDN 原文:https://blog.csdn.net/xyang81/article/details/42319789 版权声明:本文为博主原创文章,转载请附上博文链接!

  • 2019-04-01 22:46:39

    电子签章的实施方案

    WORD/EXCEL签章模块,该部分实现与WORD/EXCEL的无缝结合,并提供给用户简单直观的菜单和工具条来实现文档签章验证等各种操作,其中,KHSC-64智能密码钥匙是签章模块中用户证书和图章的载体

  • 2019-04-01 22:48:25

    如何用 Java 对 PDF 文件进行电子签章

    印章是我国特有的历史文化产物,古代主要用作身份凭证和行驶职权的工具。它的起源是由于社会生活的实际需要。早在商周时代,印章就已经产生。如今的印章已成为一种独特的,融实用性和艺术性为一体的艺术瑰宝。传统的印章容易被坏人、小人私刻;从而新闻鲜有报道某某私刻公章,侵吞国家财产。随着计算机技术、加密技术及图像处理技术的发展,出现了电子签章。电子签章是电子签名的一种表现形式,利用图像处理技术、数字加密技术将电子签名操作转化为与纸质文件盖章操作相同的可视效果,同时利用电子签名技术保障电子信息的真实性和完整性以及签名人的不可否认性

  • 2019-04-01 22:59:22

    Android Studio 3.0 利用cmake搭建jni环境(很详细哦)

    我用的Android Studio是3.0的版本,然后想搭建一下jni的环境。这里把自己遇到的问题和注意点都记录下。 首先是需要在android studio里面安装最基本的环境。 打开Default Preference里面查看SDK Tool选项。