對於使用ViewHolder引起的圖片錯亂問題，相信大部分人都有遇到過，我也一樣，對於解決方法也有所瞭解，但一直都是知其然不知其所以然。

所以，這次直接把ViewHolder的工作原理，通過簡單的demo程式碼來驗證一次，驗證後對於圖片錯亂和閃爍這種問題的成因就很清楚了。

下面先上一副圖

這幅圖就比較清晰的畫出了ViewHolder的工作原理。

可以看到，圖中左上角item1上面有一條藍色的線，item7下面也有一條藍色的線，這兩條線就是螢幕的上下邊緣，我們在螢幕中能看到的內容就是item1~item7。

當我們控制螢幕向下滾動時，螢幕上的變化是，item1離開了螢幕，緊接著item8進入了螢幕，這是我們看到的。在item1離開，item8進入的過程中，還有一個我們看不到的過程。當item1離開螢幕時，它會進入Recycler(反覆迴圈器)構件，然後被放到了item8的位置，成為了我們看到的item8。

通過程式碼來驗證這個變化過程

下面是MainActivity的程式碼 
初始化了12條資料( 這真的是正經資料 ╮(￣▽￣”)╭ ) 
初始化Adapter並設定到RecyclerView

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private List<String> mData;
    private MyRecyclerAdapter recycleAdapter;
    @Override
    protected
 
 void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.id_recyclerView);
        initData();
        recycleAdapter = new MyRecyclerAdapter(MainActivity.this, mData);
        // ...
 

        recyclerView.setAdapter(recycleAdapter);
        // ...
    }
    private void initData() {
        mData = new ArrayList<>();
        mData.add("HODV-21194"); //0
        mData.add("TEK-080"); //1
        mData.add("IPZ-777"); //2
        mData.add("MIMK-045"); //3
        mData.add("HODV-21193"); //4
        mData.add("MIDE-339"); //5
        mData.add("IPZ-780"); //6
        mData.add("VEC-205"); //7
        mData.add("VEMA-113"); //8
        mData.add("IPZ-776"); //9
        mData.add("MIAD-923"); //10
        mData.add("ARM-513"); //11
    }
}

下面是Adapter部分，為了更方便驗證，程式碼非常簡單，ViewHolder裡面只有一個TextView。

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.tv.getText().toString()+", position: "+holder.getAdapterPosition());
    }
    //填充onCreateViewHolder方法返回的holder中的控制元件
    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        Log.d(TAG, "onBindViewHolder: 驗證是否重用了");
        Log.d(TAG, "onBindViewHolder: 重用了"+holder.tv.getTag());
        Log.d(TAG, "onBindViewHolder: 放到了"+mData.get(position));
        holder.tv.setText(mData.get(position));
        holder.tv.setTag(mData.get(position));
    }
    //重寫onCreateViewHolder方法，返回一個自定義的ViewHolder
    @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 {
        TextView tv;
        public MyViewHolder(View view) {
            super(view);
            tv = (TextView) view.findViewById(R.id.id_num);
        }
    }
}

簡單瞭解上面程式碼的執行邏輯，並關注onCreateViewHolder()、onBindViewHolder()、onViewRecycled()三個方法列印的Log日誌，下面通過列印的Log分析驗證ViewHolder的建立、釋放與複用。

當第一次開啟應用載入RecyclerView時，可以觀察到在螢幕中我們看到的每一個item都經過onCreateViewHolder()建立了一個ViewHolder物件，textView中的tag都為null。下圖中紅色框框中的Log可以驗證。

這時候我們往下滾動RecyclerView，再看Log。可可以看到，位置0的資料HODV-21194和位置2的資料IPZ-777所在的ViewHolder被釋放，位置10和位置11的資料分別被載入，這個時候，由於onBindViewHolder()在為TextView設定資料前先列印了TextView裡面的資料，恰恰就是剛才被回收掉的資料，所以可以驗證新繫結的兩個ViewHolder物件就是剛才被回收掉的兩個ViewHolder。

同理，當我們把螢幕再次往上滾動時，在螢幕下面超出顯示範圍的item會被回收，並重用到上面的item中。下圖Log可以看出，位置11和位置9的資料被回收並重用。

查詢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);
        }
    }
}

這段程式碼相對於上一段Adapter的程式碼改動也比較少，只是把TextView改成了ImageView，並在onBindViewHolder()時非同步載入一張網路圖片，當載入完畢把圖片放置到ImageView中顯示。

在不瞭解ViewHolder重用機制之前，這段程式碼看似沒有什麼問題，但事實上這段程式碼由於ViewHolder重用機制的存在，並不能如期執行。

下面使用這段程式碼來分析一下場景。

場景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上圖片變來變去，錯亂更加嚴重。

解決方法:

解決方法其實有很多種，這裡列出兩種情況:

1. 當item還在載入圖片的過程中，被移出螢幕可視範圍，不需要繼續載入這張圖片了，可以在onRecycled中取消圖片的載入。這樣就不會造成圖片載入完成設定到其他item的ImageView中了。
2. 每一個經過螢幕可視區域的item，載入的圖片都要放進快取中，即使item離開了可視區域，也要載入完畢並放入快取中，方便下次瀏覽時能快速載入。每次onBind時對ImageView設定Tag標記，如果Tag標記已經被更改，舊執行緒載入好的圖片不再設定到ImageView中。

當然以上兩種情況都別忘了先設定圖片佔位符，防止回收item的圖片直接顯示到新item中。

解決方式1 demo程式碼:

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();
        asyncTask.cancel(true);
    }
    @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();
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        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);
        }
    }
}

解決方式2 demo程式碼:

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);
    }
    @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設定圖片,否則說明imageView已經被重用到其他item
                if(url.equals(holder.imageView.getTag())) {
                    holder.imageView.setImageBitmap(bitmap);
                }
            }
        }.execute();
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        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);
        }
    }
}

上面的解決方式，是最簡單的使用非同步執行緒載入圖片，對於載入圖片有很多第三方庫可以使用，如Picasso、Fresco、Glide等，我們也可以使用這些第三方庫來載入圖片，但使用第三方庫載入的本質還是非同步載入，所以如果處理不當也會出現圖片閃爍等問題，大家可以使用上面的場景ABC等細化分解的步驟來分析錯誤，相信很容易就能找到問題。

注意記憶體洩漏的風險

對於上面的Demo程式碼，其實是存在記憶體洩漏風險的，如果需要使用建議把AsyncTask寫成靜態內部類，以及Adapter初始化時使用ApplicationContext作為引數傳入，不要使用Activity作為Context引數。