iOS中的转场研究

浏览数：17 / 时间：2015年06月11日

http://mikixiyou.iteye.com/blog/1745995

http://www.cocoachina.com/ios/20141113/10212.html

在iOS开发中，segue用来实现storyboard中源视图控制器和目标视图控制器连接，当segue被触发时，系统将完成下列操作：

1、实例化目标视图控制器
2、实例化一个新segue对象，该对象持有所有的信息
3、调用源视图控制器的prepareForSegue:sender:方法，
4、调用segue的 perform 方法将目标控制器带到屏幕上。这个动作行为依赖segue的类型如modal,push,custom.modal segue告诉源视图控制器present目标视图控制器。

在源视图控制器的prepareForSegue:sender:的方法中，执行任何必要的目标视图控制器的属性配置，包括委托设置（如目标视图控制器有协议）。

 

(miki西游 @mikixiyou 原文链接: http://mikixiyou.iteye.com/blog/1745995 )

在apple的文档库中第二个示例应用开发文档中，介绍了这样一个segue的使用例子。

在源视图控制器实现代码中，实现prepareForSegue:sender:方法

Objective-c代码  技术分享
  1. - (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender  
  2. {  
  3.     if ([[segue identifier] isEqualToString:@"ShowSightingsDetails"])  
  4.     {  
  5.         DetailViewController *detailViewController = [segue destinationViewController];  
  6.         detailViewController.sighting = [self.dataController objectInListAtIndex:[self.tableView indexPathForSelectedRow].row];  
  7.     }  
  8.    
  9.     if ([[segue identifier] isEqualToString:@"ShowAddSightingView"])  
  10.     {  
  11.         AddSightingViewController *addSightingViewController = [[[segue destinationViewController] viewControllers] objectAtIndex:0];  
  12.         addSightingViewController.delegate = self;  
  13.     }  
  14. }  

 

这个实现方法代码是用来处理在storyboard中配置的从主视图控制器到不同的两个视图控制器的segue。这两个segue通过它们的identifier属性进行判断。


在identifier为"ShowSightingsDetails"的segue中，目标视图控制器是一个展示明细信息的视图控制器,使用的segue类型为push。这种通常用于navigator视图控制器中。
当用户选择表视图中的一行时，segue发生。传输数据到目标视图控制器，使目标控制器上能显示sighting。

在identifier为"ShowAddSightingView"的segue中，目标视图控制器管理的是一个增加新的sighting信息的视图，我们称之为add视图控制器。它是不需要从主视图控制器（源）传什么数据过来的。但是，主视图控制器需要获取在add视图控制器（目标）上输入的数据。
实现方式是采用delegate，将主视图控制器设置为add视图控制器(目标)的委托。在目标视图控制器上执行它的委托中方法，该方法需要先在主视图控制器的实现代码中实现，方法包括如何读取add视图控制器的数据，并dismiss掉add视图控制器。

在add视图控制器上，有两个按钮，用于执行cancel和done操作。这两个按钮操作的方法在主视图控制器中实现。

Objective-c代码  技术分享
  1. - (void)addSightingViewControllerDidCancel:(AddSightingViewController *)controller  
  2. {  
  3. [self dismissViewControllerAnimated:YES completion:NULL];  
  4. }  
  5.   
  6.   
  7. - (void)addSightingViewControllerDidFinish:(AddSightingViewController *)controller name:(NSString *)name location:(NSString *)location {  
  8. if ([name length] || [location length]) {  
  9. [self.dataController addBirdSightingWithName:name location:location];  
  10. [[self tableView] reloadData];  
  11. }  
  12. [self dismissModalViewControllerAnimated:YES];  
  13. }  

 

在add视图控制器实现代码中，调用它的委托中这两个方法。


在storyboard中segue有三种类型，分别为modal segue、push segue、custom segue。


modal segue

是一个视图控制器（源）为了完成一个任务而模态地（modally）呈现另一个视图控制器（目标）。这个目标视图控制器不是导航视图控制器(navigation view controller)的栈中的一部分。
在任务完成后，使用delegate将呈现的视图控制器（目标）释放掉，应用界面切换到原来的视图控制器（源）上。

这个过程的实现代码可以看成是present和dismiss两个操作。

 

push segue
是将另一个视图控制器压入到导航控制器的栈中。它通常和导航视图控制器(navigation view controller)一起使用。
新压入的视图控制器会有一个回退按钮，可以退回来上一层。

这个过程的实现代码可以看成是push和pop两个操作。

 

 

 

 

技术分享

场景转换是iOS开发中最基本的需求。为了让自己的App更加的酷炫，我们往往需要定制一些转场效果。在iOS中，可以通过多种方式设定转场效果。这里简单列表如下：

Modal presentation

1. 设定ViewController的modalTransitionStyle属性。
这种方式也对应Storyboard中对应的segue transition的设置。这个属性是一个枚举类型，其值代表已经定制的几种转场风格。这种方式也是最简单的转场，不带有任何自定义的转场效果代码。

2. 使用UIView的animation API实现自定义的动画。
这种方式是比较常见实现方式。除了官方的文档以外，大量的Blog文章都会详细讲解这些API的用法。UIView的animation API的使用比较直观，相对来说也是一种比较容易学习的动画实现方式。

Navigation View Controller presentation

1. 使用UIView的animation API。
与Modal presentation相同，尽管在Storyboard中有专门为Navigation View Controller定制的Push segue（iOS8中被Show segue取代，因为后者支持iOS8中引进的Adaptive AutoLayout），但是Push segue并没有transtion属性，所以如果需要定制转场效果，可以使用UIVIew，使用方法和Modal presentation相同。

2. 使用CATransition类。
CATransition看起来更像为Navigation View Controller和TabBar View Controller这样的容器Controller定制的转场效果类。提供了很多内置的的动画效果。CATransition还可以结合CoreImage的滤镜CIFilter共同实现很炫的场景转换。若想详细了解CATransition的用法，可以读一读苹果的文档。

我们注意到，转场往往发生在流程切换的时候。所以上面的转场效果代码，往往会放在自定义的转场方法中（多见于使用Nib开发）或放在自定义的UIStoryboardSegue类中（多见于使用Storyboard开发）。所以很多时候，我们往往会碰到原生的转场方法与定制的动画效果有一定冲突。因为像presentViewController:animated:completion:这类方法本身就自带有内置的动画效果，自定义的动画效果往往在这个方法之外。所以很多时候需要用一些trick来避免这些问题。因此代码的可读性往往不会很好，并且写的不好的时候还会带来效率方面的问题。

iOS7以后，苹果引进了新的Transition API。这些API的使用方式，苹果没有给出一个官方的Guide，但是在网上，已经有很多Blog和教程讲解如何使用这些API，比如这篇文章。
新的Transition API完全改变了上面提到的动画与原生转场接口不兼容的问题。在新的API中，我们可以将动画效果代码单独封装到animator对象中，在设定好View Controller的transitoningDelegate后，再调用原生的转场方法，就会自动使用定制的动画效果。考虑到现在大部分App已经逐渐放弃了对iOS6的支持，所以这种方法是目前推荐的转场效果定制方法。单独封装的动画效果类在代码管理上也更加方便。

这里需要注意的一点，iOS6中引入的Storyboard Unwind Segue往往都需要一个Container View Controller。一个很常见的问题就是新手在定制Segue的时候往往会发生自定义的Unwind Segue不起作用。这个问题一般都是由于没有正确实现Container View Controller所需的方法带来的。

Storyboard中的转场

自iOS5引入Storyboard之后，iOS开发者在除了原有的Nib开发的基础上又有了新的方式来组织自己的UI和流程。Storyboard相对于传统的Nib，能够更加清晰的体现业务的流程，因此很受开发者欢迎。如今，很多教程都以Storyboard开发方式来讲解。而Storyboard中的Segue则是对转场流程的进一步封装。这个概念在Storyboard中至关重要，也是实现自定义转场的关键角色。

自定义Segue

自定义Segue的方式很简单，只要创建一个UIStoryboardSegue子类，并实现其perform方法即可。一个简单的实现如下：

01 - (void)perform 
02 {
03     // Modal presentation segue
04     UIViewController *fromController = self.sourceViewController;
05     UIViewController *toController = self.destinationViewController;
06  
07     [fromController presentViewController:toController animated:YES completion:^{
08         // Completion code here
09     }];
10 }

或者

1 - (void)perform 
2 {
3     // Navigation ViewController segue(Push segue, Show segue in iOS8).
4     UIViewController *fromController = self.sourceViewController;
5     UIViewController *toController = self.destinationViewController;
6  
7     [fromController.navigationController pushViewController:toController animated:YES];
8 }

自定义Unwind Segue

自定义Unwind Segue的方式与上面几乎完全一样，只不过调用的接口由presentViewController:animated:completion:和pushViewController:animated:换成dismissViewControllerAnimated:completion:和popToViewController:animated:。
但是Unwind Segue与普通的Segue有一个很大的不同，就是Unwind Segue的调用通常是由一个Container View Controller完成的。在iOS SDK的UIKit框架中，Navigation View Controller和TabBar View Controller都是常用的Container View Controller。

那么为什么Unwind Segue需要一个Container View Controllerl的支持？

这里就需要提一下Unwind Segue的设计初衷及其工作方式。之所以引入Unwind Segue，是为了应付任意跳转的情况，即从任意一个View Controller转场到特定的View Controller。在Nib的时代，这种工作往往通过delegate来完成。但是有了Unwind Segue以后，我们只要在需要跳转到的这个特定的View Controller类中实现一个签名为- (IBAction)unwindMethod:(UIStoryboardSegue *)segue这样的方法即可（其中unwindMethod可以替换为任何你喜欢的名称，但注意，当存在多个这样的方法时，名称不要相同，以免发生冲突，造成不可预料的后果）。这样，我们就可以在任意的View Controller（除了含有这个方法本身的View Controller）通过连接Segue来实现任意View Controller跳转到当前View Controller。不用再多写一行代码，这些都可以通过Interface Builder搞定，非常方便。

Unwind Segue的工作原理大致如下：

● 当我们通过UI事件或手动调用performSegueWithIdentifier:sender:方法触发一个Unwind Segue以后，首先UIKit会发送canPerformUnwindSegueAction:fromViewController:withSender:消息到sourceViewController询问是否处理UnwindSegue的action，由于sourceViewController不能处理（Unwind到自身没有意义），会返回NO

● UIKit然后会寻找sourceViewController的父Controller。如果sourceController是嵌入Navigation View Controller的子Controller，那么父Controller就是其navigationController

● 之后UIKit会发送viewControllerForUnwindSegueAction:fromViewController:withSender:消息给navigationController，询问能否找到一个负责处理此action的子Controller

● 在navigationController的默认viewControllerForUnwindSegueAction:fromViewController:withSender:实现中，navigationController会向自己的navigation栈上的所有子Controller发送● canPerformUnwindSegueAction:fromViewController:withSender:消息。UIViewController类中，该方法的默认实现会查看unwinde segue action定义是否存在（即上面提到的特定签名的方法是否存在，这个方法的内部实现可以留空），若存在就返回YES。

● 如果navigationController的viewControllerForUnwindSegueAction:fromViewController:withSender:方法返回nil，则不会触发任何Unwind Segue

● 如果navgationController找到一个子类可以处理Unwind Segue的action，那么UIKit会发送segueForUnwindingToViewController:fromViewController:identifier:消息给navigationController，此方法将返回一个实际执行定制转场的segue实例

● 调用sourceViewController上的prepareForSegue:sender:方法

● 调用由viewControllerForUnwindSegueAction:fromViewController:withSender:方法返回的destinationViewController中的Segue action方法

● 调用Unwind Segue实例中的perform方法

从上面的我们可以知道，Unwind Segue的正常工作必须要有一个Container View Controller作为所有流程View Controller的父Controller来管理整个流程。在上面的原理说明中，这个父Controller是Navigation View Controller。如果我们要实现一个自己的定义的Container，就必须给自定义的View Controller类实现一些上面提到过的方法：

● canPerformUnwindSegueAction:fromViewController:withSender:

● viewControllerForUnwindSegueAction:fromViewController:withSender:

● segueForUnwindingToViewController:fromViewController:identifier:

关于这些方法的说明和实现方式，下面就来详细讨论一下。

自定义Container

实现自定义的Container View Controller

我们一般会在子Controller中通过实现canPerformUnwindSegueAction:fromViewController:withSender:来决定要不要执行相应的Unwind Segue。
在自定义的容器中，我们必须实现viewControllerForUnwindSegueAction:fromViewController:withSender:和segueForUnwindingToViewController:fromViewController:identifier:方法。前一个方法用来决定那个View Controller来处理Unwind Segue action，后一个方法用来返回自定义的Unwind Segue实例。

使用Modal presentation时需要注意的情况

当我们使用UIViewController的presentViewController:animated:completion:方法以Modal presentation的方式来跳转场景的时候，情况与在Navigation View Controller有很大不同。首先，使用这种方式跳转场景的时候，跳转到的View Controller为Source View Controller的子Controller，而在Navigation View Controller中，所有的流程Controller基本上都是Navgation View Controller的子Controller，所以二者在View Controller的层次管理上有很多不同。因此实现Modal presentation风格的Segue的时候，动画的view不能搞错，必须对View Controller中的顶层View操作。一个参考实现如下（略掉动画效果代码，仅提供转场方法调用代码）:

Segue部分：

01 - (UIView *)findTopMostViewForViewController:(UIViewController *)viewController
02 {
03     UIView *theView = viewController.view;
04     UIViewController *parentViewController = viewController.parentViewController;
05     while (parentViewController != nil)
06     {
07         theView = parentViewController.view;
08         parentViewController = parentViewController.parentViewController;
09     }
10     return theView;
11 }
12  
13 - (void)perform
14 {
15     UIViewController *source = self.sourceViewController;
16     UIViewController *destination = self.destinationViewController;
17  
18     // Find the views that we will be animating. If the source or destination
19     // view controller sits inside a container view controller, then the view
20     // to animate will actually be that parent controller‘s view.
21     UIView *sourceView = [self findTopMostViewForViewController:source];
22     UIView *destinationView = [self findTopMostViewForViewController:destination];
23  
24     [source presentViewController:destination animated:NO completion:^{
25         // completion code here
26     }];
27 }

Unwind Segue部分：

01 - (UIView *)findTopMostViewForViewController:(UIViewController *)viewController
02 {
03     UIView *theView = viewController.view;
04     UIViewController *parentViewController = viewController.parentViewController;
05     while (parentViewController != nil)
06     {
07         theView = parentViewController.view;
08         parentViewController = parentViewController.parentViewController;
09     }
10     return theView;
11 }
12  
13 - (void)perform
14 {
15     UIViewController *source = self.sourceViewController;
16     UIViewController *destination = self.destinationViewController;
17  
18     // Find the views that we will be animating. If the source or destination
19     // view controller sits inside a container view controller, then the view
20     // to animate will actually be that parent controller‘s view.
21     UIView *sourceView = [self findTopMostViewForViewController:source];
22     UIView *destinationView = [self findTopMostViewForViewController:destination];
23  
24     [source dismissViewControllerAnimated:NO completion:^{
25         // completion code here
26     }];
27 }

注意：Modal Presentation的Unwind Segue很难实现无Bug的任意跳转，因为UIViewController中，跟Container View Controller相关的方法的默认实现并不能很好的定位Container View Controller。而以正确的方式重写这些方法并不容易。所以如果有任意跳转的需求，我们可以尝试自己实现一个简单的Container View Controller。

使用AddChildViewController API实现自己的Container View Controller

我们偶尔会希望有一个跟Navigation View Controller差不多的容器，但是又不希望像Navigation View Controller那么笨重，且限制多多。我们知道Navigation View Controller在Interface Builder中，其Navigation Bar能容纳的元素样式并不丰富，尽管大多数时候，我们能够通过UIAppearance来定制一些样式，但我们希望定制能容纳更加丰富的元素的Navigation Bar，或者其他定制的导航界面的时候，希望能够实现一个类似的容器。我们当然可以模仿Navigation View Controller的公开API实现一个差不多的东西，如果我们要很方便的使用自定义Segue和任意跳转的Unwind Segue的话，还需要以特定的方式实现上面提到的一些方法。UIViewController的addChildViewController:方法同样可以做出类似的功能，而且相比Modal presentation，这种方式代码更加直观。因为使用这个API实现的容器，对子Controller的管理方式与Navigation View Controller类似。

容器的部分代码如下：

01 - (UIViewController *)viewControllerForUnwindSegueAction:(SEL)action fromViewController:(UIViewController *)fromViewController withSender:(id)sender
02 {
03     for (UIViewController *childController in self.childViewControllers) {
04         if ([childController canPerformUnwindSegueAction:action fromViewController:fromViewController withSender:sender]) {
05             return childController;
06         }
07     }
08     return nil;
09 }
10  
11 - (UIStoryboardSegue *)segueForUnwindingToViewController:(UIViewController *)toViewController fromViewController:(UIViewController *)fromViewController identifier:(NSString *)identifier
12 {
13     UIStoryboardSegue *unwindSegue = [[MyLeftToRightUnwindSegue alloc] initWithIdentifier:identifier source:fromViewController destination:toViewController];
14     return unwindSegue;
15 }

Segue代码:

01 - (BOOL)controllerInStack:(UIViewController *)controller
02 {
03     UIViewController *fromController = self.sourceViewController;
04     UIViewController *containerController = fromController.parentViewController;
05  
06     for (UIViewController *childController in containerController.childViewControllers) {
07         if (childController == controller) {
08             return YES;
09         }
10     }
11     return NO;
12 }
13  
14 - (void)perform
15 {
16     // A simple transition.
17     // New scene slides in from right and old scene slides out to left.
18     UIViewController *fromController = self.sourceViewController;
19     UIViewController *toController = self.destinationViewController;
20  
21     UIViewController *parentController = fromController.parentViewController;
22  
23     UIView *containerView = parentController.view;
24  
25     [containerView addSubview:toController.view];
26  
27     CGRect initialFromRect = fromController.view.frame;
28     CGRect initialToRect = CGRectOffset(initialFromRect, initialFromRect.size.width, 0);
29     CGRect finalFromRect = CGRectOffset(initialFromRect, -initialFromRect.size.width, 0);
30     CGRect finalToRect = initialFromRect;
31  
32     toController.view.frame = initialToRect;
33     if (![self controllerInStack:toController]) {
34         // notify containment event.
35         [toController willMoveToParentViewController:parentController];
36     }
37  
38     [UIView animateWithDuration:0.4f animations:^{
39         fromController.view.frame = finalFromRect;
40         toController.view.frame = finalToRect;
41     } completion:^(BOOL finished) {
42         if (![self controllerInStack:toController]) {
43             // Add new controller as a child controller to the container view controller
44             [parentController addChildViewController:toController];
45             // notify containment event.
46             [toController didMoveToParentViewController:toController];
47         }
48         [fromController.view removeFromSuperview];
49     }];
50 }

Unwind Segue代码：

01 - (void)perform
02 {
03     // A simple transition.
04     // New scene slides in from left and old scene slides out to right.
05     UIViewController *fromController = self.sourceViewController;
06     UIViewController *toController = self.destinationViewController;
07  
08     UIViewController *parentController = fromController.parentViewController;
09  
10     UIView *containerView = parentController.view;
11  
12     [containerView addSubview:toController.view];
13  
14     CGRect initialFromRect = fromController.view.frame;
15     CGRect initialToRect = CGRectOffset(initialFromRect, -initialFromRect.size.width, 0);
16     CGRect finalFromRect = CGRectOffset(initialFromRect, initialFromRect.size.width, 0);
17     CGRect finalToRect = initialFromRect;
18  
19     toController.view.frame = initialToRect;
20  
21     [UIView animateWithDuration:0.4f animations:^{
22         fromController.view.frame = finalFromRect;
23         toController.view.frame = finalToRect;
24     } completion:^(BOOL finished) {
25         [fromController.view removeFromSuperview];
26     }];
27 }

当我们定义的Container View中有需要置顶的元素（比如定制的导航条）时，可以将addSubView:方法换成insertSubView:atIndex:方法来调整子视图的层次。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢