三种UIScrollView嵌套实现方案

背景

随着产品功能不断的迭代，总会有需求希望在保证不影响其他区域功能的前提下，在某一区域实现根据选择器切换不同的内容显示。

苹果并不推荐嵌套滚动视图，如果直接添加的话，就会出现下图这种情况，手势的冲突造成了体验上的悲剧。

在实际开发中，我也不断的在思考解决方案，经历了几次重构后，有了些改进的经验，因此抽空整理了三种方案，他们实现的最终效果都是一样的。

---

分而治之

最常见的一种方案就是使用 UITableView 作为外部框架，将子视图的内容通过 UITableViewCell 的方式展现。

这种做法的好处在于解耦性，框架只要接受不同的数据源就能刷新对应的内容。

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) 
    -> CGFloat {
    if indexPath.section == 0 {
        return NSTHeaderHeight
    }
    
    if segmentView.selectedIndex == 0 {
        return tableSource.tableView(_:tableView, heightForRowAt:indexPath)
    }
    
    return webSource.tableView(_:tableView, heightForRowAt:indexPath)
}

但是相对的也有一个问题，如果内部是一个独立的滚动视图，比如 UIWebView 的子视图 UIWebScrollView，还是会有手势冲突的情况。

常规做法首先禁止内部视图的滚动，当滚动到网页的位置时，启动网页的滚动并禁止外部滚动，反之亦然。

不幸的是，这种方案最大的问题是顿挫感。

内部视图初始是不能滚动的，所以外部视图作为整套事件的接收者。当滚动到预设的位置并开启了内部视图的滚动，事件还是传递给唯一接收者外部视图，只有松开手结束事件后重新触发，才能使内部视图开始滚动。

好在有一个方法可以解决这个问题。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView == tableView {
        //外部在滚动
        if offset > anchor {
            //滚到过了锚点，还原外部视图位置，添加偏移到内部
            tableView.setContentOffset(CGPoint(x: 0, y: anchor), animated: false)
            let webOffset = webScrollView.contentOffset.y + offset - anchor
            webScrollView.setContentOffset(CGPoint(x: 0, y: webOffset), animated: false)
        } else if offset < anchor {
            //没滚到锚点，还原位置
            webScrollView.setContentOffset(CGPoint.zero, animated: false)
        }
    } else {
        //内部在滚动
        if offset > 0 {
            //内部滚动还原外部位置
            tableView.setContentOffset(CGPoint(x: 0, y: anchor), animated: false)
        } else if offset < 0 {
            //内部往上滚，添加偏移量到外部视图
            let tableOffset = tableView.contentOffset.y + offset
            tableView.setContentOffset(CGPoint(x: 0, y: tableOffset), animated: false)
            webScrollView.setContentOffset(CGPoint.zero, animated: false)
        }
    }
}

func scrollViewDidEndScroll(_ scrollView: UIScrollView) {
    //根据滚动停止后的偏移量，计算谁可以滚动
    var outsideScrollEnable = true
    if scrollView == tableView {
        if offset == anchor &&
            webScrollView.contentOffset.y > 0 {
            outsideScrollEnable = false
        } else {
            outsideScrollEnable = true
        }
    } else {
        if offset == 0 &&
            tableView.contentOffset.y < anchor {
            outsideScrollEnable = true
        } else {
            outsideScrollEnable = false
        }
    }
    //设置滚动，显示对应的滚动条
    tableView.isScrollEnabled = outsideScrollEnable
    tableView.showsHorizontalScrollIndicator = outsideScrollEnable
    webScrollView.isScrollEnabled = !outsideScrollEnable
    webScrollView.showsHorizontalScrollIndicator = !outsideScrollEnable
}

通过接受滚动回调，我们就可以人为控制滚动行为。当滚动距离超过了我们的预设值，就可以设置另一个视图的偏移量模拟出滚动的效果。滚动状态结束后，再根据判断来定位哪个视图可以滚动。

当然要使用这个方法，我们就必须把两个滚动视图的代理都设置为控制器，可能会对代码逻辑有影响 (UIWebView 是 UIWebScrollView 的代理，后文有解决方案)。

UITableView 嵌套的方式，能够很好的解决嵌套简单视图，遇到 UIWebView 这种复杂情况，也能人为控制解决。但是作为 UITableView 的一环，有很多限制(比如不同数据源需要不同的设定，有的希望动态高度，有的需要插入额外的视图)，这些都不能很好的解决。

---

各自为政

另一种解决方案比较反客为主，灵感来源于下拉刷新的实现方式，也就是将需要显示的内容塞入负一屏。

首先保证子视图撑满全屏，把主视图内容插入子视图，并设置 ContentInset 为头部高度，从而实现效果。

来看下代码实现。

func reloadScrollView() {
    //选择当前显示的视图
    let scrollView = segmentView.selectedIndex == 0 ? 
        tableSource.tableView : webSource.webView.scrollView
    //相同视图就不操作了
    if currentScrollView == scrollView {
        return
    }
    //从上次的视图中移除外部内容
    headLabel.removeFromSuperview()
    segmentView.removeFromSuperview()
    if currentScrollView != nil {
        currentScrollView!.removeFromSuperview()
    }
    //设置新滚动视图的内嵌偏移量为外部内容的高度
    scrollView.contentInset = UIEdgeInsets(top: 
        NSTSegmentHeight + NSTHeaderHeight, left: 0, bottom: 0, right: 0)
    //添加外部内容到新视图上
    scrollView.addSubview(headLabel)
    scrollView.addSubview(segmentView)
    view.addSubview(scrollView)
    
    currentScrollView = scrollView
}

由于在UI层级就只存在一个滚动视图，所以巧妙的避开了冲突。

相对的，插入的头部视图必须要轻量，如果需要和我例子中一样实现浮动栏效果，就要观察偏移量的变化手动定位。

func reloadScrollView() {
    if currentScrollView != nil {
        currentScrollView!.removeFromSuperview()
        //移除之前的 KVO
        observer?.invalidate()
        observer = nil
    }

    //新视图添加滚动观察
    observer = scrollView.observe(\.contentOffset, options: [.new, .initial]) 
    {[weak self] object, change in
        guard let strongSelf = self else {
            return
        }
        let closureScrollView = object as UIScrollView
        var segmentFrame = strongSelf.segmentView.frame
        //计算偏移位置
        let safeOffsetY = closureScrollView.contentOffset.y + 
            closureScrollView.safeAreaInsets.top
        //计算浮动栏位置
        if safeOffsetY < -NSTSegmentHeight {
            segmentFrame.origin.y = -NSTSegmentHeight
        } else {
            segmentFrame.origin.y = safeOffsetY
        }
        strongSelf.segmentView.frame = segmentFrame
    }
}

这方法有一个坑，如果加载的 UITableView 需要显示自己的 SectionHeader ，那么由于设置了 ContentInset ，就会导致浮动位置偏移。

我想到的解决办法就是在回调中不断调整 ContentInset 来解决。

observer = scrollView.observe(\.contentOffset, options: [.new, .initial]) 
{[weak self] object, change in
    guard let strongSelf = self else {
        return
    }
    let closureScrollView = object as UIScrollView
    //计算偏移位置
    let safeOffsetY = closureScrollView.contentOffset.y + 
        closureScrollView.safeAreaInsets.top
    //ContentInset 根据当前滚动定制
    var contentInsetTop = NSTSegmentHeight + NSTHeaderHeight
    if safeOffsetY < 0 {
        contentInsetTop = min(contentInsetTop, fabs(safeOffsetY))
    } else {
        contentInsetTop = 0
    }
    closureScrollView.contentInset = UIEdgeInsets(top: 
    contentInsetTop, left: 0, bottom: 0, right: 0)
}

这个方法好在保证了有且仅有一个滚动视图，所有的手势操作都是原生实现，减少了可能存在的联动问题。

但也有一个小缺陷，那就是头部内容的偏移量都是负数，这不利于三方调用和系统原始调用的实现，需要维护。

---

中央集权

最后介绍一种比较完善的方案。外部视图采用 UIScrollView ，内部视图永远不可滚动，外部边滚动边调整内部的位置，保证了双方的独立性。

与第二种方法相比，切换不同功能就比较简单，只需要替换内部视图，并实现外部视图的代理，滚动时设置内部视图的偏移量就可以了。

func reloadScrollView() {
    //获取当前数据源
    let contentScrollView = segmentView.selectedIndex == 0 ? 
    tableSource.tableView : webSource.webView.scrollView
    //移除之前的视图
    if currentScrollView != nil {
        currentScrollView!.removeFromSuperview()
    }
    //禁止滚动后添加新视图
    contentScrollView.isScrollEnabled = false
    scrollView.addSubview(contentScrollView)
    //保存当前视图
    currentScrollView = contentScrollView
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    //根据偏移量刷新 Segment 和内部视图的位置
    self.view.setNeedsLayout()
    self.view.layoutIfNeeded()
    //根据外部视图数据计算内部视图的偏移量
    var floatOffset = scrollView.contentOffset
    floatOffset.y -= (NSTHeaderHeight + NSTSegmentHeight)
    floatOffset.y = max(floatOffset.y, 0)
    //同步内部视图的偏移
    if currentScrollView?.contentOffset.equalTo(floatOffset) == false {
        currentScrollView?.setContentOffset(floatOffset, animated: false)
    }
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    //撑满全部
    scrollView.frame = view.bounds
    //头部固定
    headLabel.frame = CGRect(x: 15, y: 0, 
        width: scrollView.frame.size.width - 30, height: NSTHeaderHeight)
    //Segment的位置是偏移和头部高度的最大值
    //保证滚动到头部位置时不浮动
    segmentView.frame = CGRect(x: 0, 
        y: max(NSTHeaderHeight, scrollView.contentOffset.y), 
        width: scrollView.frame.size.width, height: NSTSegmentHeight)
    //调整内部视图的位置
    if currentScrollView != nil {
        currentScrollView?.frame = CGRect(x: 0, y: segmentView.frame.maxY, 
            width: scrollView.frame.size.width, 
            height: view.bounds.size.height - NSTSegmentHeight)
    }
}

当外部视图开始滚动时，其实一直在根据偏移量调整内部视图的位置。

外部视图的内容高度不是固定的，而是内部视图内容高度加上头部高度，所以需要观察其变化并刷新。

func reloadScrollView() {
    if currentScrollView != nil {
        //移除KVO
        observer?.invalidate()
        observer = nil
    }

    //添加内容尺寸的 KVO
    observer = contentScrollView.observe(\.contentSize, options: [.new, .initial]) 
    {[weak self] object, change in
        guard let strongSelf = self else {
            return
        }
        let closureScrollView = object as UIScrollView
        let contentSizeHeight = NSTHeaderHeight + NSTSegmentHeight + 
            closureScrollView.contentSize.height
        //当内容尺寸改变时，刷新外部视图的总尺寸，保证滚动距离
        strongSelf.scrollView.contentSize = CGSize(width: 0, height: contentSizeHeight)
    }
}

这个方法也有一个问题，由于内部滚动都是由外部来实现，没有手势的参与，因此得不到 scrollViewDidEndDragging 等滚动回调，如果涉及翻页之类的需求就会遇到困难。

解决办法是获取内部视图原本的代理，当外部视图代理收到回调时，转发给该代理实现功能。

func reloadScrollView() {
    typealias ClosureType = @convention(c) (AnyObject, Selector) -> AnyObject
    //定义获取代理方法
    let sel = #selector(getter: UIScrollView.delegate)
    //获取滚动视图代理的实现
    let imp = class_getMethodImplementation(UIScrollView.self, sel)
    //包装成闭包的形式
    let delegateFunc : ClosureType = unsafeBitCast(imp, to: ClosureType.self)
    //获得实际的代理对象
    currentScrollDelegate = delegateFunc(contentScrollView, sel) as? UIScrollViewDelegate
}

func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if currentScrollDelegate != nil {
        currentScrollDelegate!.scrollViewDidEndDragging?
            (currentScrollView!, willDecelerate: decelerate)
    }
}

注意这里我并没有使用 contentScrollView.delegate，这是因为 UIWebScrollView 重载了这个方法并返回了 UIWebView 的代理。但实际真正的代理是一个 NSProxy 对象，他负责把回调传给 UIWebView 和外部代理。要保证 UIWebView 能正常处理的话，就要让它也收到回调，所以使用 Runtime 执行 UIScrollView 原始获取代理的实现来获取。

---

总结

目前在生产环境中我使用的是最后一种方法，但其实这些方法互有优缺点。

方案	分而治之	各自为政	中央集权
方式	嵌套	内嵌	嵌套
联动	手动	自动	手动
切换	数据源	整体更改	局部更改
优势	便于理解	滚动效果好	独立性
劣势	联动复杂	复杂场景苦手	模拟滚动隐患
评分	🌟🌟🌟	🌟🌟🌟🌟	🌟🌟🌟🌟

技术没有对错，只有适不适合当前的需求。

分而治之适合 UITableView 互相嵌套的情况，通过数据源的变化能够很好实现切换功能。

各自为政适合相对简单的页面需求，如果能够避免浮动框，那使用这个方法能够实现最好的滚动效果。

中央集权适合复杂的场景，通过独立不同类型的滚动视图，使得互相最少影响，但是由于其模拟滚动的特性，需要小心处理。

希望本文能给大家带来启发，项目开源代码在此，欢迎指教与Star。