RecyclerView 刷新Item图片闪烁

RecyclerView 刷新Item图片闪烁

在项目开发过程中，我们可能会用到RecyclerView来加载列表数据。而数据又离不开需要加载图片。
我们在加载图片的框架时，常用的也是glide picasso等等。而且有些UI设计图为圆角的样式。

比如这样子的布局，左部分就是圆角的样式

对于这样的图片，我们一般情况下有几个解决方法
1、自定义ImageView来实现圆角效果
2、用图片加载控件来控制（本来是用Glide为例来说明）

说到Glide，网上已经有很多文章来说了，一般我们在实际项目中这个库也是用的比较多的

引用Glide库(用的版本是4.7.1)

   api 'com.github.bumptech.glide:glide:4.7.1'
   annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'
1
2

一般调用方法(此方法加载出来的图片为直角)

 Glide.with(context)
      .asBitmap()
      .load(imgUrl)
      .apply(new RequestOptions()
      .placeholder(R.mipmap.img_default_icon) 
      .error(R.mipmap.img_default_icon)
      .into(imageView);
1
2
3
4
5
6
7

重点是来做加载圆角的图片
相比于上面的方法多了一个transforms()，，这个方法就是来设置图片圆角

 Glide.with(context)
      .asBitmap()
      .load(imgUrl)
      .apply(new RequestOptions()
      .placeholder(R.mipmap.img_default_icon)
      .error(R.mipmap.img_default_icon)
      .transforms(new CenterCrop(), new RoundCornerTransform(10))) 
      .into(imageView);
1
2
3
4
5
6
7
8

备注：R.mipmap.img_default_icon 为图片资源，你们可以根据自己的项目图片来
如果不用的话，也可以隐藏掉这2行代码
.placeholder(R.mipmap.img_default_icon)
.error(R.mipmap.img_default_icon)

自定义RoundCornerTransform 继承自BitmapTransformation

public class RoundCornerTransform extends BitmapTransformation {

    //圆角弧度
    private static float radius = 8f;
    private static final String ID = "com.package.name.RoundCornerTransform";
    private static final byte[] ID_BYTES = ID.getBytes(CHARSET);

    public RoundCornerTransform() {
        this(8);
    }

    public RoundCornerTransform(int dp) {
        super();
        this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
    }

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

    /**
     * 将直角的Bitmap转换为圆角的Bitmap
     */
    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);
        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;
    }


    /*
     *最主要的是下面3个方法：
     * 一般我们写上面的部分就可以实现圆角的效果了，但是没有解决刷新item造成图片闪烁问题。
     * 我们也可以参考Glide已经写好的RoundedCorners类
     *
     *  equals
     *  hashCode
     *  updateDiskCacheKey
     **/

    @Override
    public boolean equals(Object o) {
        if (o instanceof RoundCornerTransform) {
            RoundCornerTransform other = (RoundCornerTransform) o;
            return radius == other.radius;
        }
        return false;
    }

    @Override
    public int hashCode() {
        return Util.hashCode(ID.hashCode(),
                Util.hashCode(radius));
    }

    @Override
    public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {
        messageDigest.update(ID_BYTES);

        byte[] radiusData = ByteBuffer.allocate(4).putInt((int)radius).array();
        messageDigest.update(radiusData);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

另外我们网上看到的解决RecyclerView刷新闪烁方法

 ((SimpleItemAnimator)recyclerView.getItemAnimator()).setSupportsChangeAnimations(false);
 ((SimpleItemAnimator)recyclerView.getItemAnimator()).setChangeDuration(0);
1
2