iOS 解决UIScrollerView嵌套滑动视图手势冲突的三种方案

视图结构:

image.png

方案一 : 纵向滑动ScrollView联动嵌套的数据列表滑动

1.将三个数据列表全都设置成不可以滑动 scrollEnabled = NO
2.滑动纵向ScrollView时通过监听它的contentOffset然后赋值给数据列表
3.根据判断当前展示的数据列表更换纵向ScrollView的contentSize,它的高度应该等于当前展示的数据列表的contentSize.height+上层多余的视图.

但是后来我发现了masonry这个东西,于是我就想随着不断滑动纵向ScrollView来不断扩大横向scrollView及嵌套的数据列表的高度来展示数据可不可以呢?

于是: 将横向ScrollView的高度不设置成固定值,而是设置它距离上和距离下为固定值,这里设置它距离父视图self.view的底部为0.距离上为一个固定值如:200.内部嵌套的数据列表如同距离上为0距离下也以self.view的底部为参考.
这样就不需要给数据列表的contentOffset赋值

效果图如下:

gif5新文件.gif

从效果图中我们发现了一个缺点,我们第一次将第一个数据列表滑动上去后再切换到其他数据列表,发现其他的数据列表展示的contentOffset.y不是从0开始的而是第一个滑动的数据列表的contentOffset.y,这是因为我们始终滑动的都是纵向ScrollView所以这个contentOffset.y是纵向ScrollView的

方案二 : 移除纵向滑动ScrollView,通过设置数据列表的 contentInset来空出顶部视图部分

1.初始化一个全屏的横向ScrollView然后嵌套三个数据列表

2.设置三个数据列表的contentInset,这里我设置距离上为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.监听三个数据列表的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;
        }
//在此范围内三个数据列表contentOffset联动
        _mainTableView1.contentOffset = scrollView.contentOffset;
        _mainTableView2.contentOffset = scrollView.contentOffset;
        _mainTableView3.contentOffset = scrollView.contentOffset;
    }else{
//超出临界点固定顶部视图的frame
        _segment.qy_bottom = 40;
//安全判断 防止产生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);
        }
    }
}

效果如下:

gif5新文件-2.gif

从效果图中我们发现了体验效果很流畅,但加一个下拉刷新header出现在了顶部,感觉有点尴尬.

方案三 : 通过代理方法解决手势冲突

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
    return YES;
}

这句代码来自手势的delegate,如果返回YES那么我们所触摸到的手势就都会触发

1.首先视图结构还和开始画的图一样

2.自定义纵向ScrollerView然后在它的方法实现里加上这句代码

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
   
    return YES;
}

3.再来只需在监听contentOffset里做判断就行了,注意这里监听的是纵向scrollView及三个数据列表

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
   //这里我用_mainTableView代表了纵向scrollView
//qy_contentInsetTop 表示scrollView.contentInset.top,是为了防止类似下拉刷新时改变了contentInset带来的冲突
//_isTop用于判断当时是否为超出了临界点的状态
//顶部视图总高度为200红色label高度为40
    CGFloat offsetY = scrollView.contentOffset.y + scrollView.qy_contentInsetTop; 
    if (scrollView == _mainTableView) {
        if (_isTop) {
//超出临界点设置纵向scrollView.contentOffset为固定值,防止产生bug影响用户体验
            _mainTableView.contentOffset = CGPointMake(0, 160);
        }
    }else{
//当数据列表offsetY<=0时改变超出临界点状态
        if (offsetY <= 0) {
            _isTop = NO;
        }
    }
    if (_mainTableView.contentOffset.y <= 160 && !_isTop) {
        if (_mainTableView.contentOffset.y <= 0) {
//为了舒服的展示数据列表下拉刷新效果
            _mainTableView.contentOffset = CGPointZero;
        }else{
//临界点范围内三个数据列表的contentOffset一直为0
            _mainTableView1.contentOffset = CGPointMake(0, -_mainTableView1.qy_contentInsetTop);
            _mainTableView2.contentOffset =CGPointMake(0, -_mainTableView2.qy_contentInsetTop);
            _mainTableView3.contentOffset = CCGPointMake(0, -_mainTableView2.qy_contentInsetTop);
          
        }
    }else{
///超出临界点后做标记
        _isTop = YES;
    }
}

效果图如下:

gif5新文件.gif

从效果图中可以发现虽然体验效果上没有方案二那么好,但前面的问题都得到了解决.