StoryboardBy Rock

2013-05-16

Ver. 1.0

大綱

● 想一下先！● Storyboard● 與xib比較● StoryBoard 簡單實作● 參考資料

想一下先！

● 能不能夠相容於iOS5以下的版本?● 能不能完全取代.xib?● 用了Storyboard之後會不會有什麼樣的限制?● 用了Storyboard之後，可否跟舊的.xib共存?● 若Device同時支援iPhone與iPad裝置，是否需

兩個Storyboard?● 一Storyboard檔案，可否同時支援iPhone3G、

4/4s、5?

Storyboard

● Storyboard，中文翻譯為分鏡或分鏡腳本。通常是指是指電影、動畫、電視劇、廣告、音樂錄影帶等各種影像媒體，在實際拍攝或繪製之前，以故事圖格的方式來說明影像的構成，將連續畫面以一次運鏡為單位作分解，並且標註運鏡方式、時間長度、對白、特效等。

Storyboard

● StoryBoard是蘋果在2011年的WWDC 介紹的Interface Builder的新功能。

● 其基本想法是將原本的xib進行升級。● 引入一個容器用於管理多個xib文件，並且這個容器可以通過拖拽設置xib之間的界面跳轉。

● 而這個容器就是被蘋果稱做的StoryBoard。

Storyboard

● 它將原有工程中的所有xib文件集成在一起，用拖曳的方式建立ViewController相關之間的跳轉關係，使得整個程序的UI跳轉邏輯清楚明了。

● Storyboard可以幫助你解決寫很多重複的跳轉方法的麻煩，節省很多時間，以便你能夠完全的專注於核心功能的實現上。

支援Storyboard

● XCode支援版本：Xcode 4.2 以上● iOS支援版本：iOS 5.x 以上

iOS 版本

http://chitika.com/ios-version-distribution-update

iOS 版本比例

http://chitika.com/ios-version-distribution

iOS 裝置比例

http://chitika.com/ios-traffic-distribution

Storyboard 優點

● 從Storyboard中很方便地整理出所有View Controller的界面間的調用關係。這一點對於

新加入項目組的開發同事來說，比較友好。

● 通過實現- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender 方法，每個View Controller的跳轉邏輯

都聚集在一處，這方便我們統一管理界面跳轉和傳遞數據。

Storyboard 缺點

● 與xib一樣，對版本管理有可能會是場災難。因

為是Storyboard實際上是多個xib的集合，所以

更容易讓多人編輯時產生衝突。

● Storyboard檔案只要點擊打開，即便什麼都不

做，文件依舊會被更改，所以上述的衝突幾乎是不可避免。

● iOS 5之前版本不支援。

與xib比較

Storyboard xib

iOS 支援狀況 iOS 5以上 幾乎所有版本

檔案數量 通常為一個 約等同viewcontroller 數量

畫面切換 [self.navigationController performSegueWithIdentifier:@"SegueLevel1" sender:self];

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

StoryBoard 簡單實作

這是很簡單的實作實作大網如下：

1. 新建StoryBoard範例程式

2. StoryBoard長什麼樣?3. 在StoryBoard新增場景

4. 設定StoryBoard Segues連結

5. 設定StoryBoard Segues轉場效果

6. StoryBoard 資料傳遞

使用平台

新建StoryBoard範例程式

StoryBoard長什麼樣?

StoryBoard長什麼樣?

故事板提供了一個空間，讓用戶能夠以可視化方式描述應用程序的設計和工作流程。每個場景都是一個用戶將遇到的屏幕。每個切換都是場景間過渡。● 故事板(Storyboard)

● 視圖控制器(ViewController)● 場景(Scene)● 切換(Segue)● 模態視圖(Modal View)

● 關係(Relationship)

StoryBoard長什麼樣?

● 故事板(Storyboard)：包含項目中場景、切換和關係定義的文件

● 視圖控制器(ViewController)：負責管理用戶與其IOS設備交互的類

● 場景(Scene)：視圖控制器和視圖的獨特組合● 切換(Segue)：切換是場景的過渡，常使用視覺過渡效果● 模態視圖(Modal View)：在需要進行用戶交互時，通過模

態視圖顯示在另一個視圖上

● 關係(Relationship)：類似於切換，用於某些類型的視圖控制器，如選項卡欄控制器。關係是在主選項卡欄的按鈕之間創建的，當用戶觸摸這些按鈕時會顯示獨立的場景

在StoryBoard新增場景

設定StoryBoard Segues連結

設定StoryBoard Segues轉場效果

StoryBoard 資料傳遞

-(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {

id secondVC = segue.destinationViewController;

[secondVC setValue:@"Destination" forkey:@"destinationString"];}

注意

● Static table views are only valid when embedded in UITableViewController instances

● IBOutlet連結的元件要等到viewDidLoad裡才出現○ 別太早取值，會得到nil

● iOS 5.x，不支援AutoLayout○ 記得要關掉，不然會直接crash

● Identifier 更名為 Storyboard ID

參考資料

● 書籍：○ 碁峯 iOS 6 程式開發實戰 136個快速上手的開發技巧

● 網站：○ http://developer.apple.com/○ http://blog.devtang.com/blog/○ http://chitika.com/○ http://www.oschina.net/

文件路徑

● 簡報：○ goo.gl/uB9un

● 文件：○ goo.gl/YeiwH

● Github○ goo.gl/PtzsN