說起來也是一個很久之前的問題了。那個時候還是在 17 年吧弥雹，六月份就要畢業(yè)转捕，在做面試的項目房揭，其中有一個功能用到了瀑布流來顯示妹子圖。那時候就遇到了一些問題，但是那時候確實什么都不懂矾瑰，搞了很久，有些問題還是沒有解決受扳。這個月到了月底咏闪，臨近放假了，也沒有什么事情赴涵，就開始倒騰以前的項目媒怯，發(fā)現(xiàn)了這個問題。其中也是花了一點時間髓窜，踩了一些坑扇苞。在此記錄一下欺殿。
主要的思路
主要的思路就是通過 RecyclerView 來做，通過設置 StaggeredGridLayoutManager 為 layoutManager 來實現(xiàn)瀑布流的效果鳖敷。
遇到的問題
問題就是脖苏，列表圖片加載的時候會閃爍，跳動定踱，換位這幾個問題棍潘。滑動之后也同樣會出現(xiàn)這幾個問題崖媚。那時候確實什么都不懂亦歉，就上網(wǎng)查，把各種方法都試一遍畅哑，還是不行肴楷。也分析不出問題，或者說還沒有分析這個問題的能力荠呐。
其中踩到的坑
瀑布流的問題赛蔫，在網(wǎng)上還是挺多資料的。
說的最多的就是 layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); 這個方法泥张，之前也不懂呵恢，反正大家都說這個可以解決（當然也有很多人說這個沒什么作用），現(xiàn)在翻了一下源碼的注釋媚创，大概了解了渗钉，就是因為瀑布流布局的特殊性，可能會有一些間隙筝野，可以通過這個 api 設置 item 間隔的處理方式晌姚，有兩個參數(shù)可以選擇 GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS 和 GAP_HANDLING_NONE。
GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS：當滑動空閑時歇竟，也就是 SCROLL_STATE_IDLE 這個狀態(tài)下時挥唠，會去檢查 item 之間有沒有間隙，如果有就調整 item 的位置焕议，并使用動畫的過度效果宝磨。
GAP_HANDLING_NONE：不去處理這個間隙。
設置了這個 layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); 之后盅安，確實不會跳動了唤锉，但是帶來了另一個問題，就是既然不調整 item 的位置去填補這個空隙别瞭，就會有空隙窿祥，而這個空隙有多大呢？看圖：
沒錯蝙寨，看到的就是這個樣子晒衩，整個布局就亂七八糟的了嗤瞎。
網(wǎng)上的大神很多，此記不成听系，再生一記贝奇！
layoutManager.invalidateSpanAssignments()：StaggeredGridLayoutManager 是會保持 item 和 span（其實我不是很理解這個東西要怎么理解） 的映射，如果要刷新這個映射就可以調用這個方法靠胜。
這個方法在什么時候調用呢掉瞳？在滑動的時候。
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
//刷新
layoutManager.invalidateSpanAssignments();
}
});
但是單純調這個方法浪漠，沒什么卵用陕习，而且布局會變得更亂，所以這個方法是在 上面layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE)的基礎上郑藏，在使用這個東西衡查。
雖然瘩欺，跳動的情況好了一些必盖，還是不理想，而且還會出現(xiàn)另一個問題俱饿，就是滑動到頂部會發(fā)現(xiàn)歌粥，頂部的 item 會有偏移的情況，然后拉到頂拍埠，就會刷新一下失驶，調換位置了。枣购。嬉探。。棉圈。
問題的根源
其實問題的根源就是圖片的高度不固定涩堤，這不廢話嘛，瀑布流的高度本來就不是固定的分瘾。胎围。。
或者換種說法德召，你聽起來或者就更明白一些了白魂。就是圖片的高度在 item 填充到 RecyclerView 的時候高度還是不確定，或者說是 0 上岗。然后圖片加載完成后福荸，高度就出現(xiàn)了，就出現(xiàn)了各種問題肴掷。
是的敬锐，只要我們解決了這個高度的問題辞嗡，其他問題就沒有了。就不需要設置前面說到的兩個設置滞造。
這個高度要怎么確定呢续室？肯定不能寫死，要根據(jù)圖片的比例來谒养，因為圖片的寬度是確定的挺狰，我們只要根據(jù)圖片的比例進行縮放就可以了。
具體的步驟是獲取到圖片买窟，然后根據(jù)測量出寬高比丰泊，再根據(jù) item 的寬度，設置 item 的高度始绍。這就行了呀瞳购！
說是很簡單啦。我之前也就想到過這個問題亏推，然后就在 Glide 里面進行攔截学赛，然后設置寬高，發(fā)現(xiàn)問題沒有解決吞杭，就沒有去細想了盏浇。其實那時候的思路大致是對的，但是那個攔截其實異步的芽狗，并沒有同步執(zhí)行绢掰，也就是說，在 Adapter 里面返回 view 的時候高度還是沒有確定童擎。所以這個問題也沒有得到解決滴劲。
解決方案
再說一下網(wǎng)絡上的解決方案是什么。
有一篇文章是這么說的顾复，其實都大致類似班挖。網(wǎng)絡上的東西，你抄我的捕透，我抄你的聪姿。獲取到圖片列表后，然后啟動一個 IntentService 來下載這一頁的圖片乙嘀，等下載完成后測量出寬高比末购，再通過 EventBus 發(fā)消息給 RecyclerView 添加數(shù)據(jù)，然后 Adapter 再進行刷新虎谢。
文章里面也說了盟榴，這樣有個很大的問題就是加載出圖片的時候巨慢，因為要等這頁的圖片下載完成和測量完成婴噩，然后才進行的渲染擎场，所以速度很感人羽德。
最終的結果就是讓后臺把圖片的寬高傳過來，然后獲取到這頁數(shù)據(jù)的時候迅办，順便把寬高給設置進去宅静。
這幾乎是網(wǎng)上所有的解決方案中最終的結果（我看到的都是這樣）。
但是我調用的這個是第三方開放的 API 接口站欺，我找誰給我加數(shù)據(jù)姨夹。。矾策。磷账。
我想了一下，能不能加載一張贾虽，然后顯示一張呢逃糟？
可以的！
我要開始干了蓬豁！ 思路是這樣的绰咽，我也不用 IntentService (好像網(wǎng)上還有人以為懂個 IntenService ，就洋洋得意庆尘。剃诅。)巷送，也不用 EventBus 驶忌， 用 RxJava 直接懟，因為前面這兩個東西就是 異步 和 事件 嘛笑跛，這兩個東西付魔，RxJava 都有啊。搞什么花里胡哨的飞蹂。
首先通過 Retrofit 發(fā)送請求几苍，獲取 Observer ，然后進行轉化 map 獲取到這一頁的圖片信息陈哑，再使用 flatMap 進行轉化妻坝，把這個 list 的數(shù)據(jù)逐個發(fā)送，然后再進行下載圖片惊窖，保存圖片刽宪，獲取寬高等操作，最后在 onNext 中獲取一條數(shù)據(jù)就刷新這個 item (要注意不要刷新整個列表界酒，其實前面說的會閃的問題圣拄，是因為刷新的時候，對整個列表都進行了刷新導致的)毁欣。圖片就會一個個加載出來了庇谆。不用等所有的操作都執(zhí)行完再渲染岳掐。代碼如下：
ApiRequest.getServer().getFuliData(num, page)
// 切換線程
.compose(ApiRequest.<BaseGankBean<FuliBean>>preRequest())
.map(new Function<BaseGankBean<FuliBean>, List<FuliBean>>() {
@Override
public List<FuliBean> apply(BaseGankBean<FuliBean> fuliBeanBaseGankBean) throws Exception {
return fuliBeanBaseGankBean.getResults();
}
})
.flatMap(new Function<List<FuliBean>, ObservableSource<FuliBean>>() {
@Override
public ObservableSource<FuliBean> apply(List<FuliBean> fuliBeans) throws Exception {
return Observable.fromIterable(fuliBeans);
}
})
// 切換線程
.observeOn(Schedulers.io())
.map(new Function<FuliBean, FuliBean>() {
@Override
public FuliBean apply(FuliBean fuliBean) throws Exception {
String url = fuliBean.getUrl();
if (url!=null) {
try {
// 同步下載圖片，可設置獲取到的 bitmap 大小饭耳，但是實際下載的還是原圖
Bitmap bitmap = Glide.with(getActivity())
.asBitmap()
.load(url)
.into(400, 400)
.get();
// 保存圖片串述，作為緩存
ImgLoadUtil.wirteBitmap2File(bitmap, Const.FilePath.imgCache,fuliBean.get_id()+".png");
// 獲取寬高
int height = bitmap.getHeight();
int width = bitmap.getWidth();
fuliBean.setHeight(height);
fuliBean.setWidth(width);
} catch (InterruptedException e) {
e.printStackTrace();
} catch (ExecutionException e) {
e.printStackTrace();
}
}
return fuliBean;
}
})
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Observer<FuliBean>() {
@Override
public void onSubscribe(Disposable d) {
}
@Override
public void onNext(FuliBean fuliBean) {
// 一個圖片加載完成就渲染這個圖片
dataList.add(fuliBean);
int index = dataList.indexOf(fuliBean);
adapter.notifyItemChanged(index);
}
@Override
public void onError(Throwable e) {
e.printStackTrace();
}
@Override
public void onComplete() {
//加載完成，頁碼加一
page++;
}
});
看完有沒有一種暢快淋漓的感覺寞肖。越發(fā)覺得 RxJava 還是很好用的剖煌。然后 Adapter 也沒什么好說的，獲取到寬高比逝淹，計算一下寬高耕姊，該怎么搞就怎么搞。
貼一下效果圖：
