Skip to content

BlueMatthew/PagingSubList

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

列表中内嵌多个子列表的横向分页滚动

一个列表在展示一些内容之后,出现多个类目的分支控制,即子列表,子列表跟随类目的选择而切换,是APP常见的场景。而在子列表上通过左右滑动进行类目的切换,也是一种流行的做法,左右滑动切换子列表的需求给实现带了来了额外的难题。

DemoGIF

网络上比较多的解法是父列表中嵌套一个PageScrollView,在这个PageScrollView中放入多个子列表,通过PageScrollView的分页能力实现左右滑动。这种方案需要解决内外两个列表的滑动的连贯性问题,即嵌套ScrollView的手势传递(一般来说,列表也是一种ScrollView)。实践下来,一方面,滑动手势传递在某些特定场景下还存在着一些问题,无法做到尽善尽美;另一方面,处理手势传递的实现需要和ScrollView的多个回调都产生关联,代码非常琐碎离散,耦合度很高,不能很好的封装和复用;最后,这种方案需要多个ScrollView或者列表,开销相对较大。

仔细分析这个场景和需求本身,父列表和当前子列表的浏览是用户行为的主体,而左右滑动切换子列表只是一个辅助行为,发生频率也应该偏低 那为实现辅助功能花费太多的实现代价 和运行时成本 并引入了更多不稳定因素 是不合理的 有无更合理的解决办法?另外 既然主体行为是在列表中浏览 思路转到是不是继仍然使用一个列表展示原父列表和当前子列表的内容 确保主体行为的流畅性 通过辅助手段解决辅助功能?

基于这个思路和原有uiscrollview嵌套的方案作了个调整,把支持左右滑动的ScrollView移到最底层,内嵌一个列表来展示原有父列表和当前页面的内容(后面称这个列表为主列表)。当出现左右滑动的手势的时候,把原子列表的内容视图跟随手势进行位置偏移,创建辅助的列表展示其它分页内容,并加入底层的ScrollView跟随手势滑入滑出,形成页面滑动的效果。当左右滑动手势结束并确定切换到新的分页时,复原内容偏移并更新主列表的数据源,使其展示新分页的内容,更新数据源并刷新之后,移除辅助分页的列表。这个方案需要解决几个问题:

  1. 响应左右滑动的ScrollView由于在下层,滑动手势需要从上方列表透传下来;然后可响应左右滑动的区域需要局限在原子列表区域,通过手势响应的时候过滤位置可以解决。
  2. 当主列表切换到新分页数据源并移除辅助列表的时候,虽然相同位置展示相同的内容,但仍可能出现闪烁的情况。实践过程当中,特别是后面提到迁移到Android平台的时候,发现主要是图片加载更可能引起闪烁问题。通过图片缓存,或者场景复原等手段,能避免大多数图文列表的闪烁问题。更复杂的元素,如动画、视频,则需要针对性处理。
  3. 列表内部分内容视图做偏移的实现在不同的平台有不同的实现,iOS下面通过列表的Layout来实现,Android则直接对SubView做偏移。 这个方案相比起来,左右滑动的实现集中在底层的ScrollView中,承载具体业务的列表只需要实现一些支持信息的提供,不过这种外层ScrollView套内层列表的方式还是存在结构不够清晰明了的问题。另外,如果需要有分页和无分页的随意切换,外部的ScrollView也比较不容易简单的卸载。

在把这个方案迁移往Android平台的时候 发现RecyclerView自身提供了swipe手势的支持(ItemTouchHelper),不需要通过ScrollView来支持左右滑动。成功改造成swipe手势来实现之后,又把这个思路搬回iOS,通过在列表中增加一个pan手势,也同样实现了左右滑动的能力.iOS下ScrollView对于分页有一些特殊支持,譬如通过滑动的距离来判断是否可以完成页面切换,手势停止之后的减速动画,这些都需要自行实现,算是本方案的难点,不过网上有相关的文档可以参考解决。

至此,这个方案相对比较完美,结构和二次开发需要完成的接口也比较清晰。

后续,为了解决不同分页切换存在的隐患,在考虑通过Layout来实现多个分页的方案,还在iOS下进行实验。

参考: Sticky Headers for UICollectionView using UICollectionViewFlowLayout

说明:

  1. 假设列表是纵向滚动 子列表切换是横向变换 (反之处理原理是一样的)
  2. iOS平台系统也提供了SwipeGesture,网评不如直接使用PanGesture好,未深究过。