iOS ScrollView嵌套tableView联动滚动的思路与最佳实践

所属分类: 软件编程 / IOS 阅读数: 847
收藏 0 赞 0 分享

前言

随着业务的发展,页面的复杂度越来越高,嵌套滚动视图的方式也越来越受设计师们的青睐,在各大电商App十分常见。如下Demo图:

但是这样的交互官方并不推荐,而且对开发来说确是不那么友好,需要处理滚动手势的冲突,页面的多层级嵌套都给开发带来了一定程度的麻烦。接下里我聊聊我们的实现思路。

思路和过程

对应这种页面结构应该毫无疑问是最底层是一个纵向滚动的scrollView,它的页面上面放一个固定高度的header,紧接着下面一个支持横向滚动切换的容器scrollView,容器上面才是各个页面具体的tableView,如下图:

思路一

最先想到的是,既然是滚动视图那么我们是否可以通过滚动视图的可滚动属性来做呢,在初始时把最上层具体业务的tableView禁止滚动,那么根据事件响应链,滚动事件事件会由底层的ScrollView接收并处理,在到达最大偏移量之后,禁用底层的ScrollView滚动,同时开启上层的tableView,使得上层可以滑动,想起来是有一定可行性的,可惜,事实现实是残酷的,效果如下:

这样会导致当偏移量到达临界值时,由于设置了scrollEnable属性和最大偏移量,此次滚动手势会被截断,需要再次拖拽才能继续滚动,显然,这样的效果是无法接受的。

思路二

这是同事提供的思路,在做这个时和同事有过讨论,他们之前有这样的交互页面,使用的是自定义手势,但由于UIScrollView是有弹性效果的,一般的滑动手势做不到这一点的,所以需要引入UIDynamic模拟力场,实现阻尼效果。想了一下,虽然有一定的可行性,但是为了一个联动滑动,要做这么多的事情,感觉比较繁琐,而且自定义手势做的模拟弹性效果可能和原生ScrollView的效果还是有一定的差距,所以选择放弃。

思路三

回到我们思路一,除了边界位置会阻断联动滚动外,其他效果还是可以的,那么能不能通过手段解决这个问题呢?既然能写到了这里,那么毫无疑问,肯定是可以的。通过手势穿透,即让一个滑动手势既作用于底层的ScrollView又能作用于上层的业务tableView,同时控制他们的滚动即可达成目的。通过让底层的scrollView实现一个手势识别的协议,同时响应滚动事件:

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
 return true
 }

根据官方文档描述:

Asks the delegate if two gesture recognizers should be allowed to recognize gestures simultaneously.

表达的意思是询问委托是否允许两个手势识别器同时识别手势,那么我们实现这个协议,”穿透“手势,分别在底层容器和上层业务中实现滚动视图的代理方法func scrollViewDidScroll(_ scrollView: UIScrollView),分别控制他们的可滚动状态和偏移量则能实现目的。部分实现如下:

底层容器ScrollView:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
  headerView.isHidden = scrollView.contentOffset.y >= maxOffset ? true : false
  if !superCanScroll {
   scrollView.contentOffset.y = maxOffset
   currentVC.childCanScroll = true
  } else {
   if scrollView.contentOffset.y >= maxOffset {
    scrollView.contentOffset.y = maxOffset
    superCanScroll = false
    currentVC.childCanScroll = true
   }
  }
 }

上层业务tableView:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
  if !childCanScroll {
   scrollView.contentOffset.y = 0
  } else {
   if scrollView.contentOffset.y <= 0 {
    childCanScroll = false
    superCanScrollBlock?(true)
   }
  }
 }

通过底层ScrollView是否达到最大偏移量控制header的显示隐藏和对应的偏移量及可滚动状态,在业务tableView使用回调将ScrollView的可滚动状态回调达到状态同步。总体来说还是比较清晰,更多细节请看QFMultipleScrollView

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

更多精彩内容其他人还在看

iOS实现简易抽屉效果、双边抽屉效果

这篇文章主要为大家详细介绍了两款iOS抽屉效果,简易抽屉效果、以及双边抽屉效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS实现左右拖动抽屉效果

这篇文章主要介绍了iOS实现左右拖动抽屉效果,理解ios平台类似于QQ主页面,利用触摸事件滑动touchesMoved实现的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

IOS实现点击滑动抽屉效果

这篇文章主要为大家详细介绍了IOS实现点击滑动抽屉效果的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS应用中发送HTTP的get请求以及HTTP异步请求的方法

这篇文章主要介绍了iOS应用中发送HTTP的get请求以及HTTP异步请求的方法,代码为传统的Objective-C语言,说明都简单地融入于注释之中,需要的朋友可以参考下
收藏 0 赞 0 分享

总结iOS App开发中控制屏幕旋转的几种方式

这篇文章主要介绍了iOS app开发中控制屏幕旋转的方法总结,分为自动旋转和手动旋转以及强制旋转三种情况,代码为Objective-C语言,需要的朋友可以参考下
收藏 0 赞 0 分享

IOS设计模式之组合设计模式

组合模式,Composite Pattern,是一个非常巧妙的模式。几乎所有的面向对象系统都应用到了组合模式,接下来通过本文给大家介绍IOS设计模式之组合设计模式,需要的朋友参考下
收藏 0 赞 0 分享

浅析Objective-C中分类Category的使用

这篇文章主要介绍了浅析Objective-C中分类Category的使用,使用Category对类进行扩展可以访问原始类的实例变量,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS实现代码只执行一次

本文给大家分享的是在iOS中控制代码在整个软件生命周期中只运行一次的代码,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

iOS App中调用相册中图片及获取最近的一张图片的方法

这篇文章主要介绍了iOS App中调用相册中图片及获取最近的一张图片的方法,示例代码为传统的Objective-C语言,需要的朋友可以参考下
收藏 0 赞 0 分享

写给iOS程序员的命令行使用秘籍

写给iOS程序员的命令行使用秘籍,多事情在命令行下处理会事半功倍,所以我就iOS程序员可能会用到的功能讲述一下,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多