本文涉及的程式碼案例可以在下方的連結中找到，如果對你有幫助，請給個Star(#^.^#)

問題分析

        這段時間業務需求用到RecyclerView瀑布流載入並展示大批量圖片，但一開始單純使用RecyclerView直接載入圖片，使得顯示上出現了滑動到頂端時閃爍，Item自動切換位置（切換後資料與展示的畫面並不一致），頂端出現空白等等問題，體驗上十分差勁，於是開始了優化之旅。現在把優化過程和方法記錄下來，供有用者參考。

這是優化之前的展示畫面，可以看到存在諸多問題。

解決方案

①  在網上查閱資料時，有網友提供了一個解決方案

layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE)
 

這種方法確實可以解決滑動到頂端時Item左右切換的問題，但遠遠不夠。載入瀑布流時仍然存在列的跳動、閃爍、頂端有空白等問題，需要進一步優化。

②  為什麼會出現這種列跳動、item閃爍、空白的問題呢？經過分析，應該是由於我們載入的圖片高度不確定（寬度確定因為可以根據螢幕寬度和每行Item數目進行等分），而當我們向RecyclerView下方滑動一段距離後，由於ViewHolder的回收機制，item的尺寸並不確定，滑回到上方時Item需要重新自行繪製，於是這個又導致重繪，所以會有閃爍、跳動、空白等問題。說到底，只要我們在重繪前確定了Item的尺寸，那麼就可以避免Item去重新計算自己的尺寸，就可以避免重繪導致的諸多問題。

    這個時候有同學會說了，那我不讓RecyclerView回收不就完了，需要你搞這些七拐八彎的門道嗎？對於這些同學我只能說：OOM瞭解一下。

既然方案有了，接下來就是開幹。

我們從後臺請求到圖片後，先將其下載下來，再使用一個IntentService，根據Url獲取Bitmap（不要問我怎麼獲取Bitmap，Glide都不會用那你也不用看這篇文章了，也不要問我為什麼要用IntentService，後臺執行懂不懂，用完即棄懂不懂）。

首先成功從後臺拉取到圖片後，啟動IntentService，處理圖片

ImageService.startService(MainActivity.this, data, mSubtype);
 

處理過程：使用IntentService根據url獲取Bitmap，在子執行緒中處理圖片，用完後Service自行結束,再使用EventBus通知主執行緒說：老哥，我處理完了，你可以展示了。

public class ImageService extends IntentService {
    public DataService() {
        super("");
    }

    public static void startService(Context context, List<GirlItemData> datas, String subtype) {
        Intent intent = new Intent(context, ImageService.class);
        intent.putParcelableArrayListExtra("data", (ArrayList<? extends Parcelable>) datas);
        intent.putExtra("subtype", subtype);
        context.startService(intent);
    }

    @Override
    protected void onHandleIntent(Intent intent) {
        if (intent == null) {
            return;
        }

        List<GirlItemData> datas = intent.getParcelableArrayListExtra("data");
        String subtype = intent.getStringExtra("subtype");
        handleGirlItemData(datas, subtype);
    }

    private void handleGirlItemData(List<GirlItemData> datas, String subtype) {
        if (datas.size() == 0) {
            EventBus.getDefault().post("finish");
            return;
        }
        for (GirlItemData data : datas) {
            Bitmap bitmap = ImageLoader.load(this, data.getUrl());
            if (bitmap != null) {
                data.setWidth(bitmap.getWidth());
                data.setHeight(bitmap.getHeight());
            }

            data.setSubtype(subtype);
        }
        EventBus.getDefault().post(datas);
    }
}

處理完再在Adapter中載入：

public class GirlAdapter extends BaseQuickAdapter<GirlItemData, BaseViewHolder> {

    public GirlAdapter(){
        super(R.layout.item_girl_layout);
    }


    @Override
    protected void convert(BaseViewHolder helper, GirlItemData item) {
        ScaleImageView imageView = helper.getView(R.id.girl_item_iv);
        imageView.setInitSize(item.getWidth(), item.getHeight());
        ImageLoader.load(BaseApplication.getContext(),
                item.getUrl(), imageView);
    }

    public void deleteItem(int position){
        remove(position);
        notifyDataSetChanged();
    }
}

這個時候我們可以發現：瀑布流確實也不閃爍了，也不突然切換列了，空白現象好像也消失了。

但是還是有不對的地方：瀑布流載入的速度慢了許多。。。這個問題可能比較嚴重了，使用者開啟5s還看到的是一片空白，於是回到桌面把我們app卸了。。。

為什麼會出現這個問題呢？因為在優化以前，我們從後臺得到Json檔案（包括圖片id，url，owner等），瀑布流二話不說就開始載入了，Glide再根據url去下載圖片，下載完一張就在瀑布流中展示出一張，下載之前展示的是佔位圖。

而優化之後呢？比如我們一次性拉取到10張照片的json資料，我們需要完整下載10張圖片，處理完長寬資訊，才能展示出來，這個時間就久了。

所以，這個時候只能給後臺同學提需求了：下放的Json資料需要包含圖片的長寬資訊，這樣我們就不用在客戶端處理了。

所以，上方的程式碼，適用於後臺同學不給加需求的情況

③  最後，我們在測試中發現，在瀑布流中刪除某個Item之後，滑回到首頁仍然有小概率出現頂方存在空白的情況。對於這種問題，只需要給RecyclerView設定監聽，假如刪除過Item且滑回到首頁，就再重新整理一次Adapter。

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (isItemDeleted){
                    StaggeredGridLayoutManager layoutManager = (StaggeredGridLayoutManager) recyclerView.getLayoutManager();
                    int[] firstVisibleItem = null;
                    firstVisibleItem = layoutManager.findFirstVisibleItemPositions(firstVisibleItem);
                    if (firstVisibleItem != null && firstVisibleItem[0] == 0) {
                        if (mAdapter!=null) {
                            isItemDeleted = false;
                            mAdapter.notifyDataSetChanged();
                        }
                    }
                }
            }
        });

基本上以上三個解決方案可以應對瀑布流中Item錯亂的大多數情況了。

優化後的瀑布流還是很穩定的，看小姐姐很得勁：

想看更多好看的小姐姐可以前往下方連結下載本文原始碼，有幫助請給個Star(#^.^#)