🖥 原文转载自：

文章目录

1. 概述

对于使用ViewHolder引起的图片错乱问题，相信大部分人都有遇到过，我也一样，对于解决方法也有所了解，但一直都是知其然不知其所以然。

所以，这次直接把ViewHolder的工作原理，通过简单的demo代码来验证一次，验证后对于图片错乱和闪烁这种问题的成因就很清楚了。

在这里插入图片描述
这幅图就比较清晰的画出了ViewHolder的工作原理。

可以看到，图中左上角item1上面有一条蓝色的线，item7下面也有一条蓝色的线，这两条线就是屏幕的上下边缘，我们在屏幕中能看到的内容就是item1~item7。

当我们控制屏幕向下滚动时，屏幕上的变化是：

  • item1离开了屏幕，紧接着item8进入了屏幕，这是我们看到的。
  • 在item1离开，item8进入的过程中，还有一个我们看不到的过程。当item1离开屏幕时，它会进入Recycler(反复循环器)构件，然后被放到了item8的位置，成为了我们看到的item8。

2. 验证item的变化过程

下面是MainActivity的代码 ，初始化了100条数据

布局内容：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:layout_marginBottom="20dp"
        android:layout_gravity="center_horizontal"
        android:textSize="20dp"
        android:textStyle="bold"
        android:text="RecyclerView ViewHolder重用机制" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ced6e0"/>

</LinearLayout>

item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/round_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/frs_ad_img"
                android:layout_width="236dp"
                android:layout_height="420dp"
                android:alpha="0.5"
                android:src="@drawable/ic_launcher_background"
                android:layout_gravity="center_horizontal"
                android:scaleType="centerCrop" />

            <!--    广告标记    -->
            <LinearLayout
                android:id="@+id/fun_ad_lable_pb_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:layout_gravity="right|bottom"
                android:background="#000"
                android:gravity="center"
                android:orientation="horizontal">


                <TextView
                    android:id="@+id/fun_ad_lable_pb"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:includeFontPadding="false"
                    android:text="广告"
                    android:textColor="#FFF"
                    android:textSize="10.3dp" />
            </LinearLayout>
        </FrameLayout>

    </LinearLayout>

</LinearLayout>

初始化Adapter并设置到RecyclerView

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private List<String> mData;
    private RecyclerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = findViewById(R.id.recycler_view);
        initData();
        mAdapter = new RecyclerAdapter();
        mAdapter.setData(mData);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(layoutManager);
        mRecyclerView.setAdapter(mAdapter);
        mAdapter.setOnItemClickListener(new RecyclerAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(MainActivity.this, "Item被点击 " + position, Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void initData() {
        mData = new ArrayList<>();
        for (int i = 1; i <= 100; i++) {
            mData.add("Item Data 0" + i);
        }
    }
}

下面是Adapter部分，为了更方便验证，代码非常简单，ViewHolder里面只有一个TextView「实现了item的点击事件」

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    private List<String> mData = new ArrayList<>();

    private OnItemClickListener onItemClickListener;

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    @NonNull
    @Override
    public RecyclerAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view, null, false);
        return new ViewHolder(view);
    }


    /**
     * 填充onCreateViewHolder方法返回的holder中的控件
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(@NonNull RecyclerAdapter.ViewHolder holder, int position) {
        Log.d("TAG", "onBindViewHolder: 验证是否重用了");
        Log.d("TAG", "onBindViewHolder: 重用了" + holder.mTextView.getTag());
        Log.d("TAG", "onBindViewHolder: 放到了" + mData.get(position));
        holder.mTextView.setText(mData.get(position));
        holder.mTextView.setTag(mData.get(position));

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(onItemClickListener != null) {
                    onItemClickListener.onItemClick(position);
                }
            }
        });
    }

    /**
     * 重写onCreateViewHolder方法，返回一个自定义的ViewHolder
     *
     * @param holder
     */
    @Override
    public void onViewRecycled(@NonNull ViewHolder holder) {
        super.onViewRecycled(holder);
        Log.d("TAG", "onViewRecycled: " + holder.mTextView.getTag().toString() + ", position: " + holder.getAdapterPosition());
    }

    @Override
    public int getItemCount() {
        return mData == null ? 0 : mData.size();
    }

    public void setData(List<String> itemData) {
        if (itemData == null || itemData.size() == 0) {
            return;
        }
        mData.addAll(itemData);
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        TextView mTextView;

        public ViewHolder(View view) {
            super(view);
            mTextView = view.findViewById(R.id.item_text);
        }
    }

    public interface OnItemClickListener {
        void onItemClick(int position);
    }
}

简单了解上面代码的运行逻辑，并关注onCreateViewHolder()、onBindViewHolder()、**onViewRecycled()**三个方法打印的Log日志，下面通过打印的Log分析验证ViewHolder的创建、释放与复用。

当第一次打开应用加载RecyclerView时，可以观察到在屏幕中我们看到的每一个item都经过onCreateViewHolder()创建了一个ViewHolder对象，textView中的tag都为null。下图中红色框框中的Log可以验证。

在这里插入图片描述

这时候我们往下滚动RecyclerView，再看Log。可可以看到，位置0的数据 Item Data 00 和位置2的数据 Item Data 01所在的ViewHolder被释放，位置06和位置07的数据分别被加载，这个时候，由于onBindViewHolder()在为TextView设置数据前先打印了TextView里面的数据，恰恰就是刚才被回收掉的数据，所以可以验证新绑定的两个ViewHolder对象就是刚才被回收掉的两个ViewHolder。
在这里插入图片描述
同理，当我们把屏幕再次往上滚动时，在屏幕下面超出显示范围的item会被回收，并重用到上面的item中。

要注意的是：

每次会额外加载一条数据，如 Item Data 08，虽然屏幕只能显示6条数据，但是会多加载一条。所以只显示到Item Data 07，但是08也加载了，因为Item Data 02向上滑了一半，但是还并未完全消失，08就要显示出来，所以做预加载。


3. 异步网络导致ViewHolder出现图片错乱的原因

通过上面的内容解释，了解了ViewHolder的重用机制，接下来看一段会出现图片错乱的代码示例。

public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.MyViewHolder> {
    private static final String TAG = "MyRecyclerAdapter";

    private List<String> mData;
    private Context mContext;
    private LayoutInflater inflater;

    public MyRecyclerAdapter(Context context, List<String> data) {
        this.mContext = context;
        this.mData = data;
        inflater = LayoutInflater.from(mContext);
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }

    @Override
    public void onViewRecycled(MyViewHolder holder) {
        super.onViewRecycled(holder);
        Log.d(TAG, "onViewRecycled: "+holder.imageView.getTag().toString()+", position: "+holder.getAdapterPosition());
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        Log.d(TAG, "onBindViewHolder: 验证是否重用了");
        Log.d(TAG, "onBindViewHolder: 重用了"+holder.imageView.getTag());
        Log.d(TAG, "onBindViewHolder: 放到了"+mData.get(position));
        holder.imageView.setTag(mData.get(position));
        new AsyncTask<Void, Void, Bitmap>() {
            @Override
            protected Bitmap doInBackground(Void... params) {
                try {
                    URL url = new URL(mData.get(position));
                    Bitmap bitmap = BitmapFactory.decodeStream(url.openStream());
                    return bitmap;
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                return null;
            }

            @Override
            protected void onPostExecute(Bitmap bitmap) {
                super.onPostExecute(bitmap);
                holder.imageView.setImageBitmap(bitmap);
            }
        }.execute();
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        Log.d(TAG, "onCreateViewHolder");
        View view = inflater.inflate(R.layout.item_layout, parent, false);
        return new MyViewHolder(view);
    }

    static class MyViewHolder extends RecyclerView.ViewHolder {

        ImageView imageView;

        public MyViewHolder(View view) {
            super(view);
            imageView = (ImageView) view.findViewById(R.id.id_img);
        }

    }
}

这段代码相对于上一段只是把TextView改成了ImageView，并在onBindViewHolder()时异步加载一张网络图片，当加载完毕把图片放置到ImageView中显示。

在不了解ViewHolder重用机制之前，这段代码看似没有什么问题，但事实上这段代码由于ViewHolder重用机制的存在，并不能如期运行。

下面使用这段代码来分析一下场景。

3.1 场景分析

【场景A】

  1. 第一次运行，RecyclerView载入，不做任何触摸操作
  2. Adapter经过onCreateViewHolder()创建了上面我们能看到的8个ViewHolder对象，并且在onBind时启动了8条线程加载图片
  3. 8张图片全部加载完毕，并且显示到对应的ImageView上
  4. 控制屏幕向下滚动，第1、第2个item离开屏幕可视区域，第9、第10个item进入屏幕可视区域
  5. 第1、第2个item被回收，重用到第9、第10个item。第9、第10个item显示的图片是第1和第2个item的图片！！！
  6. 开启了两条线程，加载第9、第10张图片。等待几秒，第9、第10个item显示的图片突然变成了正确的图片！

以上过程是场景A，经过拆分细化，非常容易看出问题所在。如果当前网络速度很快，第6个步骤的加载速度在1秒甚至0.5秒内，就会造成人眼看到的图片闪烁问题出现，第9、第10个item的图片闪了一下变成了正确的图片。

【场景B】

  1. 第一次运行，RecyclerView载入
  2. Adapter经过onCreateViewHolder()创建了上面我们能看到的8个ViewHolder对象，并且在onBind时启动了8条线程加载图片
  3. 7张图片加载完毕，还有1张未加载完(已知图片一加载速度异常慢)
  4. 控制屏幕向下滚动，第1、第2个item离开屏幕可视区域，第9、第10个item进入屏幕可视区域
  5. 第1、第2个item被回收，重用到第9、第10个item。闪烁问题不再重复说，第9、第10张图片加载完毕(看上去一切正常)
  6. 等待几秒，第一张图片终于加载完成，第9个item突然从正确的图片九变成不正确的图片一 ！！！

以上过程是场景B，问题出现在加载第一张图片的线程T，持有了item1的ImageView对象引用，而这张图片加载速度非常慢，直到item1已经被重用到item9后，过了一段时间，线程T才把图片一加载出来，并设置到item1的ImageView上，然而线程T并不知道item1已经不存在且变成了item9，于是，图片发生错乱了。

【场景C】

  1. 第一次运行，RecyclerView载入
  2. Adapter经过onCreateViewHolder()创建了上面我们能看到的8个ViewHolder对象，并且在onBind时启动了8条线程加载图片
  3. 忽略图片加载情况，直接向下滚动，再向上滚动，再向下滚动，来回操作
  4. 由于离开了屏幕的item是随机被回收并重用的，所以向下滚动时我们假设item1、item3被回收重用到item9、item10，item2、item4被回收重用到item11、item12
  5. 向上滚动时，item9、item12被回收重用到item1、item2，item10、item11被回收重用到item3、item4
  6. 多次上下滚动后，停下，最后发现某一个item的图片在不停变化，最后还不一定是正确的图片

以上过程是场景C，问题出现在ViewHolder的回收重用顺序是随机的，回收时会从离开屏幕范围的item中随机回收，并分配给新的item，来回操作数次，就会造成有多条加载不同图片的线程，持有同一个item的ImageView对象，造成最后在同一个item上图片变来变去，错乱更加严重。


3.2 解决方法

解决方法其实有很多种，这里列出两种情况:

  1. 当item还在加载图片的过程中，被移出屏幕可视范围，不需要继续加载这张图片了，可以在onRecycled中取消图片的加载。这样就不会造成图片加载完成设置到其他item的ImageView中了。
  2. 每一个经过屏幕可视区域的item，加载的图片都要放进缓存中，即使item离开了可视区域，也要加载完毕并放入缓存中，方便下次浏览时能快速加载。每次onBind时对ImageView设置Tag标记，如果Tag标记已经被更改，旧线程加载好的图片不再设置到ImageView中。

当然以上两种情况都别忘了先设置图片占位符（设置默认视图），防止回收item的图片直接显示到新item中。

3.3 解决方式一

public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.MyViewHolder> {
    private static final String TAG = "MyRecyclerAdapter";

    private List<String> mData;
    private Context mContext;
    private LayoutInflater inflater;

    public MyRecyclerAdapter(Context context, List<String> data) {
        this.mContext = context;
        this.mData = data;
        inflater = LayoutInflater.from(mContext);
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }

    @Override
    public void onViewRecycled(MyViewHolder holder) {
        super.onViewRecycled(holder);
        AsyncTask asyncTask = (AsyncTask) holder.imageView.getTag(1);
        // 取消加载
        asyncTask.cancel(true);
    }
    
	@Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.item_layout, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        //先设置图片占位符
        holder.imageView.setImageDrawable(mContext.getDrawable(R.mipmap.ic_launcher));
        
        AsyncTask asyncTask = new AsyncTask<Void, Void, Bitmap>() {
            @Override
            protected Bitmap doInBackground(Void... params) {
                try {
                    URL url = new URL(mData.get(position));
                    Bitmap bitmap = BitmapFactory.decodeStream(url.openStream());
                    return bitmap;
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                return null;
            }

            @Override
            protected void onPostExecute(Bitmap bitmap) {
                super.onPostExecute(bitmap);
                holder.imageView.setImageBitmap(bitmap);
            }
        };
        holder.imageView.setTag(1,asyncTask);
        asyncTask.execute();
    }

    static class MyViewHolder extends RecyclerView.ViewHolder {

        ImageView imageView;

        public MyViewHolder(View view) {
            super(view);
            imageView = (ImageView) view.findViewById(R.id.id_img);
        }

    }
}

3.4 解决方式二

public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.MyViewHolder> {
    private static final String TAG = "MyRecyclerAdapter";

    private List<String> mData;
    private Context mContext;
    private LayoutInflater inflater;

    public MyRecyclerAdapter(Context context, List<String> data) {
        this.mContext = context;
        this.mData = data;
        inflater = LayoutInflater.from(mContext);
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }
    
	@Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = inflater.inflate(R.layout.item_layout, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        // 先设置图片占位符
        holder.imageView.setImageDrawable(mContext.getDrawable(R.mipmap.ic_launcher));
        
        final String url = mData.get(position);
        // 为imageView设置Tag,内容是该imageView等待加载的图片url
        holder.imageView.setTag(url);
        
        AsyncTask asyncTask = new AsyncTask<Void, Void, Bitmap>() {
            @Override
            protected Bitmap doInBackground(Void... params) {
                try {
                    URL url = new URL(mData.get(position));
                    Bitmap bitmap = BitmapFactory.decodeStream(url.openStream());
                    return bitmap;
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                return null;
            }

            @Override
            protected void onPostExecute(Bitmap bitmap) {
                super.onPostExecute(bitmap);
                // 加载完毕后判断该imageView等待的图片url是不是加载完毕的这张
                // 如果是则为imageView设置图片
                if(url.equals(holder.imageView.getTag())) {
                    holder.imageView.setImageBitmap(bitmap);
                } // 否则说明imageView已经被重用到其他item
            }
        }.execute();
    }

    static class MyViewHolder extends RecyclerView.ViewHolder {

        ImageView imageView;

        public MyViewHolder(View view) {
            super(view);
            imageView = (ImageView) view.findViewById(R.id.id_img);
        }

    }
}

上面的解决方式，是最简单的使用异步线程加载图片，对于加载图片有很多第三方库可以使用，如Picasso、Fresco、Glide等，我们也可以使用这些第三方库来加载图片，但使用第三方库加载的本质还是异步加载，所以如果处理不当也会出现图片闪烁等问题，大家可以使用上面的场景ABC等细化分解的步骤来分析错误，相信很容易就能找到问题。

3.5 注意内存泄漏的风险

对于上面的Demo代码，其实是存在内存泄漏风险的，如果需要使用建议把AsyncTask写成静态内部类，以及Adapter初始化时使用ApplicationContext作为参数传入，不要使用Activity作为Context参数。



4. RecyclerView网络图像刷新会闪烁

4.1 全局刷新

当你使用.notifyDataSetChanged()刷新列表时，会更新所有的数据。耗资源不说，关键是整个界面图像重新加载，给用户莫名其妙的感觉，影响体验和心情。

都知道RecyclerView的Item是可以复用，但是如何复用，可能就不大清楚了。每个Item被复用是随机的，它移出屏幕外被回收后，等待再次使用。全局刷新，会让回收的Item加载内容，没回收的可能内容被别的Item先加载了，只能回收后加载。一瞬间Item的位置全乱了，都得重新加载内容，尤其图像加载较慢，你就感觉整个世界胡乱地闪了一下。

知道原因，想解决就不难了。给每个Item一个固定的ID，刷新时与位置对应，别瞎跑就可以了。重写Adapter的getItemId(int position)方法，返回position作为ID，然后再设置Adapter的setHasStableIds(true)即可。


4.2 局部刷新

RecyclerView的Adapter新增了不少局部刷新的方法，具体如下：

  • notifyItemChanged(int position)，更新列表position位置上的数据时调用，伴有渐变动画效果
  • notifyItemInserted(int position)，列表position位置添加一条数据时调用，伴有动画效果
  • notifyItemRemoved(int position)，列表position位置移除一条数据时调用，伴有动画效果
  • notifyItemMoved(int fromPosition, int toPosition)，列表fromPosition位置的数据移到toPosition位置时调用，伴有动画效果
  • notifyItemRangeChanged(int positionStart, int itemCount)，列表从positionStart位置到itemCount数量的列表项进行数据刷新，伴有渐变动画效果
  • notifyItemRangeInserted(int positionStart, int itemCount)，列表从positionStart位置到itemCount数量的列表项批量添加数据时调用，伴有动画效果
  • notifyItemRangeRemoved(int positionStart, int itemCount)，列表从positionStart位置到itemCount数量的列表项批量删除数据时调用，伴有动画效果

使用局部刷新解决了Item错乱的问题，并且减少了额外的资源消耗，可是闪烁仍然存在。只不过导致的原因变了，是由于渐变动画效果增加了展示图像的时间。所以解决方法也很简单，就是取消或屏蔽过渡动画。提供两种常用的方法供大家参考：

// 第一种，直接取消动画
ItemAnimator animator = recyclerView.getItemAnimator();
if (animator instanceof SimpleItemAnimator) {
  ((SimpleItemAnimator) animator).setSupportsChangeAnimations(false);
}

// 老版本的支持库
recyclerView.getItemAnimator().setSupportsChangeAnimations(false);

// 第二种，设置动画时间为0
recyclerView.getItemAnimator().setSupportsChangeAnimations(false);

【相关问题文章参考】

# android
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区