視圖結(jié)構(gòu):
![]()
image.png
方案一 : 縱向滑動ScrollView聯(lián)動嵌套的數(shù)據(jù)列表滑動
1.將三個數(shù)據(jù)列表全都設(shè)置成不可以滑動 scrollEnabled = NO
2.滑動縱向ScrollView時通過監(jiān)聽它的contentOffset然后賦值給數(shù)據(jù)列表
3.根據(jù)判斷當(dāng)前展示的數(shù)據(jù)列表更換縱向ScrollView的contentSize,它的高度應(yīng)該等于當(dāng)前展示的數(shù)據(jù)列表的contentSize.height+上層多余的視圖.
但是后來我發(fā)現(xiàn)了masonry這個東西,于是我就想隨著不斷滑動縱向ScrollView來不斷擴大橫向scrollView及嵌套的數(shù)據(jù)列表的高度來展示數(shù)據(jù)可不可以呢?
于是: 將橫向ScrollView的高度不設(shè)置成固定值,而是設(shè)置它距離上和距離下為固定值,這里設(shè)置它距離父視圖self.view的底部為0.距離上為一個固定值如:200.內(nèi)部嵌套的數(shù)據(jù)列表如同距離上為0距離下也以self.view的底部為參考.
這樣就不需要給數(shù)據(jù)列表的contentOffset賦值
效果圖如下:
從效果圖中我們發(fā)現(xiàn)了一個缺點,我們第一次將第一個數(shù)據(jù)列表滑動上去后再切換到其他數(shù)據(jù)列表,發(fā)現(xiàn)其他的數(shù)據(jù)列表展示的contentOffset.y不是從0開始的而是第一個滑動的數(shù)據(jù)列表的contentOffset.y,這是因為我們始終滑動的都是縱向ScrollView所以這個contentOffset.y是縱向ScrollView的
方案二 : 移除縱向滑動ScrollView,通過設(shè)置數(shù)據(jù)列表的 contentInset來空出頂部視圖部分
1.初始化一個全屏的橫向ScrollView然后嵌套三個數(shù)據(jù)列表
2.設(shè)置三個數(shù)據(jù)列表的contentInset,這里我設(shè)置距離上為200
_mainTableView1.qy_contentInsetTop = 200;
_mainTableView2.qy_contentInsetTop = 200;
_mainTableView3.qy_contentInsetTop = 200;
3.添加頂部視圖
_segment = [UILabel.alloc initWithFrame:CGRectMake(0, 160, QYScreenWidth, 40)];
_segment.backgroundColor = UIColor.redColor;
_segment.text = @"123";
[self.view addSubview:_segment];
3.監(jiān)聽三個數(shù)據(jù)列表的contentOffset.y,
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView.contentOffset.y < -40) {
if (scrollView.contentOffset.y > -200) {
//距離下的frame
_segment.qy_bottom = -scrollView.contentOffset.y;
}else{
//距離下的frame
_segment.qy_bottom = 200;
}
//在此范圍內(nèi)三個數(shù)據(jù)列表contentOffset聯(lián)動
_mainTableView1.contentOffset = scrollView.contentOffset;
_mainTableView2.contentOffset = scrollView.contentOffset;
_mainTableView3.contentOffset = scrollView.contentOffset;
}else{
//超出臨界點固定頂部視圖的frame
_segment.qy_bottom = 40;
//安全判斷 防止產(chǎn)生bug影響體驗
if (_mainTableView1.contentOffset.y<-40) {
_mainTableView1.contentOffset = CGPointMake(0, -40);
}
if (_mainTableView2.contentOffset.y<-40) {
_mainTableView2.contentOffset = CGPointMake(0, -40);
}
if (_mainTableView3.contentOffset.y<-40) {
_mainTableView3.contentOffset = CGPointMake(0, -40);
}
}
}
效果如下:
從效果圖中我們發(fā)現(xiàn)了體驗效果很流暢,但加一個下拉刷新header出現(xiàn)在了頂部,感覺有點尷尬.
方案三 : 通過代理方法解決手勢沖突
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
return YES;
}
這句代碼來自手勢的delegate,如果返回YES那么我們所觸摸到的手勢就都會觸發(fā)
1.首先視圖結(jié)構(gòu)還和開始畫的圖一樣
2.自定義縱向ScrollerView然后在它的方法實現(xiàn)里加上這句代碼
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
return YES;
}
3.再來只需在監(jiān)聽contentOffset里做判斷就行了,注意這里監(jiān)聽的是縱向scrollView及三個數(shù)據(jù)列表
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//這里我用_mainTableView代表了縱向scrollView
//qy_contentInsetTop 表示scrollView.contentInset.top,是為了防止類似下拉刷新時改變了contentInset帶來的沖突
//_isTop用于判斷當(dāng)時是否為超出了臨界點的狀態(tài)
//頂部視圖總高度為200紅色label高度為40
CGFloat offsetY = scrollView.contentOffset.y + scrollView.qy_contentInsetTop;
if (scrollView == _mainTableView) {
if (_isTop) {
//超出臨界點設(shè)置縱向scrollView.contentOffset為固定值,防止產(chǎn)生bug影響用戶體驗
_mainTableView.contentOffset = CGPointMake(0, 160);
}
}else{
//當(dāng)數(shù)據(jù)列表offsetY<=0時改變超出臨界點狀態(tài)
if (offsetY <= 0) {
_isTop = NO;
}
}
if (_mainTableView.contentOffset.y <= 160 && !_isTop) {
if (_mainTableView.contentOffset.y <= 0) {
//為了舒服的展示數(shù)據(jù)列表下拉刷新效果
_mainTableView.contentOffset = CGPointZero;
}else{
//臨界點范圍內(nèi)三個數(shù)據(jù)列表的contentOffset一直為0
_mainTableView1.contentOffset = CGPointMake(0, -_mainTableView1.qy_contentInsetTop);
_mainTableView2.contentOffset =CGPointMake(0, -_mainTableView2.qy_contentInsetTop);
_mainTableView3.contentOffset = CCGPointMake(0, -_mainTableView2.qy_contentInsetTop);
}
}else{
///超出臨界點后做標(biāo)記
_isTop = YES;
}
}
效果圖如下:
從效果圖中可以發(fā)現(xiàn)雖然體驗效果上沒有方案二那么好,但前面的問題都得到了解決.
