IOS开发－使用Storyboard进行界面跳转及传值

前言：苹果官方是推荐我们将所有的UI都使用Storyboard去搭建，Storyboard也是一个很成熟的工具了。使用Storyboard去搭建所有界面，我们可以很迅捷地搭建出复杂的界面，也就是说能为我们节省大量的时间。我们还可以很直观地看出各个界面之间的关系，修改起来也很方便。将来如果遇到需要作修改的地方，我们只需要找到相对应的Storyboard就可以了，比起以前来说，快捷了不少。

我会在本文的最后附上Demo，可以帮助你们有更直观的理解，有需要的人可以去下载运行一下。

另外，建议大家实验每一种方法时，先清空界面上的内容，以避免出现错误。因为初学者很容易使得界面上有残留，具体的这里就不说明了。接下来，让开始我们的Storyboard之旅吧！

目录：

一、使用Storyboard进行跳转

1）纯Storybard界面操作

2）使用代码进行跳转

二、Storyboard界面传值

1）使用prepareForSegue方法进行跳转：

2）Storyboard Id跳转

一、使用Storyboard进行跳转

1）纯Storyboard界面操作

我们在Storyboard上放置一个按扭，在按扭上方点击并按住“右键”不放，拖动到跳转的下一个界面上。

松开右键后，会有一个黑色透明的弹出框，选择跳转的方式:

从这里可以看到，界面和界面之间多了一条线连接，如下图：

我们可以在Xcode右边的工具栏看到，我们刚刚的连线操作（现在可以运行项目了）：

2）使用代码进行跳转

我们把刚刚的连线删除掉，如下图所示：

新建一个继承于UIViewController的类CodeViewController：

选中按扭所在的界面，设置它的类文件，默认都是继承于UIViewController，如下图所示：

我们把它改成刚刚新建的类“CodeViewController”，如下图所示：

把界面缩小（你可以在空白的地方双击一下，或者右键选择缩放比例），这次我们不是直接使用“按扭”连接界面，而是进行界面和界面之间的连线，如下图所示：

注意：100％的缩放是不能进行界面和界面之间的连线！

之后的操作和前面的一致，为了容易理解，我还是贴一下图：

选中“这条线”，在Storyboard Segue的Identifier指定一个标识符，后面我们会用到：

这时我们需要为按扭添加一个事件，为此需要同时显示Storyboard和.m文件，操作如下：

创建事件的操作和之前连线的操作一样：

为这个事件创建一个名字，然后点击Connect：

在事件里添加如下代码，把刚连线的Identifier传进去，sender一般为"self"：

[<span class="keyword" style="font-weight: bold;">self</span> <span class="symbol" style="color: rgb(153, 0, 115);">performSegueWithIdentifier:</span><span style="color: rgb(128, 0, 0);">@<span class="string" style="color: rgb(221, 17, 68);">"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">EasyCode</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="symbol" style="color: rgb(153, 0, 115);">sender:</span><span class="keyword" style="font-weight: bold;">self</span>];

这样，就可以成功跳转了。

二、Storyboard界面传值

1）使用prepareForSegue方法进行跳转：

我们创建两个类，PrepareViewController和ReceiveViewController

然后在Storyboard上新建两个ViewController，把两个界面连接起来。操作步骤和上方（代码跳转）的相同，这次我们把连线的Identifier定义为“SendValue”：

有按扭的界面的类设置为PrepareViewController，如下图所示：

选择第二个界面，设置继承的类为ReceiveViewController：

ReceiveViewController.h：

<span style="color: rgb(0, 0, 255);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">#import</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"> <UIKit/UIKit.h></span><span style="color: rgb(0, 0, 255);"><span class="variable" style="color: rgb(0, 128, 128);">@interface</span></span><span style="color: rgb(0, 0, 0);"> ReceiveViewController : UIViewController<span class="variable" style="color: rgb(0, 128, 128);">@property</span> (strong, nonatomic) NSString </span><span class="variable" style="color: rgb(0, 128, 128);">*<span style="color: rgb(0, 0, 0);">name</span></span><span style="color: rgb(0, 0, 0);">;<span class="variable" style="color: rgb(0, 128, 128);">@property</span> (assign, nonatomic) </span><span style="color: rgb(0, 0, 255);"><span class="keyword" style="color: rgb(51, 51, 51); font-weight: bold;">int</span></span><span style="color: rgb(0, 0, 0);"> age;</span><span style="color: rgb(0, 0, 255);"><span class="variable" style="color: rgb(0, 128, 128);">@end</span></span>

ReceiveViewController.m，当然是要输出一下啦，不然怎么知道传值有没有成功：

<span style="color: rgb(0, 0, 255);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">#import</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"> <span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">ReceiveViewController.h</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 255);"><span class="variable" style="color: rgb(0, 128, 128);">@interface</span></span><span style="color: rgb(0, 0, 0);"> ReceiveViewController ()</span><span style="color: rgb(0, 0, 255);"><span class="variable" style="color: rgb(0, 128, 128);">@end</span></span><span style="color: rgb(0, 0, 255);"><span class="variable" style="color: rgb(0, 128, 128);">@implementation</span></span><span style="color: rgb(0, 0, 0);"> ReceiveViewController</span>- (<span style="color: rgb(0, 0, 255);">void</span><span style="color: rgb(0, 0, 0);">)viewDidLoad {<span class="indent">  </span>[super viewDidLoad];<span class="indent">  </span>NSLog(</span><span style="color: rgb(128, 0, 0);"><span class="variable" style="color: rgb(0, 128, 128);">@"</span></span><span style="color: rgb(128, 0, 0);">name is <span class="variable" style="color: rgb(0, 128, 128);">%@</span>, age is <span class="variable" style="color: rgb(0, 128, 128);">%d</span></span><span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(0, 0, 0);">, _name, _age);}</span><span style="color: rgb(0, 0, 255);"><span class="variable" style="color: rgb(0, 128, 128);">@end</span></span></span>

PrepareViewController.m文件：

<span style="color: rgb(0, 0, 255);"><span class="preprocessor" style="color: rgb(153, 153, 153); font-weight: bold;">#import</span></span><span class="preprocessor" style="color: rgb(153, 153, 153); font-weight: bold;"> <span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">PrepareViewController.h</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 255);"><span class="preprocessor" style="color: rgb(153, 153, 153); font-weight: bold;">#import</span></span><span class="preprocessor" style="color: rgb(153, 153, 153); font-weight: bold;"> <span style="color: rgb(128, 0, 0);">"</span><span style="color: rgb(128, 0, 0);">ReceiveViewController.h</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 255);">@<span class="keyword" style="color: rgb(51, 51, 51); font-weight: bold;">interface</span></span><span style="color: rgb(0, 0, 0);"> PrepareViewController ()</span><span style="color: rgb(0, 0, 255);">@end</span><span style="color: rgb(0, 0, 255);">@implementation</span><span style="color: rgb(0, 0, 0);"> PrepareViewController</span>- (IBAction)goAction:(<span style="color: rgb(0, 0, 255);">id</span><span style="color: rgb(0, 0, 0);">)sender{<span class="indent">  </span></span><span style="color: rgb(0, 128, 0);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"><span style="color: rgb(0, 128, 0);"> 根据指定线的ID跳转到目标Vc</span></span><span style="color: rgb(0, 128, 0);"></span><span class="indent">  </span>[self performSegueWithIdentifier:<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">@"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">SendValue</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 0);"> sender:self];}</span>- (<span style="color: rgb(0, 0, 255);"><span class="keyword" style="color: rgb(51, 51, 51); font-weight: bold;">void</span></span>)prepareForSegue:(UIStoryboardSegue *)segue sender:(<span style="color: rgb(0, 0, 255);">id</span><span style="color: rgb(0, 0, 0);">)sender {<span class="indent">  </span></span><span style="color: rgb(0, 128, 0);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"><span style="color: rgb(0, 128, 0);"> segue.identifier：获取连线的ID</span></span><span style="color: rgb(0, 128, 0);"></span><span class="indent">  </span><span style="color: rgb(0, 0, 255);"><span class="keyword" style="color: rgb(51, 51, 51); font-weight: bold;">if</span></span> ([segue.identifier isEqualToString:<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">@"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">SendValue</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 0);">]) {<span class="indent">  </span><span class="indent">  </span></span><span style="color: rgb(0, 128, 0);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"><span style="color: rgb(0, 128, 0);"> segue.destinationViewController：获取连线时所指的界面（VC）</span></span><span style="color: rgb(0, 128, 0);"></span><span class="indent">  </span><span class="indent">  </span>ReceiveViewController *receive =<span style="color: rgb(0, 0, 0);"> segue.destinationViewController;<span class="indent">  </span><span class="indent">  </span>receive.name </span>= <span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">@"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">Garvey</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 0);">;<span class="indent">  </span><span class="indent">  </span>receive.age </span>= <span style="color: rgb(128, 0, 128);"><span class="number" style="color: rgb(0, 153, 153);">110</span></span><span style="color: rgb(0, 0, 0);">;<span class="indent">  </span><span class="indent">  </span></span><span style="color: rgb(0, 128, 0);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"><span style="color: rgb(0, 128, 0);"> 这里不需要指定跳转了，因为在按扭的事件里已经有跳转的代码</span></span><span style="color: rgb(0, 128, 0);"></span><span style="color: rgb(0, 128, 0);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"><span style="color: rgb(0, 128, 0);">[self.navigationController pushViewController:receive animated:YES];</span></span><span style="color: rgb(0, 128, 0);"></span><span style="color: rgb(0, 0, 0);"><span class="indent">  </span>}}</span><span style="color: rgb(0, 0, 255);">@end</span>

可以成功接收到值啦（大功告成）：

2）Storyboard Id跳转

继续拖两个纯净的界面（VC）到Storyboard上，第一个界面也是放上一个UIButton：

IdViewController是我刚新建出来的类，接收值的界面用回ReceiveViewController类，指定界面继承的类为（IdViewController、ReceiveViewController）

第二个界面设置Storyboard id为“IdReceive”，后面跳转会用到：

IdViewController.m

- (IBAction)action:(<span style="color: rgb(0, 0, 255);">id</span><span style="color: rgb(0, 0, 0);">)sender{<span class="indent">  </span></span><span style="color: rgb(0, 128, 0);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"><span style="color: rgb(0, 128, 0);"> 获取指定的Storyboard，name填写Storyboard的文件名</span></span><span style="color: rgb(0, 128, 0);"></span><span class="indent">  </span>UIStoryboard *storyboard = [UIStoryboard storyboardWithName:<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">@"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">Main</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 0);"> bundle:nil];<span class="indent">  </span></span><span style="color: rgb(0, 128, 0);"><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;">//</span></span><span class="comment" style="color: rgb(153, 153, 136); font-style: italic;"><span style="color: rgb(0, 128, 0);"> 从Storyboard上按照identifier获取指定的界面（VC），identifier必须是唯一的</span></span><span style="color: rgb(0, 128, 0);"></span><span class="indent">  </span>ReceiveViewController *receive = [storyboard instantiateViewControllerWithIdentifier:<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">@"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">IdReceive</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 0);">];<span class="indent">  </span>receive.name </span>= <span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">@"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">GC</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 0);">;<span class="indent">  </span>receive.age </span>= <span style="color: rgb(128, 0, 128);"><span class="number" style="color: rgb(0, 153, 153);">10</span></span><span style="color: rgb(0, 0, 0);">;<span class="indent">  </span>[self.navigationController pushViewController:receive animated:YES];}</span>

可以运行程序了，能够成功接收到值，成功！

小结：你们能否看出各个方法的优点和缺点？现在没发现不要紧，当你们以后遇上真正需要的时候，优缺点就很容易知道了，这也算是留给你们思考的一件事情吧。

题外话：

有部分人是不同意使用Storyboard的，他们的的观点如下：

1）Storyboard出现的错误不能调试，往往使得他们开发缓慢

2）对于多人开发，版本管理会比较复杂

3）Storyboard经常无缘无故出现问题！使得他们很头痛！

首先，对于第1点和第3点的回答：Storyboard出现的错误往往是可以避免的。其次，Storyboard不会无缘无故出现问题，如果真的出现问题了，往往是开发者的操作不当成造成的。我为什么这样说？

因为我以前也遇到很多因Storyboard引起的错误，那时候的我也经常怨Storyboard。但随着对Storyboard越来越熟悉后，我才发现，以前全都是因为自己操作不当，而造成程序的崩溃。

第2点：多人开发，可以区分模块开发，每个人负责的模块都不相同，不一定要所有人的都开发同一个模块。当然，有特殊情况的我也不知道，所以说这个需要根据项目的大小和复杂度去判定的。