StoryBoard概览

绪论

storyboard，直译的话就是“故事板”。什么是故事呢？简单来说，故事由人物和情节构成，告诉我们什么人干了什么事。没错，storyboard也是由人物（viewcontroller）和情节（Segue）构成，向我们展示了一个app的运行流程。

（0-1）

通过storyboard，我们可以清楚的掌握整个app的流程。在项目中，我们也可以通过storyboard快速的做出app的雏形，便于展示和修改。

如图0-1所示，（1）这种箭头指向的控制器表示初始控制器，即第一个显示的控制器。可以通过点击viewController，勾选is initial view controller，将相应的viewController设置为初始控制器。如图0-2所示。

ps：一个storyboard只能有一个initial view controller。

（0-2）

（3）和（5）这种箭头，就是我们的“情节”（也就是Segue），它表示“从一个视图切换为另一个视图”这个动作。

首先，一个Segue有一个identifier属性，该属性为NSString类型，表示Segue的名字。（当我们新建一个Segue的时候，默认identifier为nil，需要手动设置。）其次，一个Segue有一个源控制器（sourceViewController）和一个终点控制器（destinationViewController）。拿（5）来说，sourceViewController就是（4），而destinationViewController就是（6）。最后，Segue一般有三种类型，关于不同类型之间有什么区别，我们下边再说。

------------------------------

下面，我们通过实践来深入了解storyboard。（例子简单，不实用，主要是为了突出各种api的使用方法）

 

一 在empty Application下使用storyboard

1>新建一个empty Application。

2>建立一个storyboard。

3>拖一个viewController到storyboard。（随意拖一个控制器就好）

4>点击项目->点击TARGETS->在Main StoryBoard下拉框中选择步骤2中建立的storyboard。（如图1-1）

（1-1）

5>删除AppDelegate.m中- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions方法下的语句，只留return YES；ps：不要把AppDelegate.h中的windows属性删除。大家可以试一试删除之后的效果。

6> run

 

二 在storyboard中建立segue并尝试跳转

大体有两种跳转方式，button-to-viewcontroller 和 viewcontroller-to-viewcontroller。下面分别介绍。

viewcontroller-to-viewcontroller

1>在storyboard中拖两个viewController。

2>如图2-1所示，

点击红色viewController，（注意，确定点击的是viewController而不是viewController下的view）并按住右键，这时会出来一根蓝色的线，拖至绿色viewController下方开右键。这时会出现图2-2，在这里，我们选择中间的modal。也可以通过图2-3的方式建立segue。

(2-2)(2-3)

 

3>在图2-4的位置选择刚刚建立好的segue，在图2-5的位置，为其命名。

(2-4)(2-5)

 

4>这样，我们就建立了一个segue，接下来，我们便要思考，怎么才能执行这个segue。我们的方案是双击红色viewcontroller来进行跳转。要实现这个功能，我们则必须实现红色viewcontroller的相应事件方法。所以接下来我们看看怎么给storyboard中的控制器定制代码。

首先，我们需要新建一个UIViewController的子类（图中viewControllerRed），并将其与storyboard中相应的控制器绑定。绑定方法如图（2-6）

（2-6）

注意：绑定是必须的步骤。

之后，在ViewControllerRed.m中添加下面代码，用于双击跳转。

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *t = (UITouch *)[touches anyObject];
    if(t.tapCount == 2)
        [self performSegueWithIdentifier:@"toGreen" sender:self];
}

5>run

 

button-to-viewcontroller

接下来，我们试一试第二种跳转方式。

1>和上面的步骤大体相同。在红色控制器上添加一个button，以button为起点连接到绿色控制器，建立segue。

2>run，可以通过单击button执行跳转，无需写代码。

两种跳转方式的区别

可以粗略的理解为显式调用和隐式调用。

在显式调用中，我们使用- (void)performSegueWithIdentifier:(NSString *)identifier sender:(id)sender 进行跳转。好处便是，我们可以控制跳转，我们可以设置一些if-else语句来达到我们想要的目的，例如文本框为空的时候不跳转之类。

而在隐式跳转中，我们点击button，便会自动跳转。那怎么控制跳转呢？我们可以通过重写- (BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender来达到目的。

这个方法如果返回no，所有隐式跳转都不会执行（只是隐式跳转，显式跳转不会受其影响）。默认是返回yes的。

利用这个方法，我们可以控制跳转。例如，我们要屏蔽某个button执行跳转，可以这样写。

-(BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender
{
    if([identifier isEqualToString:@"buttonToViewControllerGreen"])
        return NO;
   else
       return YES;
}

-------------------------------分界线------------------------------

为了满足自己的求知欲，对这两种调用做了一些调试，让我们来看看显式跳转和隐式到底是什么。

直接上图。

 

结论：

一 两种跳转方法，最终都是调用了才执行跳转。

二 区别是，在调用的堆栈中，隐式调用多了一个。（也有可能是直接把这个方法作为button的action）而也正是这个方法，才导致shouldPerformSegueWithIdentifier被调用。

三 使用不同类型的segue

如图（2-2），当我们见了一个segue的时候，有大体三种segue供我们选择。

如果我们在不同的segue下做调试，我们便会发现，segue的实质不过是封装了各种跳转罢了。

modal，实质上是调用UIViewController的persentModalViewController进行跳转。而push则是调用了UINavigationViewController的pushViewController进行跳转（这也是该类型的segue需要sourceViewController为Navigation的原因）。所以，我们可以自定义任何我们需要的跳转类型，这也正是custom类型的正确用法，即，通过继承UIStoryboardSegue类，实现自定义跳转。

ps：（iphone下）关于segue的类型，我一直说是大体有三种，这是因为不止有三种。当我们拿一个tabBarViewController来做源控制器的时候，我们建立segue，可以发现一个新segue类型，名为 View Controller。关于这种类型，我不确定它到底是不是一个segue。首先，我们不可以为其定义id（这意味着我们不能执行显式跳转）。其次，在断点调试下，它并没有调用任何与segue相关的方法。所以我推测，这个类型的segue，可能是由tabBarViewController定义，而非UIStoryBoardSegueTemplate定义。

四 在viewController间传递数据

传递数据的话，使用- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender 是再正确不过的办法。

通过参数segue，我们可以轻松获得两边的控制器。并在该方法下实现数据传递。

五 围观ios6新增功能

就是这个。光标移过去会出现Exit字样。

 

在说UnwindSegue之前，先来说说ios5下storyboard的一种情况。

事情是这样的，将一个TableViewController作为一个NavigationController的根控制器，tableViewController使用modal类型的segue打开一个新的ViewControlller。怎么关闭这个ViewController，返回到TableViewController？

这种情况在ios5下，是必须要用代码来关闭的。

代码如下：

[[self presentingViewController] dismissViewControllerAnimated:YES completion:nil];

 

我曾经企图通过新建segue来跳回去，虽然是跳回去了，但TableViewController上面的导航栏不见了。这是因为modal类型的segue的实质就是调用了persentModalViewController来呈现一个控制器，我希望跳转到的TableViewController是由NavigationController呈现的，而通过segue来跳转，跳转去的TableViewController却是由这个新的ViewController呈现的。所以这个TableViewController并不是原来的那个TableViewController。

 

到了ios6，UnwindSegue可以解决这种尴尬的情况。

严格来说使用segue进行的并不能叫“跳转”而是“呈现”，使用UnwindSegue才是真正的跳转，它可以使你跳转到任意一个控制器。

（断点调试了一下，UnwindSegue应该把ios5中用于返回的代码进行了复杂的封装。但原理是一样的。即：storyboard实现任何场景的过度，都是对UIViewController类中相关方法的调用与封装）

 

好了，现在来看看怎么用UnwindSegue，初步的使用很简单。

1>在你希望跳转的控制器的.m文件中，实现该方法。-(IBAction)anyThing:(UIStoryboardSegue *)segue （我们也可以在这个方法里传递数据）

2>Product->Build。（我是这么做的）到storyboard面板，选择该控制器，右键控制器下那个绿的图标。会发现我们刚刚实现的那个方法。

3>以该方法为起点，和你希望触发跳转的控件做连线。

4>run