您的位置：首页 > 产品设计 > UI/UE

关于UINavigationController自定义实效的问题，和自带效果研究

2016-01-21 23:36 344 查看
从iOS7开始，系统为UINavigationController提供了一个interactivePopGestureRecognizer用于右滑返回(pop),但是，如果自定了back button或者隐藏了navigationBar，该手势就失效了。



这是为什么呢？


原因

我们知道，interactivePopGestureRecognizer从手势触发到行为发生，要经过下面的阶段：



interactivePopGestureRecognizer还存在，但没有起作用，可能是delegate里被阻断了没调用target/action，或者是调用了target/action没运行动画。

经过尝试（参考别人博客），发现自定义返回按钮或者隐藏navigationBar导致的该手势未起作用是因为在delegate阶段被阻断了。

如果我们知道action的名字，则可以添加一个自定义的滑动手势，直接调用该系统action。但API文档并没有提供。

结果就是要么自己实现滑动返回的动画action，要么自己重写interactivePopGestureRecognizer的delegate以让手势继续下去，触发系统的动画action。


实现方法

那就把delegate自己实现一下吧。

新建一个类
BaseNavigationController
,实现delegate：

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">3</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">4</span>
- (void)viewDidLoad {
[super viewDidLoad];
self.interactivePopGestureRecognizer.delegate =  self;
}

让手势生效

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">3</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">4</span><span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">5</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">6</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">7</span>
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
if (self.viewControllers.count <= 1 ) {
return NO;
}

return YES;
}

在需要滑动返回的地方的
UINavigationController
换成
BaseNavigationController
。

完成！



然后考虑到在push动画发生的时候，禁止滑动手势，在
BaseNavigationController
添加

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">3</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">4</span>
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated {
[super pushViewController:viewController animated:animated];
self.interactivePopGestureRecognizer.enabled = NO;
}

在使用navigationController的viewcontroller里添加

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">3</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">4</span>
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
self.navigationController.interactivePopGestureRecognizer.enabled = YES;
}


结果

当然不需要把上面的代码都抄一遍，因为这么通用的功能由一位韩国开发者做成组件，放在了github https://github.com/devxoul/SwipeBack。你只需要

<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">1</span>
<span class="line-number" style="margin: 0px; padding: 0px; border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: baseline; color: rgb(88, 110, 117) !important;">2</span>
platform :ios, '7.0'
pod 'SwipeBack', '~> 1.0'

该工程用了category+JRSwizzle交换了上面涉及到的UINavigationController的那些方法，还额外考虑了只自定义back button而不隐藏navigationBar的情况。无需一行代码，让系统的右滑返回动画重新回来！

原文地址：http://chisj.github.io/blog/2015/05/27/uinavigationcontrollerfan-hui-shou-shi-shi-xiao-wen-ti/

UIScrollView的手势重叠：

for (UIGestureRecognizer *gestureRecognizer
in self.scrollView.gestureRecognizers) {
        [gestureRecognizer requireGestureRecognizerToFail:self.navigationController.interactivePopGestureRecognizer];
    }

然后就是

效果如图：

1.gif

如果喜欢我的文章，可以关注我，也可以来小码哥，了解下我们的iOS培训课程。陆续还会有更新ing....

一、自定义导航控制器

目的：以后需要使用全屏滑动返回功能，就使用自己定义的导航控制器。

二、分析导航控制器侧滑功能

效果：导航控制器默认自带了侧滑功能，当用户在界面的左边滑动的时候，就会有侧滑功能。

系统自带的侧滑效果：

2.gif

分析：

1.导航控制器的view自带了滑动手势，只不过手势的触发范围只能在左边。

2.当用户在界面左边拖动，就会触发滑动手势方法，并且有滑动返回功能，说明系统手势触发的方法已经实现了滑动返回功能。

3.为什么说系统手势触发的方法已经实现了滑动返回功能？

原因：

创建滑动手势对象的时候，需要绑定监听者，当触发手势的时候会调用target的action。

1

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:target action:action];

当用户在界面左边滑动，有滑动返回功能，这是因为触发手势了，调用target的action方法，说明action方法内部实现滑动返回功能，否则就不会有滑动返回效果。

三、实现全屏滑动功能分析

打印导航控制器自带的滑动手势，看下它的真实面目。

系统自带的滑动手势interactivePopGestureRecognizer

1

2

3

4

5

// self指向的导航控制器，在导航控制器的viewDidLoad方法打印

- (void)viewDidLoad {

    [super viewDidLoad];

    NSLog(@"%@",self.interactivePopGestureRecognizer);

}

打印结果图片：

blob.png

由图中可知：

1.系统自带的手势是UIScreenEdgePanGestureRecognizer类型对象,屏幕边缘滑动手势

3.系统自带手势target是_UINavigationInteractiveTransition类型的对象

4.target调用的action方法名叫handleNavigationTransition:

分析：

UIScreenEdgePanGestureRecognizer，看名称就知道，这个手势的范围只能在屏幕的周边，就是因为这个手势，系统自带的滑动效果，只能实现侧边滑动。

四、如何实现全屏滑动功能

给自己的导航控制器，添加一个全屏的滑动手势，调用系统自带滑动手势的target的action方法，利用系统实现的滑动返回功能，加上自己全屏滑动手势，就有全屏滑动功能了。

问题：如何拿到系统自带的target对象?，action方法名已经知道，而且系统肯定在target对象实现了，只要拿到target对象，调用这个方法就行。

通过打印系统自带的滑动手势的代理，发现正好是_UINavigationInteractiveTransition对象，因此我猜测这个代理对象就是target对象,只要拿到它，就拿到系统自带滑动手势的target对象。

1

2

    // 打印系统自带滑动手势的代理对象

    NSLog(@"%@",self.interactivePopGestureRecognizer.delegate);

打印图片：

blob.png

导航控制器全屏滑动注意点:

1.禁止系统自带滑动手势使用。

2.只有导航控制器的非根控制器才需要触发手势，使用手势代理，控制手势触发。

全屏滑动代码实现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

- (void)viewDidLoad {

    [super viewDidLoad];

    // 获取系统自带滑动手势的target对象

    id target = self.interactivePopGestureRecognizer.delegate;

    // 创建全屏滑动手势，调用系统自带滑动手势的target的action方法

    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:target action:@selector(handleNavigationTransition:)];

    // 设置手势代理，拦截手势触发

    pan.delegate = self;

    // 给导航控制器的view添加全屏滑动手势

    [self.view addGestureRecognizer:pan];

    // 禁止使用系统自带的滑动手势

    self.interactivePopGestureRecognizer.enabled = NO;

}

// 什么时候调用：每次触发手势之前都会询问下代理，是否触发。

// 作用：拦截手势触发

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer

{

    // 注意：只有非根控制器才有滑动返回功能，根控制器没有。

    // 判断导航控制器是否只有一个子控制器，如果只有一个子控制器，肯定是根控制器

    if (self.childViewControllers.count == 1) {

        // 表示用户在根控制器界面，就不需要触发滑动手势，

        return NO;

    }

    return YES;

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航