iOS 7 滑动返回那些事儿

2014/05/17 Wei

.entry-meta

.entry-header

在智能机越来越普及,屏幕越做越大的当下,滑动返回手势已经成为了一个应用的标配功能,甚至可以说,不能滑动返回是一种反人类的交互体验。

滑动返回现在大致有以下3种类型:

1 使用 UISwipeGestureRecognizer 实现,效果为用户在屏幕中向右轻扫手指,页面返回。

2 使用 UIPanGestureRecognizer 实现,效果为用户在屏幕中向右滑动手指,松开后页面返回。

3 使用 iOS 7 提供的滑动返回实现,效果为用户手指从屏幕外由左向右进入屏幕,松开后页面返回。

前两种实现方式是 iOS 7 推出之前的普遍做法,现在来看,已经过时且体验不佳,个人推荐使用第三种,优点如下:

• 良好的交互与动画效果

• 系统级的支持,实现简单,代码清晰

• 不会与一些屏幕内的手势产生冲突

虽然优点很明显,但是在使用过程中,还是会有一些值得我们注意的问题,接下来我们就一一解决它们。

1. 如何设置自定义的返回按钮图片?

如果我们的返回按钮不需要显示文字,或者显示的文字是固定的,可以做到图片中去,那么我推荐通过设置 iOS 7 新引入的 backIndicatorImage 来自定义返回按钮。代码如下:

Crayon Syntax Highlighter v2.6.4

UIImage *image = [UIImage imageNamed:@"nav_back_btn"];

[UINavigationBar appearance].backIndicatorImage = image;

[UINavigationBar appearance].backIndicatorTransitionMaskImage = image;

1

2

3

UIImage *image = [UIImage imageNamed:@"nav_back_btn"];

[UINavigationBar appearance].backIndicatorImage = image;

[UINavigationBar appearance].backIndicatorTransitionMaskImage = image;

[Format Time: 0.0036 seconds]

这样设置后会发现图片被渲染成 navigationBar 的 tintColor 的颜色了,要怎样才能显示出原始的图片颜色呢?还需要用到 iOS 7 中 UIImage 的一个新属性 renderingMode。 我们需要生成一张 renderingMode 为 UIImageRenderingModeAlwaysOriginal 的图片,让我们加上这行代码:

Crayon Syntax Highlighter v2.6.4

UIImage *image = [UIImage imageNamed:@"nav_back_btn"];

image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

[UINavigationBar appearance].backIndicatorImage = image;

[UINavigationBar appearance].backIndicatorTransitionMaskImage = image;

1

2

3

4

UIImage *image = [UIImage imageNamed:@"nav_back_btn"];

image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

[UINavigationBar appearance].backIndicatorImage = image;

[UINavigationBar appearance].backIndicatorTransitionMaskImage = image;

[Format Time: 0.0018 seconds]

这样我们的图片就能显示出原始的颜色了。

2. 使用 UIButton 自定义返回按钮后,如何使用系统的滑动返回?

当我们的返回按钮上需要显示不同的文字时,就不能使用 backIndicatorImage 了,我们要自定义一个 UIButton 来生成 UIBarButtonItem,再设置 navigationBar 的 leftBarButtonItem。而如果设置了 leftBarButtonItem 的话,会使系统的滑动返回失效。我们需要在 UIViewController 中加入这行代码

Crayon Syntax Highlighter v2.6.4

self.navigationController.interactivePopGestureRecognizer.delegate = self;

1

self.navigationController.interactivePopGestureRecognizer.delegate = self;

[Format Time: 0.0007 seconds]

运行起来一看,恩…可以滑动返回了。

3. 怎样让滑动返回像默认的效果一样容易触发?

玩了一会儿你发现,好像哪里不对劲,怎么不如之前容易触发了?

没错,当设置了 navigationController.interactivePopGestureRecognizer.delegate 后,虽然滑动返回恢复了,但是它却有点“残疾”,具体表现为两点:

1 手指滑动的角度必须要几乎水平,而正常的效果可以接受差不多30度的偏差,这在实际使用过程中的体验差别是非常巨大的。

2 如果 UIViewController 中是一个 UITableView 或者其他可滚动的 UIScrollView,那么在 UIScrollView 滚动的时候,是不能触发滑动返回的,而正常的效果是可以触发的。

那么,我们该怎样解决这两个问题呢?

我们差不多能猜到是因为手势冲突导致的,那我们就先让 ViewController 同时接受多个手势吧。加上代码:

Crayon Syntax Highlighter v2.6.4

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer

{

return YES;

}

1

2

3

4

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer

{

return YES;

}

[Format Time: 0.0013 seconds]

运行试一试,两个问题同时解决,不过又发现了新问题,手指在滑动的时候,被 pop 的 ViewController 中的 UIScrollView 会跟着一起滚动,这个效果看起来就很怪(知乎日报现在就是这样的效果),而且也不是原始的滑动返回应有的效果,那么就让我们继续用代码来解决吧。

Crayon Syntax Highlighter v2.6.4

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldBeRequiredToFailByGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer

{

return [gestureRecognizer isKindOfClass:UIScreenEdgePanGestureRecognizer.class];

}

1

2

3

4

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldBeRequiredToFailByGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer

{

return [gestureRecognizer isKindOfClass:UIScreenEdgePanGestureRecognizer.class];

}

[Format Time: 0.0014 seconds]

加上这段代码后,系统的 UIScreenEdgePanGestureRecognizer 就不会与其他的手势同时触发,从而解决了这个看起来有点奇怪的效果。

4. 其他若干小问题

让我们继续玩儿啊玩儿,还会遇到哪些问题呢?

1 当在 UINavigationController 的 rootViewController 中做一个会触发滑动返回的操作后,再点击某个会 pushViewController 的按钮时, UINavigationController 没有任何反应,而如果使用 home键 返回主屏,再进入应用的话,会发现已经 push 进刚才应该进入的 ViewController 了,这是因为在 UINavigationController 的 rootViewController 中触发了滑动返回导致的,我们只要判断一下当前 ViewController 是否是 rootViewController,然后在 - gestureRecognizerShouldBegin: 中返回就可以了。

2 如果我们在 pushViewController 的动画过程中触发滑动返回,会导致闪退,处理方式也很简单,在 push 之后禁用 interactivePopGestureRecognizer, 在 ViewController 显示之后恢复 interactivePopGestureRecognizer 就可以了。我使用了 swizzling 方式在 Category 中统一处理。

3 `

我将一份 Demo 放到了 Github 上,欢迎大家下载。

iOS7-NavigationController-Sample

iOS 如何设置导航的滑动返回手势, 和系统饿一样的更多相关文章

  1. 【转】iOS中设置导航栏标题的字体颜色和大小

    原文网址:http://www.360doc.com/content/15/0417/11/20919452_463847404.shtml iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参 ...

  2. iOS中设置导航栏标题的字体颜色和大小

    iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参考下. 在平时开发项目的时候,难免会遇到修改导航栏字体大小和颜色的需求,一般使用自定义视图的方法,其实还存在一种方法. 方法一:(自定义视图的 ...

  3. iOS学习——更改导航栏的返回按钮的标题与颜色

    转载自:修改navigationController返回按钮颜色和文字 今天在做项目时遇到这个问题,试了很多方法都失败了.最后终于找到正确的方案了,在这里分享给大家. 引言 在iOS开发过程中,Nav ...

  4. iOS如何把导航默认的返回按钮设置成“返回”

    版权声明:本CSDN博客所有文章不更新,请关注标哥博客:http://www.henishuo.com/ - (void)addBackItemWithAction:(SEL)action { if  ...

  5. iOS viewController添加导航条以及返回跳转选择

    给单独的viewcontroller或者在Appdelegate的主页面添加导航条,只要在viewcontroller上添加navigationcontroller,在添加此navigationcon ...

  6. iOS 8 设置导航栏的背景颜色和背景图片

    假设是storyboard 直接embed一个导航栏.然后在新出现的导航栏 选属性 选一下颜色就能够了 代码实现背景颜色改动:self.navigationController.navigationB ...

  7. iOS 自定义返回按钮,保留系统滑动返回

    原文链接 自定义返回按钮保留系统滑动返回手势.gif 1.简介 使用苹果手机,最喜欢的就是用它的滑动返回.作为一个开发者,我们在编写很多页面的时候,总是会因为这样那样的原因使得系统的滑动返回不可用.使 ...

  8. iOS开发UINavigation——导航控制器UINavigationController

    iOS开发UINavigation系列一——导航栏UINavigtionBar摘要iOS中的导航条可以附着于导航控制器之中使用,也可以在controller中单独使用,这篇博客,主要讨论有关导航栏的使 ...

  9. OC导航栏自定义返回按钮

    [iOS]让我们一次性解决导航栏的所有问题 在默认情况下,导航栏返回按钮长这个样子   导航栏默认返回按钮 导航栏左上角的返回按钮,其文本默认为上一个ViewController的标题,如果上一个Vi ...

随机推荐

  1. JavaScript 作用域知识点梳理

    JavaScript的作用域一直以来是前端开发中难以理解的知识点,对于JavaScript的作用域主要记住几句话. 一.“JavaScript” 中无块级作用域 在   Java 或 C# 中存在块级 ...

  2. C++迪杰斯特拉算法求最短路径

    一:算法历史 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中最短路径问题.迪杰斯特拉算法主要特点是以 ...

  3. JSP页面以及JSP九大隐式对象

    €JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. €JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比 ...

  4. Filter 数组过滤函数精解示例

    '************************************************************************* '**模 块 名:Filter 数组过滤函数精解示 ...

  5. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  6. ASP.NET跨平台实践:无需安装Mono的Jexus“独立版”

    在Linux上运行ASP.NET网站或WebApi的传统步骤是,先安装libgdiplus,再安装mono,然后安装Jexus.在这个过程中,虽然安装Jexus是挺简便的一件事,但是安装mono就相对 ...

  7. 使用 OWIN Self-Host ASP.NET Web API 2

    Open Web Interface for .NET (OWIN)在Web服务器和Web应用程序之间建立一个抽象层.OWIN将网页应用程序从网页服务器分离出来,然后将应用程序托管于OWIN的程序而离 ...

  8. 【整理】待毕业.Net码农就业求职储备

    声明:本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用.当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些针对性的准备也是不错的.此外,除了技术 ...

  9. 微冷的雨之Java中的多线程初理解(一)

    在讲解多线程前,我们必须理解什么是多线程?而且很多人都会将进程和线程做对比. 进程和线程 进程:进程是操作系统结构的基础,是一次程序的执行,是一个程序及其数据在处理机上顺序执行时所发生的活动,是程序在 ...

  10. 《Entity Framework 6 Recipes》中文翻译系列 (21) -----第四章 ASP.NET MVC中使用实体框架之在页面中创建查询和使用ASP.NET URL路由过虑

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 4.2. 构建一个搜索查询 搜索数据是几乎所有应用的一个基本功能.它一般是动态的,因 ...