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