先來整體效果圖給以說明
? 頁面整體結(jié)構(gòu)是一個大的滾動視圖嵌套了三個可以滾動的子視圖个初,起初在做這種效果時蓄坏,搜了一下網(wǎng)上并沒有找到合適的解決方案鸟顺,于是在自己動手實現(xiàn)后拿出來分享一下次坡,如果你在開發(fā)中也遇到了產(chǎn)品提的這種奇葩需求疼约,相信這會是一個不錯的解決方案溺拱,希望對大家有幫助!(由于是示例逃贝,效果就差那么幾丟丟了~)
首先我們分析一下這個效果的幾種實現(xiàn)方案:
1、UITableView+UIScrollView(嵌套三個子視圖)
2迫摔、UIScrollView+UIScrollView(嵌套三個子視圖)
這兩種方案都是基于UIScrollView來實現(xiàn)的沐扳,不同點就在于搭建視圖邏輯有所不同,在本文中我采用的是第二種方案來實現(xiàn)的這種效果句占,第一種在最終處理上是一樣的沪摄。下面我們就逐步剖析一下整個實現(xiàn)過程
第一步:
創(chuàng)建一個父視圖的scrollView和子視圖scrollView,搭建出基礎界面效果(這個相信大家都能輕松做到)
在搭建完界面后你會發(fā)現(xiàn)滾動下面的區(qū)域父視圖并不會隨著滾動的纱烘,就像這樣
在滾動父視圖時我們會看到如果拖拽超過了父視圖的frame杨拐,底部會出現(xiàn)白色,而且滾動列表擂啥、圖片哄陶、詳情這些子視圖父視圖也并不會隨之滾動,我們需要做的就是在這些視圖滾動的時候監(jiān)聽滾動位置并做處理
第二步:
設置需要處理的scrollView代理哺壶,監(jiān)聽滾動位置屋吨,整個處理代碼就在scrollViewDidScroll這個代理方法中完成,我們需要整個視圖在滾動到tab的時候就停留山宾,只能繼續(xù)滾動子視圖至扰,因此我們只需判斷在父視圖滾動位置不超過tab頭部時就隨著子視圖滾動而滾動,子視圖在滾動中需要始終設置
```
[scrollView setContentOffset:CGPointZero];
(注意這里如果添加animated:YES是不可以的)资锰。
```
在我們滾動父視圖時就只需要判斷如果滾動位置超過了tab就設置為tab的位置即可:
```
if (self.journeyScrollView.contentOffset.y >= self.titleView.y) {
[self.journeyScrollView setContentOffset:CGPointMake(0, self.titleView.y)];
}
```
為了解決子視圖滾動到頂部繼續(xù)拖拽導致的父視圖移位不會自動返回問題敢课,我們需要在scrollViewDidEndDragging這個代理方法中判斷處理父視圖的位置
```if (self.journeyScrollView.contentOffset.y < 0) {
[self.journeyScrollView setContentOffset:CGPointZero
animated:YES];
}
```
到此一個嵌套滾動的視圖邏輯處理就完成了,如果你還有疑惑绷杜,可以查看本篇文章的一個示例Demo:https://github.com/lvXiaoPeng/LYEmbedScrollView翎猛。
最后,如果你有更好的實現(xiàn)原理和解決方案接剩,希望能告訴我切厘,共同學習!