关于iOS App右滑返回的实现和思考

Posted on   |   In

问题背景

当下大部分iOS的app都支持右滑返回功能，随着大屏时代的到来，app右滑返回成为一个用户体验较好的功能，受到一部分手小屏大用户的青睐。

思考预研

  • 站在用户体验的角度考虑，由于iOS设备无实体返回键，而Home键由于其集成多而强大的功能无法兼顾返回到上一页面这一功能需求，原始的页面返回方式是点击左上方返回键，这让屏幕大于4.0inch以上的设备返回操作不甚方便，用户体验不佳；
  • 一些应用针对性开发了次级页面滚动到底部时下拉返回，如知乎日报、新浪体育等。这要求用户需要下滑到最底部才能返回到上一页面，也不能真正意义上解决问题。
  • 系统方法的支持：自iOS7开始，系统为UINavigationController添加 interactivePopGestureRecognizer属性，支持了边缘触发的右滑返回功能。然而，这一实现方法也有不尽如人意的地方，只能边缘触发导致一些用户在特定场合（如公交车上、地铁上、单手操作……）使用大屏时仍遇到无法触发的尴尬，不甚完美。
  • 强大的开发者们创造了次级页面全屏任意位置触发右滑返回功能的实现，这让iOS的返回操作顺畅而神奇，彻底解决了“够不到”的问题。但是，误操作的问题也随之而来，这又使得这一解决方案为部分人所诟病。

实现流程

系统的方法在一定的应用场景上很实用，其对应的也就是相对简单实现。全屏触发方法的主流实现方案有两种，这里作具体的介绍和说明。

1.边缘触发的系统方法

使用系统方法，只需要将创建的UIBarButtonItem设置为self.navigationItem.backBarButtonItem即可。

1
2
3
4
5
6

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] init];

barButtonItem.title = @"返回";

self.navigationItem.backBarButtonItem = barButtonItem;

2.全屏触发的自定义方法

2.1 自定义所有控制器的父类，在全屏范围内添加右滑手势，触发返回事件。

在viewDidLoad中，创建UIPanGestureRecognizer，并添加到导航栏控制器上。

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
26
27
28
29
30
31
32
33
34

- (void) viewDidLoad {

    [super viewDidLoad];



    //1.获取系统interactivePopGestureRecognizer对象的target对象

    id target = self.navigationController.interactivePopGestureRecognizer.delegate;



    //2.创建滑动手势，taregt设置interactivePopGestureRecognizer的target，所以当界面滑动的时候就会自动调用target的action方法。

    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] init];

    [pan addTarget:target action:NSSelectorFromString(@"handleNavigationTransition:")];

    pan.delegate = self;



    //3.添加到导航控制器的视图上

    [self.navigationController.view addGestureRecognizer:pan];



    //4.禁用系统的滑动手势

    self.navigationController.interactivePopGestureRecognizer.enabled = NO;

}

在滑动开始的触发事件中控制除了根视图控制器以外的所有控制器执行右滑事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20



#pragma mark - 滑动开始触发事件

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {

    //只有导航的根控制器不需要右滑的返回的功能。

    if (self.navigationController.viewControllers.count <= 1) {

        return NO;

    }



    return YES;

}

这种实现方法在一定程度上解决了问题，但有局限性。一是其触发是在所有次级控制器上作用，若部分控制器不需要该功能无法取消手势；二是在实际应用中可能导致手势冲突或因手指右滑停止而再返回原页面而引起错误或崩溃，故此方法不推荐。

2.2 从底层入手，创建一个UINavigationController的分类（category）,从根本上解决右滑返回的问题。

这一成果来自Github上forkingdog的开源项目。使用方法很简单，只需在你的项目中导入UINavigationController+FDFullscreenPopGesture这一分类，编译通过后即可实现全屏幕的右滑返回，若需在某一个页面取消事件，只需要引入UINavigationController+FDFullscreenPopGesture.h文件，然后在viewDidLoad方法中设置self.navigationController.fd_fullscreenPopGestureRecognizer.enabled = NO,并在上一个页面的viewWillAppear方法中设置self.navigationController.fd_fullscreenPopGestureRecognizer.enabled = YES,就可自如地控制各个页面的右滑返回效果实现与否。这一方法稳定而简便地解决了问题。

感谢无私的开源精神和伟大的开发者们！

总结

在应该采用系统方法防止误操作还是应该采用全屏触发的自定义方法这一问题的看法上是有一些争论的，孰优孰劣暂无定论。笔者认为应视产品需求和应用场景而定，而不能以偏概全或者只肯定其一。从用户的角度出发，我们不难发现，同属于腾讯旗下产品的QQ和微信就是这一操作采用两种截然不同实现方式的体现，前者是全屏触发的自定义右滑操作，后者是边缘触发的系统方法实现的右滑操作。同一家公司的同类型产品尚有结合产品自身考虑形成两种独立风格，这应该能说明一些问题。建议开发者和PM在对产品清晰定位的基础上再行定下策略，以期实现既符合产品需求又符合良好用户体验要求的效果。