android vlayout 刷新,使用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代码