基础辅助教程: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文件.

[img]http://dl.iteye.com/upload/attachment/0066/5823/7d3cc865-f3d0-30d0-a33a-12899c0d8134.jpg[/img]

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

确保下边的两个选项都没有被标记.


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

[img]http://dl.iteye.com/upload/attachment/0066/5825/618e338a-c318-3503-a0a5-c93599b42c34.jpg[/img]

2.Storyboard


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


首先我们看到我们的工程有了我们第一个view controller 而且也包含我们程序的入口点.

现在我们首先要做的就是添加一个navigation controller以便我们能够推入或弹出新的视图. 幸运的是Xcode我们提供了一个简单的做此事情的方法.

左键单击 View Controller的图片,然后在屏幕的顶部选择Editor menu,然后选择Embed In最后选择Navigation Controller. Xcode非常友好的我们加入了一个新的navigation controller 而且把所有的为了使它能够工作的后台工作都做好了.

谢谢Xcode,但是我想如果这个选项能够更明显一点它会更实用的.现在你拥有了两个box 在你的storyboard 上,如下图所示

[img]http://dl.iteye.com/upload/attachment/0066/5827/958a94b7-93c1-3447-a34c-c65fbe643d2d.jpg[/img]

非常棒!现在我们需要一个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应该看起来像下面这样

[img]http://dl.iteye.com/upload/attachment/0066/5829/86867a47-1ccc-3675-998b-e70ec5ed70ee.jpg[/img]

现在我们需要链接我们的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应该看起来像下边这个样子

[img]http://dl.iteye.com/upload/attachment/0066/5831/ed30c617-60a2-3bc6-a4d2-ad440193edc2.jpg[/img]

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


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