使用vlayout輕鬆構建複雜佈局頁面&上拉載入
拿到了新專案的設計圖,如圖所示:
樂烹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程式碼
https://github.com/yanyiqun001/vlayoutdemo