UIScrollView嵌套的完美解决方案
UIScrollView嵌套的完美解决方案
做iOS开发，不可避免的会遇到UIScrollView的嵌套问题，之前也曾遇到过，吭哧吭哧做完了，效果不理想，和产品大战好几回合，就那样了。不可避免的，又一次遇到了这个问题，就和同事一起研究了一下，彻底解决了这个问题。写了一个demo，以后再遇到就直接用了。今天主要是总结一下实现难点。免得自己过段时间又忘了，也给有同样困扰的你一个思路。
需求
如图：
要求：上滑的时候先滑headerView，headerView滑出屏幕时，tableView吸顶且开始滑动。下滑时先滑tableView，滑到顶部第一个cell出现，则开始滑headerView。 这是一个最简单的scrollView嵌套需求，后面还会有进阶的需求。
具体方案
其实嵌套最大的问题就是手势冲突问题，上层的ScrollView会拦截手势，导致手指在上层ScrollView滑动的时候，下层ScrollView不动。所以我们首先要让手势冲突时，两个手势都去响应。这样，我们滑动的时候，两个scrollView都会滑动。
第一步 上层scrollView不拦截手势
extension TopScrollView: UIGestureRecognizerDelegate {
//手势冲突的时候同时响应
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
}第二步 创建上下文对象
上下两层scrollView滑动时候都需要对方的offset来计算，所以我们创建一个上下文对象，让两个scrollView都持有，避免了频繁正反向传值的问题。
class SyncScrollContext {
var maxOffsetY: CGFloat = 0 //上层最大的滑动距离
var outerOffset: CGPoint = CGPoint.zero //上层offset
var innerOffset: CGPoint = CGPoint.zero //下层offset
}第三步 滑动的时候计算滑动优先级
下层scrollView的contentOffset变化时计算： ~~~ class BottomScrollView: UIScrollView {
class BottomScrollView: UIScrollView {
var syncScrollContext: SyncScrollContext?
override var contentOffset: CGPoint {
didSet {
if contentOffset.y != oldValue.y {
//下层scrollView滑动
if syncScrollContext.innerOffset.y > 0 {
// 上层的scrollView滑动，则下层的scrollView保持最大滑动距离
contentOffset.y = syncScrollContext.maxOffsetY
} else {
//否则，上层不动，下层滑动
}
//同步offset到上下文
syncScrollContext.outerOffset = contentOffset
}
}
}
}上层的scrollView的contentOffset变化时计算：
class TopScrollView: UITableView {
var syncScrollContext: SyncScrollContext?
override var contentOffset: CGPoint {
didSet {
if contentOffset.y != oldValue.y {
//上层滑动
guard let syncScrollContext = syncScrollContext else { return }
if syncScrollContext.outerOffset.y < syncScrollContext.maxOffsetY {
//下层的offset < 下层可滑动最大值，说明下层还需要滑动，上层不动offset为0
contentOffset.y = 0
}
//不管怎么样，滑动即同步offset到上下文
syncScrollContext.innerOffset = contentOffset
}
}
}
}第四步 两个ScrollView嵌套，并正确设置下层scrollView的contentSize
在下层BottomScrollView里面，添加topScrollView并设置contentSize。下层scrollView的contentSize的高 = headerView.height + topScrollView.height。这样，当下层scrollView滑了y（y = headerView的高度）的时候，下层scrollView滑到底了，这时候c下层scrollView无法滑动，也就不存在手势冲突，上层scrollView自动开始响应，流畅的滑动起来了
topScrollView.frame = CGRect(x: 0, y: offsetY, width: bounds.width, height: bounds.height)
contentSize = CGSize(width: bounds.width, height: topScrollView.frame.maxY)到这里，就已经大功告成了！demo下载：https://github.com/wangdachui/ScrollViewNested
进阶的需求
上下滑的同时，还要求左右滑:
具体就不多讲了，有兴趣看源码。 demo下载：https://github.com/wangdachui/TabScrollView
腾讯云开发者
