storyboard搭建项目_Storyboard使用教程一

Storyboard是最先在iOS 5引入的一项振奋人心的特性，大幅缩减构建App用户界面所需的时间。

要介绍Storyboard是什么，我打算从这张图讲起。下面是您将会在本教程中构建的Storyboard：

image

或许你现在并不清楚这个App是用来做什么的，但其中有哪些页面，还有页面间的关联都一目了然。这就是使用Storyboard的力量。

如果App中包括很多不同的页面，使用Storyboard可以帮你减少实现页面间跳转的胶合代码。过去的开发者对应每个视图控制器分别创建界面设计文件(即“nib”或“xib”文件)，现在，只要一个Storyboard就可以包揽所有视图控制器的界面设计和他们之间的关联。

Storyboard有很多优点：

使用Storyboard可以更好地了解App中所有的视图以及它们之间的关联的概况。掌控全局更加容易，因为所有的设计都包含在一个文件中，而不是分散在很多单独的nib文件中。

Storyboard可以描述不同视图之间的过渡，这种过渡叫做“segue”(译注：意为“转场”，而“Storyboard”原意为“分镜”，均源自电影术语)，你可以直接在Storyboard中通过连接不同的视图控制器来创建转场。多亏有了转场，打理界面的代码比以前要少了。

Storyboard通过新的原型表项(prototype cell)和静态表项(static cell)特性，让处理表视图(table view)的工作更加轻松。几乎完全可以在Storyboard编辑器里搞定表视图的设计，同样也减少了代码量。

Storyboard使自动布局(Auto Layout)更易用。自动布局功能可以让你通过界面元素之间的数学关系定义来确定元素的位置和尺寸，极大简化了不同尺寸屏幕的适配工作。自动布局不在本教程范围之内，若想了解更多，请参阅自动布局入门。

如果你非常讨厌Interface Builder，或者推崇用代码搞定所有界面的话，Storyboard可能不适合你。个人主张是代码能少写就少写，特别是UI代码，所以Storyboard简直就是为我准备的一把利器。

如果你想继续使用nib，那就继续用吧，要知道Storyboard里是可以使用nib的，两者并非互斥关系。

本教程中，你会了解Storyboard可以做什么，我们将构建一个简单的App，功能大致是创建玩家列表和游戏列表，然后给玩家技能评分。过程中你会学到大多数可以用Storyboard完成的最常见的任务。

准备开始

打开Xcode，创建新项目。选用 Single View Application 模板：

image

如下填写模板选项：

Product Name: Ratings

Organization Name: 随意填写

Company Identifier: 你的App使用的标识符，逆域名记法

Language: Swift

Devices: iPhone

Use Core Data: 不选

项目创建完成后，Xcode的主界面应该如下图所示：

image

这个新项目包含2个类：AppDelegate 和 ViewController， 此外还有本教程的主角: Main.storyboard 文件。

这是一个只支持竖屏显示的App，所以在继续之前，在项目综合设置上面看到的 Deployment Info - Device Orientation下面把 Landscape Left和Landscape Right 选项勾掉。

接下来我们看一下Storyboard，点击项目浏览器中的 Main.storyboard 就可以在Interface Builder中打开。

一个视图控制器在Storyboard中的官方术语是“场景(scene)”，但这两种叫法是相通的。一个视图控制器在Storyboard中可以叫做场景。

这里可以看到一个包含空视图的视图控制器。在这个视图控制器左边指向它的箭头表明它是这个Storyboard中要显示的第一个视图控制器。

在Storyboard编辑器中设计布局的方法是从右下角的Object Library(对象库)中把控件拖入视图控制器，非常容易。

注：你会注意到默认场景是一个正方形。Xcode 6默认为Storyboard和nib文件开启自动布局(Auto Layout)和尺寸归类(Size Classes)。自动布局和尺寸归类这两项新技术可以构建易于调整大小的用户界面，这对支持不同尺寸的iPhone和iPad非常有用。

自动布局由iOS 6引入，尺寸归类由iOS 8引入。两者都需要一定的学习曲线，所以本教程中暂不使用，但为了支持不同的设备尺寸，以后还是要接触到的。

在继续探索之前，先在当前Storyboard的 File inspector(文件检查器) 中禁用Auto Layout和Size Classes，如图：

Xcode询问操作时，选择保留 iPhone 的尺寸归类数据，然后点击 Disable Size Classes ：

现在，场景变成了4英寸iPhone尺寸的样子。

从右下方的对象库里把一些控件拖到空的视图控制器上，感受一下Storyboard编辑器的工作方式：

控件拖进来之后应该会在左边的文档大纲(Document Outline)中显示：

如果没看到文档大纲，请点击Storyboard面板左下角的这个按钮：

Storyboard显示所有视图控制器的内容，当前的Storyboard中仅有一个视图控制器(场景)，在本教程后面我们会添加其他场景。

在场景上面还有一个缩小的文档大纲，称作Dock：

Dock显示场景中最上层的对象，每个视图都至少有一个 视图控制器(View Controller) 对象，一个 第一响应者(First Responder) 对象，一个 出口(Exit) 项。除此之外也可以有其他的最上层对象。Dock方便连接outlet和action，当你想把某个对象连接到视图控制器时，只需把它拖到Dock的图标上。

注：你可能不常用到First Responder。这是指任意对象在任意时间具有第一响应状态的代理对象。举个例子，把一个按钮的Touch Up Inside事件拖到First Responder的 cut: 选择器上。如果在某时有一个文本字段具有输入焦点，此时按下该按钮，就可以让该文本字段，也就是现在的第一响应者，把其中的文本剪切到剪贴板。

运行App，它看起来应该和你在编辑器中设计的样子相同(截图可能与你的不同，仅供演示参考，教程后面不会用到)：