iOS ScrollView嵌套tableView聯(lián)動滾動的思路與最佳實踐
前言
隨著業(yè)務(wù)的發(fā)展,頁面的復(fù)雜度越來越高,嵌套滾動視圖的方式也越來越受設(shè)計師們的青睞,在各大電商App十分常見。如下Demo圖:

但是這樣的交互官方并不推薦,而且對開發(fā)來說確是不那么友好,需要處理滾動手勢的沖突,頁面的多層級嵌套都給開發(fā)帶來了一定程度的麻煩。接下里我聊聊我們的實現(xiàn)思路。
思路和過程
對應(yīng)這種頁面結(jié)構(gòu)應(yīng)該毫無疑問是最底層是一個縱向滾動的scrollView,它的頁面上面放一個固定高度的header,緊接著下面一個支持橫向滾動切換的容器scrollView,容器上面才是各個頁面具體的tableView,如下圖:

思路一
最先想到的是,既然是滾動視圖那么我們是否可以通過滾動視圖的可滾動屬性來做呢,在初始時把最上層具體業(yè)務(wù)的tableView禁止?jié)L動,那么根據(jù)事件響應(yīng)鏈,滾動事件事件會由底層的ScrollView接收并處理,在到達最大偏移量之后,禁用底層的ScrollView滾動,同時開啟上層的tableView,使得上層可以滑動,想起來是有一定可行性的,可惜,事實現(xiàn)實是殘酷的,效果如下:

這樣會導(dǎo)致當(dāng)偏移量到達臨界值時,由于設(shè)置了scrollEnable屬性和最大偏移量,此次滾動手勢會被截斷,需要再次拖拽才能繼續(xù)滾動,顯然,這樣的效果是無法接受的。
思路二
這是同事提供的思路,在做這個時和同事有過討論,他們之前有這樣的交互頁面,使用的是自定義手勢,但由于UIScrollView是有彈性效果的,一般的滑動手勢做不到這一點的,所以需要引入UIDynamic模擬力場,實現(xiàn)阻尼效果。想了一下,雖然有一定的可行性,但是為了一個聯(lián)動滑動,要做這么多的事情,感覺比較繁瑣,而且自定義手勢做的模擬彈性效果可能和原生ScrollView的效果還是有一定的差距,所以選擇放棄。
思路三
回到我們思路一,除了邊界位置會阻斷聯(lián)動滾動外,其他效果還是可以的,那么能不能通過手段解決這個問題呢?既然能寫到了這里,那么毫無疑問,肯定是可以的。通過手勢穿透,即讓一個滑動手勢既作用于底層的ScrollView又能作用于上層的業(yè)務(wù)tableView,同時控制他們的滾動即可達成目的。通過讓底層的scrollView實現(xiàn)一個手勢識別的協(xié)議,同時響應(yīng)滾動事件:
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
根據(jù)官方文檔描述:
Asks the delegate if two gesture recognizers should be allowed to recognize gestures simultaneously.
表達的意思是詢問委托是否允許兩個手勢識別器同時識別手勢,那么我們實現(xiàn)這個協(xié)議,”穿透“手勢,分別在底層容器和上層業(yè)務(wù)中實現(xiàn)滾動視圖的代理方法func scrollViewDidScroll(_ scrollView: UIScrollView),分別控制他們的可滾動狀態(tài)和偏移量則能實現(xiàn)目的。部分實現(xiàn)如下:
底層容器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
}
}
}
上層業(yè)務(wù)tableView:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if !childCanScroll {
scrollView.contentOffset.y = 0
} else {
if scrollView.contentOffset.y <= 0 {
childCanScroll = false
superCanScrollBlock?(true)
}
}
}
通過底層ScrollView是否達到最大偏移量控制header的顯示隱藏和對應(yīng)的偏移量及可滾動狀態(tài),在業(yè)務(wù)tableView使用回調(diào)將ScrollView的可滾動狀態(tài)回調(diào)達到狀態(tài)同步。總體來說還是比較清晰,更多細節(jié)請看QFMultipleScrollView
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。
相關(guān)文章
iOS應(yīng)用開發(fā)中UITableView的分割線的一些設(shè)置技巧
這篇文章主要介紹了iOS應(yīng)用開發(fā)中UITableView分割線的一些設(shè)置技巧,包括消除分割線的方法,示例代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-03-03
iOS tableView多輸入框如何獲取數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于iOS tableView多輸入框如何獲取數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
iOS sqlite對數(shù)據(jù)庫的各種操作(日常整理全)
在IOS中使用Sqlite來處理數(shù)據(jù)。如果你已經(jīng)了解了SQL,那你可以很容易的掌握SQLite數(shù)據(jù)庫的操作。本文給大家介紹iOS sqlite對數(shù)據(jù)庫的各種操作,需要的朋友參考下吧2016-03-03
iOS使用WKWebView加載HTML5不顯示屏幕寬度的問題解決
這篇文章主要介紹了iOS使用WKWebView加載HTML5不顯示屏幕寬度的問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12

