iOS 全屏侧滑/UIScrollView/UISlider间滑动冲突

待我称王封你为后i 2022-05-11 04:36 338阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/13848.html][http_www.demodashi.com_demo_13848.html]

#### 效果预览 ####

![效果预览][strip]

#### 一、前期准备 ####

> 有一个支持全屏侧滑返回的视图控制器ViewController，ViewController.view上有一个UIScrollView，UIScrollView上有UISlider。俺直接在之前的示例Demo上演示，地址：[iOS 自定义转场动画][iOS]

#### 二、问题展示 ####

*  **现象 1**、*UIScrollView当前在第一页即contentOffset.x=0时，左滑不能触发全屏侧滑pop返回的手势* ；

![UIScrollView和全屏侧滑pop返回手势冲突示意图][UIScrollView_pop]

*  **现象2** 、*问题1解决后，你会发现拖拽UIScrollView第一页上的UISlider时，向右拖拽时却触发了全屏侧滑pop返回的手势，而UISlider本身的拖拽事件却没有响应；向左拖拽UISlider时，响应的是UIScrollView的拖动事件，而UISlider本身的拖拽事件也没有响应*。

![UISlider与UIScrollView、全屏侧滑pop返回手势冲突示意图][UISlider_UIScrollView_pop]

*  **现象3** 、*当你长按UISlider超过150ms后直接拖拽，就不存在现象2中UISlider与UIScrollView、全屏侧滑返回的冲突问题了*。

![手势冲突.gif][.gif]

#### 三、分析解决问题 ####

> 这些问题很显然，肯定跟iOS事件的传递和响应链机制有关系，不了解的可以看看这篇文章 [史上最详细的iOS之事件的传递和响应机制-原理篇][iOS_-]。

*  **分析解决问题 1**  
    *如果你了解事件的传递和响应链机制的话，应该能想到，是由于UIScrollView的内部手势方法阻断了全屏侧滑返回手势的的响应，那我们就找到这个方法，代码如下* ；

> 创建一个UIScrollView的类别UIScrollView+GestureConflict，重写如下方法：

//处理UIScrollView上的手势和侧滑返回手势的冲突
    -(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
    
        // 首先判断otherGestureRecognizer是不是系统pop手势
        if ([otherGestureRecognizer.view isKindOfClass:NSClassFromString(@"UILayoutContainerView")]) {
            // 再判断系统手势的state是began还是fail，同时判断scrollView的位置是不是正好在最左边
            if (otherGestureRecognizer.state == UIGestureRecognizerStateBegan && self.contentOffset.x == 0) {
                return YES;
            }
        }
        return NO;
    }

*  **分析解决问题 2和3**

*方案一：这个跟UIScrollView的一个属性delaysContentTouches有关。*

> scrollView.delaysContentTouches = NO;  
> delaysContentTouches 默认值为YES 表示延迟scrollView上子视图的响应，所以当直接拖动UISlider时，如果此时touch时间在150ms以内，UIScrollView会认为是拖动自己，从而拦截了event，导致UISlider接收不到滑动的event。但是只要长按住UISlider一会儿再拖动，此时touch时间超过150ms，因此滑动的event会发送到UISlider上，然后UISlider再作出响应；设置为NO后，拖动UISlider时就可以直接做出响应，解决了UISlider与UIScrollView之间的冲突，同时也解决了向右拖拽时却触发了全屏侧滑pop返回的问题。

*方案二： 重写类别UIScrollView+GestureConflict中的如下方法来解决UISlider与UIScrollView之间的冲突，然后还需要执行下面 **问题补充** 中的操作来处理UISlider的滑动与全屏侧滑pop返回事件的冲突。*

//拦截事件的处理 事件传递给谁，就会调用谁的hitTest:withEvent:方法。
    //处理UISlider的滑动与UIScrollView的滑动事件冲突
    - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
        /*
         直接拖动UISlider，此时touch时间在150ms以内，UIScrollView会认为是拖动自己，从而拦截了event，导致UISlider接受不到滑动的event。但是只要按住UISlider一会再拖动，此时此时touch时间超过150ms，因此滑动的event会发送到UISlider上。
         */
        UIView *view = [super hitTest:point withEvent:event];
        
        if([view isKindOfClass:[UISlider class]]) {
            //如果接收事件view是UISlider,则scrollview禁止响应滑动
            self.scrollEnabled = NO;
        } else {   //如果不是,则恢复滑动
            self.scrollEnabled = YES;
        }
        return view;
    }

*  **问题补充**  
    *示例Demo中的UISlider是在UIScrollView上的，如果UISlider不是在UIScrollView上，而是直接就在ViewController.view上，那也就会出现拖拽UISlider时却响应了全屏侧滑pop返回手势的问题。*

> 在支持全屏侧滑返回的UINavigationController的子类WSLNavigatioController中，遵守协议,实现如下方法：

#pragma mark -- UIGestureRecognizerDelegate
    //触发之后是否响应手势事件
    //处理侧滑返回与UISlider的拖动手势冲突
    - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch{
        //如果手势是触摸的UISlider滑块触发的，侧滑返回手势就不响应
        if ([touch.view isKindOfClass:[UISlider class]]) {
            return NO;
        }
        return YES;
    }

#### 四、应用示例 ####

![手势冲突应用示例.gif][.gif 1]

#### 五、项目结构 ####

![gNQdJUqTqlPp6e6ZQvd.png][]

> 好了，俺要去鹊桥跟俺家织女相会咯✌️?(\*❦ω❦)，就说这么多了，今天七夕节，也祝各位单身猿告白成功，玩的开心?O(∩\_∩)O哈哈~

![表白?][strip 1]

iOS 全屏侧滑/UIScrollView/UISlider间滑动冲突

> 代码地址如下：  
> [http://www.demodashi.com/demo/13848.html][http_www.demodashi.com_demo_13848.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_13848.html]: http://www.demodashi.com/demo/13848.html
[strip]: /images/20220511/4ac45bcedeb04fcc90e2fede334f1cb5.png
[iOS]: http://www.demodashi.com/demo/12955.html
[UIScrollView_pop]: /images/20220511/99fd4bff109146fc8581b66450b0fe50.png
[UISlider_UIScrollView_pop]: /images/20220511/c5ed2c08f04a42d7917249be16eeae57.png
[.gif]: /images/20220511/99de826e39ee4126a2b9da1c30fdbc01.png
[iOS_-]: https://www.jianshu.com/p/2e074db792ba
[.gif 1]: /images/20220511/6a79ee2bcd034b5393e9ba0cf2e9170f.png
[gNQdJUqTqlPp6e6ZQvd.png]: /images/20220511/c07f5c0a14834a2fb48d492aaab12800.png
[strip 1]: /images/20220511/eae0629e4db046ed9b0f937aed4784e3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，338人围观）

还没有评论，来说两句吧...

相关阅读

相关侧滑，侧拉，菜单DrawerLayout

例： ![70][] 侧滑，侧拉，菜单DrawerLayout 点击按钮打开，关闭侧边框（可以拉动） MainActivit

深碍√TFBOYSˉ_/ 2023年10月17日 21:46/ 0 赞/ 42 阅读

相关 Flutter Slidable 列表侧滑菜单列表侧滑删除

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就

秒速五厘米/ 2023年10月07日 16:07/ 0 赞/ 47 阅读

相关 android侧滑菜单置顶,Android 高大上的侧滑菜单DrawerLayout，解决了不能全屏滑动的问题...

![4c3bd86b18f535a2be0f98f37bb97c0e.png][] DrawerLayout预览 DrawerLayout主要功能就是实现侧滑菜单效果的功

叁歲伎倆/ 2022年10月17日 13:55/ 0 赞/ 147 阅读

相关 github ios仿QQ侧滑

WWSideslipViewController：[github地址][github] 模仿QQ侧滑，支持滑动设置等功能，易拓展 WWSideslipViewCo

柔光的暖阳◎/ 2022年08月09日 17:54/ 0 赞/ 216 阅读

相关 QQ侧滑删除功能原理以及冲突解决

侧滑概要前面几篇文章中已经学习了如何自定义 View / ViewGroup，学习了 View / ViewGroup 的事件分发机制，以及自定义 ViewGroup

旧城等待，/ 2022年06月18日 12:57/ 0 赞/ 291 阅读

相关 iOS 全屏侧滑手势/UIScrollView/UISlider间滑动手势冲突

![Image 1][] 七夕节福利 ![Image 1][] 效果预览一、前期准备 > 有一个支持全屏侧滑返回的视图控制器ViewController，ViewC

阳光穿透心脏的1/2处/ 2022年05月14日 11:16/ 0 赞/ 190 阅读

相关 iOS 全屏侧滑/UIScrollView/UISlider间滑动冲突

> 代码地址如下： > [http://www.demodashi.com/demo/13848.html][http_www.demodashi.com_demo_138

待我称王封你为后i/ 2022年05月11日 04:36/ 0 赞/ 339 阅读

相关处理侧滑返回与 ScrollView 手势冲突

与处理双击、单击手势互斥原则一样： // 手势互斥(侧滑返回手势失效后才响应UITableView的滑动手势) [tableView.panGestureRe

骑猪看日落/ 2022年03月22日 11:30/ 0 赞/ 247 阅读

相关侧滑菜单（三）

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] CustomSidingView.class

ゝ一纸荒年。/ 2022年01月12日 23:07/ 0 赞/ 302 阅读

相关 DrawerLayout侧滑详解

前面我们说了自定义侧滑菜单，也说了SlidingMenu的使用，这一节我们再来说下DrawerLayout。DrawerLayout是Support Library包中实现了侧

小鱼儿/ 2021年09月20日 14:40/ 0 赞/ 548 阅读