Xcode4.2新特性之storyboards （故事板）

Xcode4.2新特性之storyboards （故事板）

Storyboards are the new way to define your application’s user interface.

storyboards （故事板）是Xcode为我们提供一种全新的方式，用来定义我们应用程序的用户界面。

In the past, you used nib files to define your user interface one view controller at a time.

在过去，我们用nib 文件（即xib，由IB创建地）来定义我们的用户界面，一次只能是一个视图控制器。

A storyboard file captures your entire user interface in one place and lets you define both the individual view controllers and the transitions between those view controllers.

一个Storyboard文件只需要一次即可获取我们整个的用户界面（UI），并帮助我们定义单独的视图控制器、定义视图控制器之间的切换。

As a result, storyboards capture the flow of your overall user interface in addition to the content you present.

因此，storyboards 不仅定义了当前的内容（就像以前一个控制器一个xib），还掌握了我们整体用户界面（UI）的流动。

基础辅助教程:XCode 4.2的Storyboard

今天我准备做一个短暂的辅助教程关于怎么用Xcode 4.2里边的Storyboard.当storyboard出现的时候相比于以前IB的工作方式有些让人茫然不解, 我也感觉苹果在这个技术上真的打了一个曲线球.

实际上当你开始使用它的时候并不是完全那么糟糕,这个教程将会展现用一个按钮怎么连接两个视图控制器, 在这个过程中不会有一行代码.

废话就说这么多,现在让我们进入正题,马上建立一个新的Xcode工程.


1.建立Demo工程
我们将用Single View Application模板,我们给它取名为Demo.为了简单起见我们这个教程只针对于iPhone. 记住勾选"use Storyboard"和"Use Automatic Reference Counting"这两个选项(虽然在这次教程里我并不会讲解ARC, 注:ARC也就是IOS5内存管理的自动引用计数技术). 我不准备给我的类加任何前缀所以我把那一个位置留空.

现在你应该拥有了你的新的空工程,包含你的App Delegate, 一个single View Controller, 和一个storyboard文件.


在我们开始storyboard 的学习之前,让我们先建立一个新的view controller. 右击Demo组(就在App Delegage的上面),然后选择"New File", 在Cocoa Touch组里选择UIViewController subclass 然后我们给它取名为"NewViewController"
确保下边的两个选项都没有被标记.

现在你就有一个工程像下边这幅图的样子.



2.Storyboard

现在我们进入正题, storyboard将允许我们定义在我们应用程序中不同的视图之间的相互作用关系.在一个程序中你可以拥有一个或多个storyboard, 这并不是说你真正的需要它().让我们点击storyboard文件然后看看都有些什么.

首先我们看到我们的工程有了我们第一个view controller 而且也包含我们程序的入口点.
现在我们首先要做的就是添加一个navigation controller以便我们能够推入或弹出新的视图. 幸运的是Xcode我们提供了一个简单的做此事情的方法.
左键单击 View Controller的图片,然后在屏幕的顶部选择Editor menu,然后选择Embed In最后选择Navigation Controller. Xcode非常友好的我们加入了一个新的navigation controller 而且把所有的为了使它能够工作的后台工作都做好了.
谢谢Xcode,但是我想如果这个选项能够更明显一点它会更实用的.现在你拥有了两个box 在你的storyboard 上,如下图所示



非常棒!现在我们需要一个button来展示从一个视图转到另一个.所以现在让我们添加一个button到View Controller.  只需要托一个"rounded rect button"从对象列表里到view controller上(注意如果你的视图进行了缩放的话你是无法托项目到view上的);

让我们给这个button命名为"New View". 让我们也给navigation bar一个标题"Original View" ,我们可以双击导航条并输入.

现在我们需要一个新的View Controller  对象来展现我们的 "NewViewController", 在右侧托一个已经存在的viewController进来. 添加一个label写上比如"My New View"或什么其它的. 这样当我们测试把这个视图推入的时候我们就能知道了.现在你的soryboard应该看起来像下面这样



现在我们需要链接我们的view Controller 对象到我们的 "NewViewController"  子类.
选择你刚才托入的view controller然后选择Identity Inspector在右上方,选择第三个标签,从Class里选择"NewViewController". 最终, 我们需要告诉第一个视图的按钮,当它被点击的时候我们想要移入第二一个视图.简单的按住Ctrl然后从button托动到新的view controller.当我们做完这些时将会出现一个选项列表,有三个选项(push, modal 和custom).选择Push. 这是可行的因为我们有一个Navigation Controller在我们的工程里.如果我们没有在开始把navigation controller加进来,这样做是没有意义的,在运行的时候点击button将不会任何事情发生.不管怎么样,你还可以选择"modal"选项它并不需要navigation controller.

也注意当我们连接了两个视图以后, navigation bar将会出现在第二个视图.

你的最终的storyboard应该看起来像下边这个样子


现在如果你运行你的工程, 你将看到第一个视图, 点击按钮出现第二个视图.

可能唯一需要提到的就是如果我们需要给新的视图传送数据我们可以实现方法"prepareForSegue:sender:".  当然你也可以从视图返回数据用delegates就像我们平时做的那样.


自己按文章做了一下demo，storyboards使用起来的确方便。但是一个致命的问题是只支持ios5或以上版本。