三竹資訊 Storyboard簡報檔

1. Storyboard
By Rock
2013-05-16
Ver. 1.0

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

3. 想一下先！
● 能不能夠相容於iOS5以下的版本?
● 能不能完全取代.xib?
● 用了Storyboard之後會不會有什麼樣的限制?
● 用了Storyboard之後，可否跟舊的.xib共存?
● 若Device同時支援iPhone與iPad裝置，是否需
兩個Storyboard?
● 一Storyboard檔案，可否同時支援iPhone3G、
4/4s、5?

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

5. Storyboard
● StoryBoard是蘋果在2011年的WWDC 介紹的
Interface Builder的新功能。
● 其基本想法是將原本的xib進行升級。
● 引入一個容器用於管理多個xib文件，並且這個
容器可以通過拖拽設置xib之間的界面跳轉。
● 而這個容器就是被蘋果稱做的StoryBoard。

6. Storyboard
● 它將原有工程中的所有xib文件集成在一起，用
拖曳的方式建立ViewController相關之間的跳
轉關係，使得整個程序的UI跳轉邏輯清楚明
了。
● Storyboard可以幫助你解決寫很多重複的跳轉
方法的麻煩，節省很多時間，以便你能夠完全
的專注於核心功能的實現上。

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

8. iOS 版本
http://chitika.com/ios-version-distribution-update

9. iOS 版本比例
http://chitika.com/ios-version-distribution

10. iOS
裝置比例
http://chitika.com/ios-traffic-distribution

11. Storyboard 優點
● 從Storyboard中很方便地整理出所有View
Controller的界面間的調用關係。這一點對於
新加入項目組的開發同事來說，比較友好。
● 通過實現- (void)prepareForSegue:
(UIStoryboardSegue *)segue sender:(id)
sender 方法，每個View Controller的跳轉邏輯
都聚集在一處，這方便我們統一管理界面跳轉
和傳遞數據。

12. Storyboard 缺點
● 與xib一樣，對版本管理有可能會是場災難。因
為是Storyboard實際上是多個xib的集合，所以
更容易讓多人編輯時產生衝突。
● Storyboard檔案只要點擊打開，即便什麼都不
做，文件依舊會被更改，所以上述的衝突幾乎
是不可避免。
● iOS 5之前版本不支援。

13. 與xib比較
Storyboard xib
iOS 支援狀況 iOS 5以上 幾乎所有版本
檔案數量 通常為一個 約等同viewcontroller 數
量
畫面切換 [self.navigationController
performSegueWithIdentif
ier:@"SegueLevel1"
sender:self];
[self.navigationController
pushViewController:
viewController animated:
YES];

14. StoryBoard 簡單實作
這是很簡單的實作
實作大網如下：
1. 新建StoryBoard範例程式
2. StoryBoard長什麼樣?
3. 在StoryBoard新增場景
4. 設定StoryBoard Segues連結
5. 設定StoryBoard Segues轉場效果
6. StoryBoard 資料傳遞

15. 使用平台

16. 新建StoryBoard範例程式

17. StoryBoard長什麼樣?

18. StoryBoard長什麼樣?
故事板提供了一個空間，讓用戶能夠以可視化方
式描述應用程序的設計和工作流程。
每個場景都是一個用戶將遇到的屏幕。每個切換
都是場景間過渡。
● 故事板(Storyboard)
● 視圖控制器(ViewController)
● 場景(Scene)
● 切換(Segue)
● 模態視圖(Modal View)
● 關係(Relationship)

19. StoryBoard長什麼樣?
● 故事板(Storyboard)：包含項目中場景、切換和關係定義的
文件
● 視圖控制器(ViewController)：負責管理用戶與其IOS設備
交互的類
● 場景(Scene)：視圖控制器和視圖的獨特組合
● 切換(Segue)：切換是場景的過渡，常使用視覺過渡效果
● 模態視圖(Modal View)：在需要進行用戶交互時，通過模
態視圖顯示在另一個視圖上
● 關係(Relationship)：類似於切換，用於某些類型的視圖控
制器，如選項卡欄控制器。關係是在主選項卡欄的按鈕之
間創建的，當用戶觸摸這些按鈕時會顯示獨立的場景

20. 在StoryBoard新增場景

21. 設定StoryBoard Segues連結

22. 設定StoryBoard Segues轉場效果

23. StoryBoard 資料傳遞
-(void) prepareForSegue:(UIStoryboardSegue
*)segue sender:(id)sender {
id secondVC = segue.
destinationViewController;
[secondVC setValue:@"Destination" forkey:
@"destinationString"];
}

24. 注意
● Static table views are only valid when embedded in
UITableViewController instances
● IBOutlet連結的元件要等到viewDidLoad裡才出現
○ 別太早取值，會得到nil
● iOS 5.x，不支援AutoLayout
○ 記得要關掉，不然會直接crash
● Identifier 更名為 Storyboard ID

25. 參考資料
● 書籍：
○ 碁峯 iOS 6 程式開發實戰 136個快速上手的開發技巧
● 網站：
○ http://developer.apple.com/
○ http://blog.devtang.com/blog/
○ http://chitika.com/
○ http://www.oschina.net/

26. 文件路徑
● 簡報：
○ goo.gl/uB9un
● 文件：
○ goo.gl/YeiwH
● Github
○ goo.gl/PtzsN