使用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
