多层UIScrollView 嵌套滚动

前题

本文主要的是建立在对多层 UIScrollView 嵌套滚动解决方案的学习，以及对SegementSlide实践的探索。

主题

实现多层UIScrollView 嵌套滚动，这里的多层其实就是2层，超过2层的UIScrollView 嵌套滚动是很复杂的。

常见的解决方案

1、控制isScrollEnabled属性

通过scrollView.contentOffset.y与临界值进行对比从而修改两者scrollView的isScrollEnabled属性值来达到目的。
缺点：滑动到临界值会使滚动中断，需要二次滑动才会切换scrollView。这种在交互上是难以接受。

2、自定义滑动手势

通过自定义实现滑动手势。
缺点：滑动手势的复杂多样，很难处理的和系统一样。因为是自定义手势，所以很多细节需要自己去处理。

3、手势穿透

首先通过手势穿透，实现双层scrollView的同时滚动。接着通过标志位（临界值）来控制何时允许底层的scrollView滚动，以及何时允许上层的scrollView滚动。
注：何时允许哪一层scrollView能滚动，并不是说另外一层scrollView就不能滚动，而是给另外一层scrollView设置了固定的偏移量来达到不能滚动的效果

• 3.1 手势穿透

// 手势穿透  UIGestureRecognizerDelegate
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
    return true
}

• 3.2 控制滑动

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView == rootScrollView {
        if !canParentViewScroll {
            rootScrollView.contentOffset.y = headerStickyHeight // point A
            canChildViewScroll = true
        } else if scrollView.contentOffset.y >= headerStickyHeight {
            rootScrollView.contentOffset.y = headerStickyHeight
            canParentViewScroll = false
            canChildViewScroll = true
        }
    } else {
        if !canChildViewScroll {
            childScrollView.contentOffset.y = 0 // point B
        } else if scrollView.contentOffset.y <= 0 {
            canChildViewScroll = false
            canParentViewScroll = true
        }
    }
}

SegementSlide就是运用手势穿透来实现多层UIScrollView 嵌套的滚动，并且解决了在实践中常见的问题:

• 1. 切换不同的tab，导致的位置突变的问题

internal func resetChildViewControllerContentOffsetY() {
    guard segementSlideScrollView.contentOffset.y < headerStickyHeight else {
        return
    }
    let collection = waitTobeResetContentOffsetY
    for index in collection {
         guard index != currentIndex,
         let scrollView = dequeueReusableViewController(at: index)?.scrollView else {
             continue
         }
          waitTobeResetContentOffsetY.remove(index)
          scrollView.contentOffset.y = 0
     }
 }

解决方案：在底层的scrollView允许滚动的时候，将上层其他不可见的tab的scrollView的偏移量设置为0.

• 2. 滑动HeaderView，无法滑动联动

internal override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    let view = super.hitTest(point, with: event)
    guard let segementSlideContentView = segementSlideContentView else {
        return view
    }
    guard let selectedIndex = segementSlideContentView.selectedIndex,
          let segementSlideContentScrollViewDelegate = segementSlideContentView.dequeueReusableViewController(at: selectedIndex) else {
        return view
    }
    if view is UIControl {
        return view
    }
    if !(view?.gestureRecognizers?.isEmpty ?? true) {
        return view
    }
    return segementSlideContentScrollViewDelegate.scrollView
}

解决方案：将HeaderView的点击事件，转化到当前tab下scrollView，从而实现滑动联动

• 3. 实现上层scrollView的阻尼效果，使其能配合上层scrollView下拉刷新

// 阻尼效果
public enum BouncesType {
   case parent     // 底部ScrollView有阻尼效果
   case child      // 顶部ScrollView有阻尼效果
}
open var bouncesType: BouncesType {
    return .parent
}
具体的实现可以查看源码,关注bouncesType的具体使用

解决方案： 将偏移量划分的更加细致，在临界点切换相应可以滑动的ScrollView，并固定另一ScrollView。

当然SegementSlide还实现了更多需求，具体的可以深入学习。

缺点：

• 1. 对于多tab的情况，只要一个child拉回顶部，其他的child都会拉回顶部，这就是上面解决【位置突变】带来的副作用。个人而言这是可以接受的。
• 2. 对于多tab的情况，每一个child必须返回一个ScrollView，并且ScrollView必须占满View，否则当滑动上去后，无法下拉。
     面对这种情况，我的做法：返回一个tableView，将内容添加在tableView上
• 3. 动力不足，这是因为设置固定偏移量的原因，减弱了滚动的动力。

注意：

• 如果来回切换回SegementSlideViewController，会执行所有出现过的child的viewWillAppear or viewWillDisappear。这并不是SegementSlide的原因，这是所有使用了addChild(_ childController: UIViewController)都会出现的问题。所以根据自己的需求，在viewWillAppear or viewWillDisappear中实现逻辑。

相关资源

多层 UIScrollView 嵌套滚动解决方案
SegementSlide