使用vlayout轻松构建复杂布局页面&上拉加载

• 摘要：设计拿到了新项目的设计图,如图所示:乐烹APP-首页.png构建这个页面,如果没有滑动到底部加载更多功能,可以考虑用scollerview中一点点画布局。如果需要加载更多的话,就必须要考虑列表项的回收与复用的问题,scollerview显然不能满足,这时候我们就需要recyclerview来实现。传统的recyclerview实现复杂布局还是比较麻烦的,需要计算每个item的position,还要构建合适的数据源等等谁用谁知道。而阿里基于recyclerview打造的vlay
• 
  设计

  拿到了新项目的设计图,如图所示:

  
  
  
  乐烹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