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

#import?<UIKit/UIKit.h>?

??

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

??

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

??

@end?

使用storyboard，應用代理必須繼承自UIResponder，并且有一個 UIWindows 屬性。下面打開AppDelegate.m，這里設么都沒有，所有的方法都是空的，甚至application:didFinishLaunchingWithOptions:??也僅僅是返回了一個YES。 秘密藏在Ratings-Info.plist?里，讓我們在Supporting Files group 里找到并打開它，如下圖： storyboard使用UIMainStoryboardFile?或者"Main storyboard file base name" 來指定當應用啟動的時候，哪一個storyboard是必須被加載的。當設置生效，UIApplication會自動加載叫這個被命名的storyboard文件，并把它第一個視圖控制器顯示到UIWindow中。這些都不必寫代碼去實現。這些你還可以通過修改?Project Settings下面的Project Settings來實現，如下圖: 出于完整性， 打開 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()?否則，應用就會找不到它。 把它加到標簽上? 這個Ratings 應用是由標簽控制的2個視圖 ，使用storyboard，創建標簽很容易。 回到Main.storyboard， 把一個Tab Bar Controller 從Object Library 拖到面板中。你可能需要最大化你的XCode，因為Tab Bar Controller 默認會帶 2個視圖控制器，你需要能完整的看到他們，通過右下角的小浮動窗口，可以縮小這個面板。 一個新的Tab Bar Controller 默認會帶2個視圖管理器，一個標簽一個。UITabBarController也被叫做容器視圖控制器，因為一般它都會包含一個以上的視圖控制器。此外還有其他兩種容器控制器：Navigation Controller和the Split View Controller。 容器控制器通過箭頭管理它的視圖，如下圖 注意:?如果你想把Tab Bar Controller 的所有視圖一起移動，你需要點?-click選中這些視圖，然后再移動他們(被選中的視圖會有一個藍色的下劃線)。 在第一個視圖控制器中拖入一個label并且設置它的text 為 "First Tab"，同理，在第二個視圖管理器中加入"Second Tab" 這可以讓你看到標簽切換后會發生什么情況。 注意:?在編輯器縮小的時候你不能向面板中拖入控件，你要先恢復到正常縮放水平，雙擊當前面板就可以做到。 選中Tab Bar Controller 看下面板中的?Attributes inspector。選中那一欄指的是?Initial View Controller。如下圖： 在畫布上，先由一個箭頭指向Tab bar controller 這意味著啟動app時，?UIApplication?會把Tabbarcontroller 作為主控制器。storyboard同伴有一個獨立的視圖控制器，他是特定的" initial view controller"， 它是storyboard的切入點。 提示:?改變 initial view controller ，你可以通過拖拽在視圖控制器之間的箭頭。 運行應用試試吧，現在應用的效果是有一個tab bar 并且可以通過tab 去切換視圖。如下圖: Xcode 可以創建一個以tab為模板的項目(Tabbed Application template) ，你以前應該用過， 最好理解下它是如何工作的，如果非手動創建，也不至于手足無措。 注意：?當你想Tabbarcontroller 中加入超過5個視圖的時候，它會自動的生產一個 More的tab。 刪除模板自帶的那個視圖控制器，現在storyboard中只有一個tab bar 以及兩個tab各自對應的一個視圖。 添加一個Table View Controller 兩個scene隸屬的Tab Bar Controller都是標準的 UIViewControllers，下面我們用UITableViewController 替換掉 第一個tab 中的scene。 點擊并選中第一個視圖控制器，然后刪除它，從Object Library中拖拽一個新的?Table View Controller?到先前被刪除的scene所處的位置。如下圖： 當Table View Controller選中時，在Xcode菜單欄選擇?Editor\Embed In\Navigation Controller?，現在另一個視圖控制器被加到畫板中了: 你還需要從Object Library中拖一個Navigation Controller，但這種嵌入在命令行中一樣簡單。 因為Navigation Controller 也是一個容器視圖控制器(跟Tab Bar Controller一樣)， 它有一個關系箭頭指向Table View Controller，你還可以在 Document Outline看到這個關系： 注意：嵌入Table View Controller給了它一個navigation bar，Interface Builder 自動加上它的，因為當前視圖會顯示在Navigation Controller的frame里。它并不是一個真的UINavigationBar ，只是一個模擬的。 打開Table View Controller的?Attributes inspector， 你會看到上方有 Simulated Metrics 選項，如下圖: "Inferred" 作為storyboards的默認值，它意味著視圖將會顯示一個navigation bar，當它處于Navigation Controller中時，顯示一個tab bar 當它處于Tab Bar Controller中時。你可以修改這些默認設置，但是注意，這里只是方便你設計用的，"Simulated Metrics"并不會在運行時出現，他們是指一個虛擬的設計，用來展示你的視圖最終會是什么樣子。 把這兩個視圖連接到Tab Bar Controller，按Ctrl-drag 從 the Tab Bar Controller 到 the Navigation Controller如下圖: 松手的時候， 出現一個彈出窗口如下圖: 選擇 Relationship Segue - view controllers，它為2個視圖創建了一個關系箭頭如下圖： Tab Bar Controller有2個關系， 給每個tab都有一個。Navigation Controller自己有一個關系指向Table View Controller。還有另一種類型的箭頭"segue" 稍后我們會講到它。 創建完這個新的連接后，一個新的tab 添加到 Tab Bar Controller了， 簡單的命名為 "Item"。對于這個應用，你希望這個新視圖作為第一個tab，所以拖動tabs，改變他們的順序如下圖: 運行應用，第一個tab顯示了一個包含在navagationcontroller 下面的 table view，如下圖： 在你為應用添加具體的功能之前，讓我們先整理下storyboard，分別把第一個tab 第二個tab 命名為 ?"Players" 和"Gestures"。并不像你期望的那樣，你不能在Tab Bar Controller 上改動，只可以在tab 指向的那個視圖控制器上做。 一旦你把一個視圖控制器連上了Tab Bar Controller，它默認會給一個 Tab Bar Item 對象。用這個Tab Bar Item 去改變tab的名字跟圖片。 選中Navigation Controller里的Tab Bar Item ，在Attributes inspector中把title 設置為 Players，如下圖： 同理把第二個tab 設置為 Gestures. 一個設計良好的應用需要在tab 上有圖標。 這里例子代碼中 有個Images 的文件夾在 resource 文件夾下 把這個文件夾加入到項目中 ，選中Players Tab Bar的 Item的 Attributes inspector ，把 Players.png 填進去. 同理處理 Gestures item the 圖片為 Gestures.png. 一個嵌入在Navigation Controller ?的視圖控制器有一個 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 中的真正的那個Navigation Bar 對象)，如下圖 ? 運行應用，看看這令人驚嘆的tab bar吧，這一切，一行代碼都不用寫喔～ 原文：http://www.cocoachina.com/applenews/devnews/2013/1213/7537.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。