Storyboard的使用（一）

Storyboard是Objective在XCode中的界面编辑利器，所见即所得。搭配上ARC的使用，在界面创作方面可谓如虎添翼。

最近开始接触，所以打算写一个教程，从简单到复杂，慢慢深入Storyboard的使用。后面会配合Xib一起使用。

这篇文章先介绍Storyboard的简单视图跳转。

本篇文章的结构：

1）新建工程

2）完成主界面

3）push方式跳转

4）modal方式跳转

5）总结

作者使用的是Xcode5.1.1，OS X 10.9.2。

以下，正文。

1、新建工程

File->New->Project，选择SingleViewApplication，并写上自己工程名称，可以看到如下的工程列表。

（图1）

查看右上角，选择合适的选项，以查看正确的视图。

（图2）

点击工程中的Main.storyboard就可以开始编辑Storyboard了。

2、完成主界面

Xcode中间可以看到这么一个界面，里面显示的就是当前首个Controller对应的界面，直接运行就可以看到一个空的视图。

（图3）

双击这个视图，进入该视图的编辑状态。

我们现在主界面上添加一个标签UILabel。方式是从右下角选择一个Label，并拖动到对应的界面上。

（图4）

可以任意地拖动这个Label的位置，修改它的内容。右边有该Label对应的属性，可以直接修改。即得到下面的画面。

（图5）

接下来，按照同样的方式，把两个按钮Button添加到视图中，得到下图。

（图6）

我这里把它们分别命名为Push和Modal，因为接下来我要用这两个按钮实现页面的跳转。

还记得图2的那些选项吗？选择第二个，可以同时编辑视图和代码。

选择Push按钮，按住Ctrl的同时拉拽到代码空余区域，生成按钮的事件。

（图7）

填入按钮名称，并确定，即可生成对应的代码。

（图8）

对Modal按钮进行同样的操作，得到下图所示代码。

（图9）

3、push方式跳转

在工程文件中新建控制器类PushViewController。

在Storyboard中新建一个ViewController视图（你可以在新建的视图上添加你喜欢的控件~）。

在右边的Custom Class中写上PushViewController。

这样，这个类和视图就可以联系在一起了。

选中初始化的ViewController，按住Ctrl的同时将鼠标拖拽到PushViewController上，在弹出的菜单上选择push。

（图10）

选中产生的那条连接线，在右边属性栏里将其Identifier设置为PushSegue。

在ViewController里的pushButton事件里写上跳转的代码。

- (IBAction)pushButton:(id)sender
{
    [self performSegueWithIdentifier:@"PushSegue" sender:sender];
}

运行项目，点击push按钮，发现程序崩溃！

其实手打过界面代码的人都知道，push方式的跳转需要原来的ViewController是一个NavigationController。

而这里，我们初始化的控制器就是一个简单的ViewController。

解决方法：

1）选中初始化的控制器。

2）在顶部菜单栏里选择：Editor->Embed In->Navigation Controller。也就是把该控制器包裹在NavigationController中。

（图11）

再运行代码，看到push的跳转方式了吗？

4、modal方式跳转

如果你足够聪明，相信你一定知道怎么用modal跳转了！

以同样的方式在项目中创建一个ModalViewController和对应的视图，以拉拽的方式添加一个新的Segue并设置为Modal方式。

同样的写上类似的代码，Modal跳转方式就完成啦~

这里要说的是Modal的四种方式：

（图12）

你可以分别设置，并尝试不同的表现形式，马上就知道这四种方式的区别了。

5、总结

跳转方式是Storyboard最常用的技巧，但这只是对跳转方式的简单掌握，还有更多可以深入了解的东西，比如传递数据等。

以后会继续奉献上相关的教程。