RecyclerView图片错乱复用问题

RecyclerView图片错乱复用问题

由于开发排行榜过程中遇到些问题,这里统一做下记录,由于RecyclerView的缓存复用机制,所以会导致item的复用问题,当图片时尤为明显,例如用户列表中有头像的没头像的,这时明显能看到错乱问题。

直接说下2种方案,包括正确的不正确的,好的坏的:

1、直接每次都给图片设置setImageDrawable(),然后加载网络图片

这样的话,每次刷新的时候图片都会先被设置成setImageDrawable() 中的图片,然后加载完网络图片的时候才会显示出来。猛的一看没问题,但是这就会造成什么呢,当你刷新的时候列表图片会有一个闪动的过程,也就是: 网络图片->设置的图片->网络图片这么一个闪动过程。体验不好,我们需要实现当图片地址不变的时候图片也依旧显示不变就好了。

2、给每个item中的图片设置tag

这个是目前的比较靠谱的方案了吧,给图片设置tag(下文中的tag设置为了图片的url),当该图片没有tag的时候说明这里还没有开始复用,那么直接加载网络图片即可;当该图片有tag的时候并且tag和图片的url相同,说明是复用来的并且图片的url还是对的,那么这个图片直接加载即可;当图片的tag和图片url不同时,说明这个图片是复用来的,所以就需要把原来的图片先设置为你的占位符,然后加载网络图片。
以上就是整个逻辑了,伪代码如下:

 if (TUtils.isEmpty(item.getHeadUrl())) {
            holder.mImgAvatar.setImageDrawable(ContextCompat.getDrawable(mContext, R.drawable.ic_placeholder_avatar));
        } else {
            String avatarTag = (String) holder.mImgAvatar.getTag();//如果tag为null则说明是全新的视图,否则是复用来的视图
            //如果有图片的TAG有并且和之前设置的一样,那么直接再次加载即可
            if (null == avatarTag || avatarTag.equals(item.getHeadUrl())) {
                Glide.with(holder.mImgAvatar)
                        .load(item.getHeadUrl())
                        .override(SizeUtils.dp2px(34))
                        .into(new SimpleTarget<Drawable>() {
                            @Override
                            public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                                holder.mImgAvatar.setImageDrawable(resource);
                            }
                        });
            }
            //如果和原来的tag不同,也就是url不同,那么就先清空原来的图片,然后加载新的图片
            else {
                holder.mImgAvatar.setImageDrawable(ContextCompat.getDrawable(mContext, R.drawable.ic_placeholder_avatar));
                Glide.with(holder.mImgAvatar)
                        .load(item.getHeadUrl())
                        .override(SizeUtils.dp2px(34))
                        .into(new SimpleTarget<Drawable>() {
                            @Override
                            public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                                holder.mImgAvatar.setImageDrawable(resource);
                            }
                        });
            }
        }
        holder.mImgAvatar.setTag(item.getHeadUrl());
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
RecyclerView图片错乱问题通常出现在滑动过程中,这是由于RecyclerView的回收复用机制导致的。 RecyclerView的回收复用机制可以提高列表的滑动效率,但在复用过程中有可能出现图片错乱问题。这是因为复用的View可能会带有之前加载的图片或者其他数据,而在新的位置显示时,没有及时更新内容。 解决RecyclerView图片错乱问题的方法有以下几种: 1. 使用ViewHolder设计模式:在ViewHolder中,通过getItemViewType()方法判断当前Item所属类型,然后根据不同的类型进行相应的数据加载和图片显示操作。这样可以确保复用的View正确显示对应位置的内容,避免图片错乱问题的发生。 2. 使用图片加载框架:如Glide或Picasso等,这些图片加载框架可以自动处理图片加载、缓存和显示等问题,避免出现图片错乱的情况。可以使用框架提供的方法,在加载图片前对ImageView进行重置,确保显示正确的图片。 3. 设置数据标记:在数据源中为每个Item设置唯一标识,可以使用position作为标识。在加载图片时,将标识与ImageView绑定,只有当标识匹配时才进行图片加载和显示操作。这样可以确保每个ImageView只显示对应标识的图片,避免图片错乱。 4. 及时取消加载:在RecyclerView滑动过程中,可以对滑动过程中无需显示的Item进行图片加载的取消操作,避免加载到错误的图片。可以通过监听滑动事件,在滑动停止时再进行图片加载。 通过以上方法可以有效地解决RecyclerView图片错乱问题,保证列表的显示正确性。在实际开发中,根据具体的情况选择合适的解决方案,并进行适当的优化,保证App的性能和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值