Storyboard是一項(xiàng)令人興奮的功能，在iOS5中首次推出，在開發(fā)app的界面時(shí)可以極大地節(jié)省時(shí)間。 如下圖所示，這就是一個(gè)完整的應(yīng)用的storyboard，接下來我們要學(xué)習(xí)如何通過這種方式創(chuàng)建應(yīng)用。 現(xiàn)在你可能還不是很精確地知道我們的應(yīng)用可以做什么，但是通過上圖，我們可以很清晰的明白這些視圖之間的關(guān)系。這就是使用storyboard的強(qiáng)大之處。 當(dāng)你的應(yīng)用有許多不同頁面的時(shí)候，通過使用storyboard，可以大大減少頁面之間跳轉(zhuǎn)的代碼。過去我們?yōu)槊總€(gè)視圖控制器創(chuàng)建一個(gè)nib文件，現(xiàn)在，只需要使用一個(gè)storyboard，它包含了你應(yīng)用中所有的視圖控制器以及它們之間的關(guān)系。 相比傳統(tǒng)的nib文件，storyboard有很多優(yōu)點(diǎn)： 1.使用storyboard，可以更好地理解應(yīng)用中所有視圖在概念上的概覽以及它們之間的關(guān)系。掌控所有的視圖變得很容易，因?yàn)樗械脑O(shè)計(jì)都是在一個(gè)文件中，而不是在很多單獨(dú)的nib文件中。 2.storyboard描述了視圖之間的動(dòng)畫，這些動(dòng)畫叫做"segues"你可以很容易的通過從一個(gè)視圖控制器（點(diǎn)ctrl-dragging）拖拽到另一個(gè)來實(shí)現(xiàn)，感謝"segues"讓我們不需要寫代碼去控制頁面跳轉(zhuǎn)了。 3.storyboard通過新的cell原型，以及靜態(tài)cell的特性，讓表格控制器實(shí)現(xiàn)起來更容易了。你近乎可以完全的通過storyboard來設(shè)計(jì)你的表格控制器，這也大大的減少了你不得不寫的代碼量。. 并不是所有的都是那么完美，當(dāng)然使用storyboard也是有一些限制的，storyboard的Interface builder 遠(yuǎn)沒有舊版nib編輯器那么強(qiáng)大，并且有一些東西只能在nib中做而不能在storyboard編輯器中做。還有，你需要一個(gè)大號(hào)的顯示器，尤其是在開發(fā)iPad應(yīng)用的時(shí)候。 如果你是那種不喜歡用Interface builder 畫界面而是用代碼直接寫界面的人，很遺憾，storyboard并不適合你。就個(gè)人而言，我比較傾向于寫的代碼越少越好，特別是控制UI的那種，所以storyboard簡(jiǎn)直就是為我準(zhǔn)備的一把利器。 當(dāng)然了，如果你想繼續(xù)使用nib，那么繼續(xù)用好了，你需要知道的是你可以通過storyboard來綁定各視圖控制器，對(duì)于使用storyboard，還是舊版的nib，不是一個(gè)非做選擇不可的事，隨你好了。 在這個(gè)例子中，我們將會(huì)學(xué)到--通過storyboard我們可以做什么，我們將會(huì)創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用，功能大致是有一個(gè)現(xiàn)實(shí)玩家，游戲，以及玩家技能評(píng)分的這么一個(gè)列表。在學(xué)習(xí)過程中，你幾乎可以學(xué)到大多數(shù)通過故事板可以做到的事。 storyboard教程 : iOS 7 版 打開Xcode創(chuàng)建一個(gè)新項(xiàng)目，這里我們用 Single View Application 模板： 按照下面的方式填寫模板中的選項(xiàng): 1.Product Name: Ratings 2.Organization Name: 隨便寫點(diǎn)什么都行 3.Company Identifier:域名反過來寫，例如com.xx.xx 4.Class Prefix: 空著就行 5.Devices: iPhone 用舊版Xcode的時(shí)候你需要特別指定下這個(gè)新項(xiàng)目是用storyboard的，但XCode5之后，不再有這個(gè)選項(xiàng)了，默認(rèn)就是用storyboard創(chuàng)建的項(xiàng)目。 在Xcode創(chuàng)建完項(xiàng)目之后，Xcode的主界面上應(yīng)該如下圖所示： 這個(gè)新項(xiàng)目包含2個(gè)類：AppDelegate?和?ViewController， 以及我們這個(gè)例子中的明星:?Main.storyboard?文件. 請(qǐng)注意，這個(gè)項(xiàng)目中并沒有xib文件。 這是一個(gè)只支持豎屏的應(yīng)用，所以在繼續(xù)之前， 鉤掉?Deployment Info， Device Orientation下面的 Landscape Left和Landscape Right 選項(xiàng)。 接下來讓我們看一下storyboard，點(diǎn)擊列表中的 Main.storyboard 在interface builder中打開它。 在Interface builder中編輯storyboard就跟編輯nib文件差不多，你可以從Object Library中拖拽新的元素到視圖控制器中，并且可以編輯它的布局。區(qū)別在于storyboard不僅僅有一個(gè)視圖控制器，它把你應(yīng)用中的所有視圖控制器全都包含了。 按標(biāo)準(zhǔn)的storyboard的說法，一個(gè)視圖控制器就是一個(gè)"場(chǎng)景"。你可以交替的使用這個(gè)模式，"場(chǎng)景"是呈現(xiàn)在storyboard中的視圖控制器，以往，你可能為每一個(gè)"場(chǎng)景"/視圖控制器創(chuàng)建一個(gè)nib文件。現(xiàn)在你只需要把他們都集中在一個(gè)storyboard里。在iPhone中，一次只能看到一個(gè)場(chǎng)景，而iPad應(yīng)用中，一次可能會(huì)看到多個(gè)。例如"master／detail "或者 "popover" 注意:?Xcode 5默認(rèn)storyboard以及nib中的 Auto Layout屬性是打開的。 Auto Layout 是一個(gè)新的很帥氣的可以自動(dòng)調(diào)整控件大小的這么一個(gè)技術(shù)，在應(yīng)用適配iPad以及iPhone5的時(shí)候尤其有用，可惜它只能在 iOS 6 以上運(yùn)行。當(dāng)然了，它也需要一定的學(xué)習(xí)曲線，這個(gè)例子中我們不會(huì)詳細(xì)的說這點(diǎn)。如果你有興趣了解 Auto Layout，請(qǐng)參閱我們的書籍《 iOS 6 by Tutorials andiOS 7 by Tutorials》. 在storyboard中的File inspector ?禁用Auto Layout選項(xiàng)，如下圖： 拖拽一些控件到空的視圖控制器上，感受一些storyboard編輯器是如何工作的。 在storyboard編輯頁面中找到下面這個(gè)標(biāo)上紅色左箭頭的按鈕 點(diǎn)擊它打開左側(cè)的 Document Outline 視圖 當(dāng)編輯nib的時(shí)候，列表中顯示的是這個(gè)nib中所有的控件，但對(duì)于storyboard，它會(huì)顯示你的應(yīng)用中的所有視圖控制器的內(nèi)容。上圖只有一個(gè)視圖控制器，在接下來的例子中，我們會(huì)增加其他的。 在scene下面有微型版的Document Outline，叫做Dock， 如下圖： 什么是 Dock ？ 它顯示了當(dāng)前視圖的最上層對(duì)象，每個(gè)視圖都至少有一個(gè)View Controller 對(duì)象，一個(gè)First Responder 對(duì)象，一個(gè)Exit 項(xiàng)目。當(dāng)然了，它也可能會(huì)有其他的最上層對(duì)象。使用Dock 去連接outlets 和 actions變的非常容易，當(dāng)你想把某個(gè)對(duì)象連接到視圖控制器中時(shí)，只需簡(jiǎn)單地把它的圖標(biāo)拖拽到Dock上。 注意: 你很可能沒怎么用過First Responder。這是指任何物體在任何給定時(shí)間具有第一響應(yīng)狀態(tài)的代理對(duì)象。它一直在你的nib中，你很可能從來沒有必要使用它。舉個(gè)例子，按鈕中有個(gè)Touch Up Inside事件，把它拖給First Responder的 cut: selector。如果在某一點(diǎn)的文本字段具有輸入焦點(diǎn)，那么你可以按下該按鈕，使文字欄位，也就是現(xiàn)在的第一響應(yīng)者，切其文本到剪貼板。 運(yùn)行該app，它看起來應(yīng)該和你在編輯器中設(shè)計(jì)的一樣(此處使用了運(yùn)行iOS 7的4-inch Retina iPhone simulator): 如果你寫過以nib為基礎(chǔ)的應(yīng)用，通常會(huì)有一個(gè)叫做MainWindow.xib的文件。這個(gè)文件有一個(gè)UIWindow對(duì)象指向App Delegate，以及其他視圖控制器。當(dāng)你想用storyboard做這些的時(shí)候，就不需要MainWindow.xib了。那么storyboard是如何加載到應(yīng)用中的呢？ 讓我們看看應(yīng)用的 application delegate。 打開 AppDelegate.h，看起來應(yīng)該是這樣：

#import?<UIKit/UIKit.h>?

??

@interface?AppDelegate?:?UIResponder?<UIApplicationDelegate>?

??

@property?(strong,?nonatomic)?UIWindow?*window;?

??

@end?

使用storyboard，應(yīng)用代理必須繼承自UIResponder，并且有一個(gè) UIWindows 屬性。下面打開AppDelegate.m，這里設(shè)么都沒有，所有的方法都是空的，甚至application:didFinishLaunchingWithOptions:??也僅僅是返回了一個(gè)YES。 秘密藏在Ratings-Info.plist?里，讓我們?cè)赟upporting Files group 里找到并打開它，如下圖： storyboard使用UIMainStoryboardFile?或者"Main storyboard file base name" 來指定當(dāng)應(yīng)用啟動(dòng)的時(shí)候，哪一個(gè)storyboard是必須被加載的。當(dāng)設(shè)置生效，UIApplication會(huì)自動(dòng)加載叫這個(gè)被命名的storyboard文件，并把它第一個(gè)視圖控制器顯示到UIWindow中。這些都不必寫代碼去實(shí)現(xiàn)。這些你還可以通過修改?Project Settings下面的Project Settings來實(shí)現(xiàn)，如下圖: 出于完整性， 打開 main.m 如下圖:

#import?<UIKit/UIKit.h>?

??

#import?"AppDelegate.h"?

??

int?main(int?argc,?char?*argv[])?

{?

????@autoreleasepool?{?

????????return?UIApplicationMain(argc,?argv,?nil,?NSStringFromClass([AppDelegate?class]));?

????}?

}?

app delegate 并不是storyboard的一部分，我們需要把它的名字指定給UIApplicationMain()?否則，應(yīng)用就會(huì)找不到它。 把它加到標(biāo)簽上? 這個(gè)Ratings 應(yīng)用是由標(biāo)簽控制的2個(gè)視圖 ，使用storyboard，創(chuàng)建標(biāo)簽很容易。 回到Main.storyboard， 把一個(gè)Tab Bar Controller 從Object Library 拖到面板中。你可能需要最大化你的XCode，因?yàn)門ab Bar Controller 默認(rèn)會(huì)帶 2個(gè)視圖控制器，你需要能完整的看到他們，通過右下角的小浮動(dòng)窗口，可以縮小這個(gè)面板。 一個(gè)新的Tab Bar Controller 默認(rèn)會(huì)帶2個(gè)視圖管理器，一個(gè)標(biāo)簽一個(gè)。UITabBarController也被叫做容器視圖控制器，因?yàn)橐话闼紩?huì)包含一個(gè)以上的視圖控制器。此外還有其他兩種容器控制器：Navigation Controller和the Split View Controller。 容器控制器通過箭頭管理它的視圖，如下圖 注意:?如果你想把Tab Bar Controller 的所有視圖一起移動(dòng)，你需要點(diǎn)?-click選中這些視圖，然后再移動(dòng)他們(被選中的視圖會(huì)有一個(gè)藍(lán)色的下劃線)。 在第一個(gè)視圖控制器中拖入一個(gè)label并且設(shè)置它的text 為 "First Tab"，同理，在第二個(gè)視圖管理器中加入"Second Tab" 這可以讓你看到標(biāo)簽切換后會(huì)發(fā)生什么情況。 注意:?在編輯器縮小的時(shí)候你不能向面板中拖入控件，你要先恢復(fù)到正常縮放水平，雙擊當(dāng)前面板就可以做到。 選中Tab Bar Controller 看下面板中的?Attributes inspector。選中那一欄指的是?Initial View Controller。如下圖： 在畫布上，先由一個(gè)箭頭指向Tab bar controller 這意味著啟動(dòng)app時(shí)，?UIApplication?會(huì)把Tabbarcontroller 作為主控制器。storyboard同伴有一個(gè)獨(dú)立的視圖控制器，他是特定的" initial view controller"， 它是storyboard的切入點(diǎn)。 提示:?改變 initial view controller ，你可以通過拖拽在視圖控制器之間的箭頭。 運(yùn)行應(yīng)用試試吧，現(xiàn)在應(yīng)用的效果是有一個(gè)tab bar 并且可以通過tab 去切換視圖。如下圖: Xcode 可以創(chuàng)建一個(gè)以tab為模板的項(xiàng)目(Tabbed Application template) ，你以前應(yīng)該用過， 最好理解下它是如何工作的，如果非手動(dòng)創(chuàng)建，也不至于手足無措。 注意：?當(dāng)你想Tabbarcontroller 中加入超過5個(gè)視圖的時(shí)候，它會(huì)自動(dòng)的生產(chǎn)一個(gè) More的tab。 刪除模板自帶的那個(gè)視圖控制器，現(xiàn)在storyboard中只有一個(gè)tab bar 以及兩個(gè)tab各自對(duì)應(yīng)的一個(gè)視圖。 添加一個(gè)Table View Controller 兩個(gè)scene隸屬的Tab Bar Controller都是標(biāo)準(zhǔn)的 UIViewControllers，下面我們用UITableViewController 替換掉 第一個(gè)tab 中的scene。 點(diǎn)擊并選中第一個(gè)視圖控制器，然后刪除它，從Object Library中拖拽一個(gè)新的?Table View Controller?到先前被刪除的scene所處的位置。如下圖： 當(dāng)Table View Controller選中時(shí)，在Xcode菜單欄選擇?Editor\Embed In\Navigation Controller?，現(xiàn)在另一個(gè)視圖控制器被加到畫板中了: 你還需要從Object Library中拖一個(gè)Navigation Controller，但這種嵌入在命令行中一樣簡(jiǎn)單。 因?yàn)镹avigation Controller 也是一個(gè)容器視圖控制器(跟Tab Bar Controller一樣)， 它有一個(gè)關(guān)系箭頭指向Table View Controller，你還可以在 Document Outline看到這個(gè)關(guān)系： 注意：嵌入Table View Controller給了它一個(gè)navigation bar，Interface Builder 自動(dòng)加上它的，因?yàn)楫?dāng)前視圖會(huì)顯示在Navigation Controller的frame里。它并不是一個(gè)真的UINavigationBar ，只是一個(gè)模擬的。 打開Table View Controller的?Attributes inspector， 你會(huì)看到上方有 Simulated Metrics 選項(xiàng)，如下圖: "Inferred" 作為storyboards的默認(rèn)值，它意味著視圖將會(huì)顯示一個(gè)navigation bar，當(dāng)它處于Navigation Controller中時(shí)，顯示一個(gè)tab bar 當(dāng)它處于Tab Bar Controller中時(shí)。你可以修改這些默認(rèn)設(shè)置，但是注意，這里只是方便你設(shè)計(jì)用的，"Simulated Metrics"并不會(huì)在運(yùn)行時(shí)出現(xiàn)，他們是指一個(gè)虛擬的設(shè)計(jì)，用來展示你的視圖最終會(huì)是什么樣子。 把這兩個(gè)視圖連接到Tab Bar Controller，按Ctrl-drag 從 the Tab Bar Controller 到 the Navigation Controller如下圖: 松手的時(shí)候， 出現(xiàn)一個(gè)彈出窗口如下圖: 選擇 Relationship Segue - view controllers，它為2個(gè)視圖創(chuàng)建了一個(gè)關(guān)系箭頭如下圖： Tab Bar Controller有2個(gè)關(guān)系， 給每個(gè)tab都有一個(gè)。Navigation Controller自己有一個(gè)關(guān)系指向Table View Controller。還有另一種類型的箭頭"segue" 稍后我們會(huì)講到它。 創(chuàng)建完這個(gè)新的連接后，一個(gè)新的tab 添加到 Tab Bar Controller了， 簡(jiǎn)單的命名為 "Item"。對(duì)于這個(gè)應(yīng)用，你希望這個(gè)新視圖作為第一個(gè)tab，所以拖動(dòng)tabs，改變他們的順序如下圖: 運(yùn)行應(yīng)用，第一個(gè)tab顯示了一個(gè)包含在navagationcontroller 下面的 table view，如下圖： 在你為應(yīng)用添加具體的功能之前，讓我們先整理下storyboard，分別把第一個(gè)tab 第二個(gè)tab 命名為 ?"Players" 和"Gestures"。并不像你期望的那樣，你不能在Tab Bar Controller 上改動(dòng)，只可以在tab 指向的那個(gè)視圖控制器上做。 一旦你把一個(gè)視圖控制器連上了Tab Bar Controller，它默認(rèn)會(huì)給一個(gè) Tab Bar Item 對(duì)象。用這個(gè)Tab Bar Item 去改變tab的名字跟圖片。 選中Navigation Controller里的Tab Bar Item ，在Attributes inspector中把title 設(shè)置為 Players，如下圖： 同理把第二個(gè)tab 設(shè)置為 Gestures. 一個(gè)設(shè)計(jì)良好的應(yīng)用需要在tab 上有圖標(biāo)。 這里例子代碼中 有個(gè)Images 的文件夾在 resource 文件夾下 把這個(gè)文件夾加入到項(xiàng)目中 ，選中Players Tab Bar的 Item的 Attributes inspector ，把 Players.png 填進(jìn)去. 同理處理 Gestures item the 圖片為 Gestures.png. 一個(gè)嵌入在Navigation Controller ?的視圖控制器有一個(gè) Navigation Item，它是用來配制navigation bar的。在Table View Controller 中選中Navigation Item (在Document Outline可以找到)在 Attributes inspector 中把title改成 ?Players. 此外， 你可以雙擊navigation bar 直接修改title. (注意: 你需要雙擊table view controller 中的simulated navigation bar，并不是Navigation Controller 中的真正的那個(gè)Navigation Bar 對(duì)象)，如下圖 ? 運(yùn)行應(yīng)用，看看這令人驚嘆的tab bar吧，這一切，一行代碼都不用寫喔～ 原文：http://www.cocoachina.com/applenews/devnews/2013/1213/7537.html

總結(jié)

以上是生活随笔為你收集整理的storyboard使用入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。