SlideLayout 双列表页面实现

即刻 5.3 版本的时候，随着圈子详情页的内容越来越丰富，之前的页面结构已经不能满足我们的需求，需要一个新的布局方案承载各种圈子元素并满足我们的自定义交互。

改版前

 

 

改版前的结构比较简单，头部显示圈子的基本信息比如图片、标题和简介等信息，底部展示圈子内的消息列表，向上滑动可折叠头部区域让用户更加专注地浏览消息列表，结构如下：

• CoordinatorLayout
  • AppBarLayout
  • ViewPager
    • Fragment
      • RecyclerView
    • Fragment
      • RecyclerView

CoordinatorLayout 作为容器负责两部分的布局和联动滑动，AppBarLayout 负责展示头部信息，底部通过 ViewPager 和 Fragment 实现多 tab 页面，Fragment 内部通过 RecyclerView 实现消息列表。

改版后

 

改版后头部新增了一些元素比如插件、创建者，原有的元素展示区域扩大，导致头部高度增大。使得用户刚进入圈子页时几乎看不到消息列表区域，为了解决这个问题我们需要页面支持快速地在头部和列表之间切换，并且当头部超过一屏时也可以滑动。简单总结下我们的需求：

1. 当头部信息较少，即没有达到一屏时表现和原有实现一致，头部随列表滑动可以折叠。
2. 当头部信息较多，即超过一屏时除了头部随着列表滑动折叠外，还可以在头部和列表之间快速切换。

解决方案

第一条需求原有的 CoordinatorLayout 就可以支持，问题是第二条中的快速切换如何实现，最终我们的产品同事给出的解决方案如下：