Android瀑布流優化，解決Recyclerview展示大批量圖片時Item自動切換、閃爍、空白等問題

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

https://github.com/CodeTillDoom/StaggeredRcl

問題分析

        這段時間業務需求用到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(#^.^#)

https://github.com/CodeTillDoom/StaggeredRcl