設計

拿到了新專案的設計圖，如圖所示：

樂烹APP-首頁.png

構建這個頁面，如果沒有滑動到底部載入更多功能，可以考慮用scollerview中一點點畫布局。如果需要載入 更多的話，就必須要考慮列表項的回收與複用的問題，scollerview顯然不能滿足，這時候我們就需要recyclerview來實現。傳統的recyclerview實現複雜佈局還是比較麻煩的，需要計算每個item的position，還要構建合適的資料來源等等誰用誰知道。 而阿里基於recyclerview 打造的vlayout完美的解決了我們的麻煩，幫助我們傻瓜式構建多條目的複雜佈局頁面，同時還減少了佈局層次，提高了效能和滑動的流暢度。

分析

關於vlayout的使用，大家可以直接參看官方的demo，還有這篇使用攻略，應該就可以掌握了。下面僅就這個設計圖實戰分析一下：

上.png

下.png

區域1：搜尋欄 ，固定在頁面上方，不隨頁面滾動，使用StickyLayoutHelper構建。 區域2，區域7： 網格佈局 ，使用GridLayoutHelper構建。 區域3， 區域6，區域8 ：標題欄，使用SingleLayoutHelper 構建，並且由於佈局一致，相同的佈局邏輯可以提出來放在一個adapter中，只需向adapter裡提供具體文字及圖片。 區域4， 區域5，區域9 ：同樣也是SingleLayoutHelper 構建；區域9內嵌套了一個橫向的recyclerview 用於橫向滾動 區域11：線性列表 ，使用LinearLayoutHelper即可。

上拉載入

vlayout並未提供上拉載入功能。看到GitHub也有人提到這個問題。其實實現方式很簡單：首先在最底部使用通過SingleLayoutHelper 構建一個footer佈局，然後recyclerview的addOnScrollListener方法監聽滾動事件，判斷滾動到底部，如果有更多資料，更新列表的介面卡載入更多資料。如果沒有更多資料，則更新footer的介面卡，顯示無更多資料。程式碼如下：

RecyclerView.OnScrollListener onScrollListener = new RecyclerView.OnScrollListener() {

            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            }

            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                if(hasmore) {
                    VirtualLayoutManager lm = (VirtualLayoutManager)recyclerView.getLayoutManager();
                    int last=0, total=0;
                    last = lm.findLastVisibleItemPosition();
                    total = recyclerView.getAdapter().getItemCount();
                    if(last > 0 && last >= total  -1) {
                        hasmore=false;
                     //模擬載入資料
                        handler.postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                if(page<2) {
                                    for (int i = 0; i < 10; i++) {
                                        list.add("123");
                                    }
                                    adapter_linear.notifyDataSetChanged(); //更新列表介面卡
                                    page++;
                                    hasmore = true;
                                }else{
                                    hasmore = false;
                                    adapter_footer.notifyDataSetChanged(); //更新footer介面卡
                                }
                            }
                        },2000);

                    }
                }
            }
        };
        recyclerView.addOnScrollListener(onScrollListener);
 

實現效果

gif有卡頓，實際效果流暢。

ezgif.com-resize.gif

完整demo程式碼

作者：chiyidun 連結：https://www.jianshu.com/p/a53946ad719d 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。