九十九、使用 故事板

在先前的博文中  我们  了解了  如何编写  代码  在iphone应用程序中  实现  导航功能。先前博文中的例子  提供了  相当的灵活性。由若干列表视图构成的“主从”视图用户界面  一般会要求  这样的灵活性。但是  在现实中的许多情况下  我们  需要  更简单的导航形式，而  编写代码实现基于列表视图的导航功能  就显得  过于复杂。正是  基于  这种认识，苹果  才引入了  故事板的概念。

故事板  是  Xcode 4.2  及  以后的版本内置的特性。故事板  允许  开发者  将  构成iphone应用程序的视图  和  这些视图之间的导航路径  用可视化的方式  组装在一起。使用  Xcode的界面创建器，开发者  可以将  视图控制器  拖、放  到画布中  并且  在各个视图中  设计  自己的用户界面。然后  开发者  可以用  线  将  触发器（比如  按钮等）  和  相应的视图控制器  连接起来。在设计好  所需的视图  和  视图之间的切换路径后，Xcode  会在最终完成的应用程序中  生成  所有需要的代码。我们  可以在界面创建器中  设定  视图切换的风格。同时  我们  还可以编写代码  触发  视图间的切换。

完成后的设计  存储  在故事板文件当中。一般  一个应用程序  可以有  一个故事板文件  也可以有  多个故事板文件。

创建  项目

在这篇博文余下的部分  我们  将要用  故事板  来制作  一个项目  以实现  多个视图的切换。

我们  启动  Xcode  并且  利用  单一视图应用程序模板  创建  一个新的项目。在项目选项面板中  我们  把  产品名称  和  物件类型名称前缀  设定为  storyboard  并且  确保  选择了  “Use Storyboards”这个选项。最后  点击  下一步，将  这个项目  存储  在合适的位置。

查看  故事板

创建  一个新项目后  Xcode  会生成  哪些文件，我们  都不陌生。而这次  Xcode  并没有为第一个视图控制器  生成  xib文件  而是  生成了  故事板storyboard文件。我们  在项目导航面板中  选取  MainStoryBoard.storyboard文件  就可以看到  故事板画布了：

画布中的视图  是  storyboardViewController类型的视图控制器所包含的视图。视图左侧朝右的箭头  表示  这个视图  是  初始视图  并且  在应用程序  启动后  会第一个显示出来。我们  可以用  可视化的方式  将  物件  拖、放  到画布中的视图上。根据我们这个例子的目的  我们  将  一个标签物件  和  一个按钮物件  拖、放  到视图上  并且  分别  输入  “场景一”  和  “去到场景二”：

在故事板中  添加  场景

要添加一个新的场景  只需要  从物件库面板中  拖  一个视图控制器  并且  放  到画布里面：

然后  将  一个标签物件  和  一个按钮物件  拖、放  到第二个场景的视图中  并且  分别  输入  “场景二”  和  “去到场景一”：

你  需要  多少场景  就可以  在故事板中  添加  多少场景。由于  我们这里这个例子  只作  练习之用，所以  我们  只添加  两个场景  即可。

配置  故事板中  场景的切换

场景的切换  就是  在故事板中  从一个场景  过渡到  另外一个场景。在我们这个例子当中  我们  需要点击  “去到场景二”按钮后  就切换到  “场景二”，相反  点击  “去到场景一”按钮后  就切换到  “场景一”。要建立  这样的切换  我们  需要按住  键盘上的control键  并且  点击  “去到场景二”按钮  不放  将  鼠标  拖  到“场景二”。松开  鼠标后  有  一个菜单  弹出来。在弹出来的菜单中  选择  “modal”选项。重复  刚才的步骤，将  场景二中的“去到场景一”按钮  连接  到场景一。建立  切换后，我们  在界面创建器中  可以看到  用来表示这种切换的连线：

如果故事板中的场景  过多，我们  就很难将  各个场景之间的关系  理清，所以  我们  可以双击  画布  缩小。再次  双击  画布  就可以将  画布  放大。

Xcode  为场景切换  提供了  几种视觉效果。默认的效果  是  Cover Vertical（垂直覆盖），也就是  新的场景  从屏幕的底部  向上滑动  覆盖  旧的场景。要想改变  场景切换效果  我们  需要点选  相应的场景切换线，也就是  连接一个按钮到另一个场景的连线。然后  点击  Xcode窗口右侧面板上方第四个标签：

我们这里的场景切换效果  是  Cross Dissolve。要删除  场景切换  只需要点选  场景切换线  再按  键盘上的delete键  即可。

将  故事板中的场景  与  视图控制器  联系起来

现在  我们  有了  两个场景，但是  只有  一个视图控制器，也就是  Xcode在创建项目时创建的storyboardViewController。如果  要给  场景二  添加  任何功能，场景二  也需要  一个视图控制器。第一步  我们  将  新的视图控制器所需的文件  添加  到这个项目。用  鼠标右键  点击  Xcode窗口左侧项目导航器上方的storyboard。在弹出的菜单中  选择  New File…。再选择iOS中的Objective-C class模板。点击  下一步后，在Class文本框中  填写  Scene2ViewController。而  在Subclass of文本框中  选择  UIViewController。并且  确保  不要选择  Targeted for iPad  和  With XIB for user interface两个选项。最后  将  新的文件  存储  在项目所在的文件夹中。

接着  打开  MainStoryboard.storyboard这个文件。然后  点击  代表场景二的视图下方的视图控制器按钮，也就是  第一个按钮：

再点击  Xcode窗口右侧面板上方的第三个标签，将  Class选项  修改成  Scene2ViewController：

这样一来  场景二所对应的源码文件  就是  Scene2ViewController.h  和  Scene2ViewController.m这两个文件了。

编译  并且  运行  程序

编译  并且  运行  这个程序后，我们  可以看到  这样的效果：

点击  “去到场景二”按钮后，我们  就会被带至  场景二：