背景
隨著產品功能不斷的迭代，總會有需求希望在保證不影響其他區域功能的前提下，在某一區域實現根據選擇器切換不同的內容顯示。
蘋果並不推薦巢狀滾動檢視，如果直接新增的話，就會出現下圖這種情況，手勢的衝突造成了體驗上的悲劇。
在實際開發中，我也不斷的在思考解決方案，經歷了幾次重構後，有了些改進的經驗，因此抽空整理了三種方案，他們實現的最終效果都是一樣的。
分而治之
最常見的一種方案就是使用 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。