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就像我们平时做的那样.

 

 

XCode 4.2 新功能 - Storyboard

最近開始比較有空在玩 XCode 4.2(iOS5 Beta3)，赫然發現它多了個 Storyboard 的東東。
Storyboard 這個東西一般來說是在做創意發想的時候，用來將自己的想的一些故事情節畫成像是連環漫畫一樣，想不到 Apple 把它用在這裡，真是佩服...

好吧，不廢話，先來說說這個 Storyboard 帶來什麼改變?

在這個版本前，我們在設計畫面的時候都是用 interface builder 產生一個 xib 檔，然後在 code 要出現這個畫面的時候可能是用這樣的方式：

[self.navigationController pushViewController:viewController animated:YES];

好，也許大家(包括我)已經習慣這樣的方式了，不過如果畫面一多的話，到處 push 來 pop 去的，誰知道畫面之間是怎麼串呢？可能只有 PG 最清楚吧？

現在 Storyboard 解決了這樣的問題，讓你先將故事情節畫出來，像這樣

[attach]3682[/attach]

畫面中間那個像是轉接頭的叫做 Segue，先把你要的畫面(View controller)拉到 Storyboard 內之後，比方說要將 A畫面->B畫面，那麼在 A 上面按住 control 鍵，然後拉到 B 畫面，並選擇 performSegueWithIdentifier:sender:，這樣兩個畫面就串起來了，當然你可以有很多路徑，比方說還可以有 A->C 或 A->D 之類的。

重點來了，那我在程式碼裡面要做什麼修改呢？

只要將原本的 pushViewController:animated: 的地方更改為以下這樣就可以了[code] [self.navigationController performSegueWithIdentifier:@"SegueLevel1" sender:self];[/code]其中 SegueLevel1 是我自己訂的轉接頭名稱，如果你有很多路徑的話，那麼就可以有多個 Segue。

這樣做法的好處是我可以很快的把故事情節描述出來，萬一客戶的畫面之間改來改去的，那麼我只要變更我的 Storyboard，只要 Segue identifier 不變，程式碼自然就不需要修改了。不過少了 xib 一時間倒是有點不習慣呢！

 

 

 

StoryBoard优势

 

 

 

StoryBoard是iOS 5的新特征，旨在代替历史悠久的NIB/XIB（其实StoryBoard还是基于NIB/XIB的，不过开发人员已经无需直接跟NIB打交道了）。目前关于StoryBoard的文档并不多，苹果的iOS 5的开发者文档里也仅有不多的介绍。所以，本文只是简单的谈谈本人对StoryBoard的一些粗浅的理解。（StoryBoard有时也叫做StoryBoarding，我不太注意这种细节，所以两个词经常会混用，如果你英语可以的话，能体会到两者的细微差别）

StoryBoarding机制比之NIB/XIB的的优势何在呢？个人认为，StoryBoard有以下几个优点：

能够减少很多跟View相关的代码；

能够使View和Controller进一步解耦；

能够优化程序的“页面流”，使程序的结构更清楚 ；

要理解这些优点，我们先要对NIB有一个基本的认识。通常，NIB是和ViewController相关联的，很多ViewController都有对应的NIB文件。NIB文件的作用是描述用户界面以及初始化对象和界面元素对象。其实开发者在NIB里描述的界面和初始化的对象都能够在代码中实现；之所以用Interface Builder来绘制界面，是为了减少那些设置界面属性的无聊和重复的代码，让开发人员能够集中精力做程序的功能。

而StoryBoard的出现，则是进一步加强了这方面的功能；NIB文件是没有办法描述从一个ViewController到另一个ViewController的过渡的。这种过渡只能靠手写代码来实现。相信很多人都会经常用到 -presentModalViewController:animated:以及-pushViewController:animated:这两个方法。这种代码在Storyboarding里将成为历史；取而代之的是Segue。Segue定义了从一个ViewController到另一个ViewController的过渡。在Storyboard里，我们只需要像连接界面对象和Action Method那样把ViewController之间用Segue连接起来就可以了，不再需要手写代码了。即便你像自定义Segue，你也只需写Segue的实现，而无需编写调用的代码，StoryBoard会帮你调用的。这就是上面所说的第一个优点。

 

要用好Storyboarding机制，那么必须严格遵守MVC原则。要让View和Controller充分解耦；并且不同的Controller之间也要充分解耦。否则，程序的业务逻辑就会乱成一团，很难理解，维护和除虫（Debug）。

举个例子来说：在过去，特别是初学Cocoa Touch开发的时候，很多人都喜欢直接把AppDelegate当ViewController用，直接在AppDelegate和MainMenu.xib之间交互。应该说，这是一个非常不好的习惯。AppDelegate的作用很简单，就是处理UIApplication的回调，而不应该负责用户界面的处理。很多iOS教程为了省事，都直接把AppDelegate当ViewController用，甚至直接举例在UIWindow上绘制界面。虽然，作为教程这么做很简单明了，因为UIWindow也是UIView的子类，但是这却不是一种优良的实践。因为由ViewController来负责处理View才是正确的做法。

近一段时间，苹果的项目模版经常发生改变，特别是自从Xcode 4发布之后，程序模版（如，View Based Application）开始鼓励使用UIWindow的rootViewController属性来指定第一屏的ViewController，以保证AppDelegate专注于它应该做的事情。而引入StoryBoard之后，AppDelegate已经不管ViewController的事情了 ；第一屏所使用的ViewController（也就是rootViewController）可以在StoryBoard中设置。这样，程序的入口点就能从StoryBoard的“设计图”上一目了然了。这是第二个优点。

 

至于第三个优点，就是StoryBoard的“设计图”了。StoryBoard能够包含一个程序所有的ViewController以及它们之间的连接。因此，StoryBoard甚至可以作为程序的“设计图”来用了。理想情况下，在程序开发接近尾声的时候，我们只需对比StoryBoard的“流程”和最初程序的设计“流程”，就知道程序有没有“走样”了。

 

说完了优点，我们来看看从NIB/XIB到StoryBoard的迁移，我们需要有哪些理解和实践上的改变呢？

首先，自然是（在做程序开发的时候）ViewController不再需要NIB/XIB了（虽然在后台还是用的NIB）。以前在NIB/XIB上做的连接Outlet和Action的操作都可以在StoryBoard上完成了；

第二，孤儿View（独立于ViewController的View）是不能出现在StoryBoard里的，View必须通过ViewController来管理（StoryBoard更像是Controller对象的容器，而不是View对象的容器，NIB/XIB可以作为View对象的容器）；

第三，ViewController之间的过渡代码已经是历史了，用StoryBoard可以直接可视化地连接不同的ViewController；

第四，UIWindow对象的作用被进一步淡化，甚至可以这么说：其实很多程序根本无需用到UIWindow对象。AppDelegate也不再被鼓励（也不能）用来做ViewController－－你甚至无法在Interface Builder的StoryBoard图上找到AppDelegate对象－－因为它本来就不应该用来处理界面（View）的。

最后，写优质的代码，严格遵守MVC设计模式，这样不仅能够让你用好StoryBoard，也能帮助你理解StoryBoard的原理。

StoryBoard是非常好的鼓励MVC和代码解耦的手段，能够让开发人员写出更加容易维护的代码。不过对于初学者来说，确实是个对理解力的小挑战。不过作为初学者也不用担心，一旦突破了理解障碍，你就会发现StoryBoard也非常好用－－就像最初理解NIB/XIB时，Outlet和Action“拉线”来“拉线”去，看起来也很神奇；理解之后，发现原来“拉线”神马的也没那么神秘。

好了，絮絮叨叨的啰嗦了这么多无聊的文字，相信你也看累了。如果你依然对我写的东西不知所云的话，你可以稍稍研究一下Xcode 4.2的几个内建模版，然后和使用XIB的模版对比一下，看看苹果是怎么用StoryBoard的，能够很好的帮助你理解Storyboarding机制。当然，千万不要忘记亲自动手用一用StoryBoard！

Happy Coding!

转载于:https://blog.51cto.com/rongbaohong/762616