Storyboard（分镜or故事板）一词源于电影业，在漫画创作中也很常见，它在电影或者漫画创作中扮演着“诠释者”的角色，主要是对作品中的各种事件进行描述，比如它们的发生顺序、观察角度、相互之间的关联等等。
苹果自iOS5开始推出了开发领域的Storyboard，并建议UI开发使用，旨在代替历史悠久的历史悠久的NIB/XIB。以往的XIB的使用方法是一个viewController对应一个nib文件。StoryBoard的最大作用就是把这些nib文件组织起来，放在一个文件——MainStoryBoard.storyboard里，同时在此文件里面提供了不同试图间的切换。
虽然Storyboard的出现极大地提升了UI开发的效率且降低了开发难度，但需要注意的一点就是，我建议Storyboard与代码相结合的方式来做UI开发，具体为什么，大家在亲身实践过之后自然会明白。
相关链接：
《iOS开发之美》节选： 谈谈 xib 与 storyboard的关系
初识Storyboard
在最新版的Xcode7当中，项目新建时已经没有了原来的Empty Application（空应用），初学iOS的话，默认的最简单的模板是默认采用Storyboard开发的，所以Storyboard的使用势在必行，具体的介绍或者一些简单的用法网上很多，可以自行Google。
Storyboard实现页面跳转
网上去搜“Storyboard实现页面跳转”教程一大把，图文并茂甚是清楚，能够完成相应的功能，但是，按照图片做完这些步骤，虽然实现了功能，但是还是不明白Storyboard具体的实现机制。
首先我们要明白的是，虽然在Storyboard中我们只需要通过简单的拖拉就可以将很多元素集成到我们的界面当中去，但是我们还需要将它们进行关联。这才是问题的关键所在。我们可以往Storyboard中添加ViewController，通过ViewController来管理界面，可是拖进来一个ViewController之后我们要在哪里写代码来控制这个ViewController呢？我们又该编写什么样的代码来实现相应的功能呢？这才是问题的关键所在。
Storyboard与ViewController的关联开始
那么，就从Storyboard与ViewController的关联开始。
新建一个名为“learnStoryboard”的项目，为了以后演示方便，我们先取消它默认的视窗大小，改为适配我们的虚拟机ipnone机型大小。
改完后我们开始向Storyboard中添加一个ViewController。
好了。到此为止我们已经拥有了两个ViewController，一个是新建项目时系统默认为我们添加的，也是程序一运行就进入的根视图；另一个就是我们刚刚添加进去的了。我们可以看到左侧的navigato面板，我们的工程文件里面有两个ViewController.h和ViewController.m文件，他们就是对系统默认的ViewController进行控制的文件。那我们要做的就是依葫芦画瓢，自己创建对我们的ViewController的控制文件。
在工程中新建Cocoa Touch Class模板，注意在Subclass选项中选择UIViewController。
新建完成之后我们可以看到这两个文件：
接下来就是最后一步了，两者的关联，其实挺简单的：
ViewController有了，视图呢？
在进行完对ViewController的关联后，我们先停一下，心急吃不了热豆腐嘛。先来分析分析ViewController到底是个什么东西，它又是怎么工作的。
我们打开进入ViewController.h，看代码~
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@end
简简单单的三行，我们发现我们的ViewController类其实是继承自一个叫做UIViewController的类，那，追根溯源，command进去（按住command键点击）……然后就吓尿了有木有……怎么这么乱！
这时候不要慌，我们慢慢看，找到这一行：
@property(null_resettable, nonatomic,strong) UIView *view;
这是什么？没有错，这是UIViewController类定义的一个实例变量，来看看它的类型——UIView。那，很明显了，什么意思呢，我们的 ViewController继承了一个叫做UIViewController的类，而 UIViewController类中定义了一个UIView类型的实例变量，这个UIView类型的变量就是一个我们可以看见的界面，也就是说，
我们刚刚新建的ViewController里面包含一个可以看见的界面
那废话这么多有什么用呢？用处就在于我们了解了ViewController为什么可以呈现出一个视图，明明没有代码，怎么就能进行UI编辑呢？答案就在这了。关于其他的一些细节，还是老办法，找到UIViewController，command进去，慢慢研究即可，再次不多赘述。
添加控件，实现Storyboard页面跳转
说了那么多，开始我们正式的应用！
就像添加ViewController那样，我们向两个ViewController中分别添加两个Button，命名为“下一页”和“上一页”。为了显示区别，我们分别向两个视图中再添加两个Image View，也让我们的小例子看上去更美观一些。
添加完成之后是⬇️这个样子的，我们获得了这两个美美的视图，接下来就是进行跳转的关联了。
按住control键，点击“下一页”这个Button，拖向第二个ViewController：
选择页面跳转的方式：
选择完成之后，进行Storyboard Segue配置：
ok!这时候我们command+R，就已经可以实现从第一页到第二页的跳转了。接下来我们要实现的是从第二页点击“上一页”按钮，来返回第一页。
那，你会不会说，这还不简单，像上面那样操作就好了。
呵呵。
是不是不行，是不是出错了？
我想说明一点的是，我们不能单单只学会用Storyboard这种傻瓜式的操作（暂且称之为傻瓜式，其实并不是）来完成UI编程。前文已经提到了，最好的方式是Storyboard+代码来进行UI编程。那么对于“返回上一页”这一功能，我们就得用Storyboard+代码的方式来实现。
我们首先用上面的方法创建从”下一页“这个Button到第一页的关联。
然后打开辅助的编辑页面：
进入后，我们现在可以同时看到Storyboard编辑页面和SecondViewController.m编辑页面，我们按下control键，单击SecondViewController中的“上一页”Button拖入SecondViewController.m代码中，位置如下
接下来SecondViewController.m文件会自动生成一段返回值类型为“IBAction“的函数代码，用来捕捉SecondViewController中的Button按钮点击以后的事件，其实就是一个事件监听。我们要对这个方法进行命名，为表示清楚，我们这里命名为”backToFirst“，点击”connect“，代码就会生成了。
好了，Button对象已经和代码相关联了，我们怎样完成功能呢？上代码！
编辑SecondViewController.m，在刚才生成的backToFirst方法中添加如下代码：
[self performSegueWithIdentifier:@"toFirst" sender:self];
没有错，我们在performSegueWithIdentifier的第一个参数传入了上面我们创建的”下一页“这个Button到第一页的关联的Segue的标示符。意义就是通过这个Segue去往想去的视图。
这样，我们就完成了界面的跳转了。
网友评论