原文鏈接

本文翻譯自 Storyboards Tutorial in iOS 9: Part 1

原文作者:Caroline Begbie

---

Storyboard是在iOS5之后新增的一個令人興奮的功能,使用Storyboard可以節省很多的時間來構建你的app界面.

為了向你介紹什么是Storyboard,我會以一張圖片為例.下面這張圖就是你在本教程中使用Storyboard完成的一個app.

• 你也許還不是十分了解這個app是做什么的,但是你可以清楚的看到它哪些界面,以及這些界面關系.

• 你可以在Storyboard看到所有的ViewController的布局,并且可以描述它們之間的聯系.使用Storyboard中,你可以更好的理解在app中所有的界面.

• Storyboard可以描述在多個場景之間的過渡(transitions).這些過渡被稱作”segues”.在Storyboard,你可以通過正確的連接你的ViewController來創建這些segues.感謝segues!你只需要很少的代碼管理你的UI.
• Storyboard可以讓tableView與基本的cell和靜態cell的工作更容易.你幾乎可以完全在Storyboard中設計你的tableView,這樣就減少了大量的代碼.
• Storyboard可以讓Auto Layout更加容易,使用Auto Layout允許你在元素之間的數學關系,確定這些元素之間的位置關系.這個強大的工具可以讓你更容易操作不同尺寸和大小的設備.在這個教程中你將使用Auto Layout,但是關于Auto Layout的知識在不在本教程的范圍之內,不過你可以在Auto Layout Tutorial或者watch the video series了解更多關于Auto Layout的內容.

在這篇Storyboard教程中,你將會創建一個簡單地app,允許你創建一個玩家和游戲以及他們技能的列表,在學習的過程中,你將學會在一些最常見的任務中使用Storyboard.

讓我們開始吧!

打開Xcode,接著創建一個新的工程,選擇 Single View Application.如下圖:

之后Xcode會創建這個項目,Xcode的主窗口如下圖:

新的項目包含兩個類, AppDelegate.swift 和 ViewController.swift,以及本教程的關鍵:Main.storyboard文件.
這個app僅支持豎屏,所以需要在General->Deployment Info -> Device Orientation取消Landscape Left和Landscape Right選項.
現在讓我們看一看Storyboard.在項目導航欄里點擊Main.storyboard,之后會在 Interface Builder編輯器里看到Storyboard.

一個viewController的的storyboard官方術語是”場景(scene)”,你可以使用這個術語.所謂場景(scene)就是一個控制器在storyboard中的顯示.

你可以看到包含一個空view的簡單viewController.在storyboard,左邊的箭頭指向一個ViewController,這個箭頭代表這個ViewController是一個初始控制器.

在storyboard編輯器中,你可以從右下角Object Library中拖拽出一些控件來為你的ViewController設計布局.你會看到僅僅一瞬間就完成了,它是多么神奇啊!

---

Note:

你可能會注意到在storyboard中,默認的控制器是正方形的.Xcode7可以為這些默認控制器設置Auto Layout和Size Classes.Auto Layout和Size Classes允許你靈活地改變用戶界面的尺寸,這對于有許多尺寸的iPhone和iPad來說是非常有用的.為了能夠學到更多關于size classes的內容,查看Adaptive Layout video tutorial series,在本課程中,你會把可選的步驟場景在你的storyboard中,這樣你就可以更容易的看到最終屏幕上的樣子.

---

在你探索之前,調整模擬場景為iPhone6/6s.
在Document Outline選擇 View Controller .如果你沒有看到Document Outline,點擊storyboard中左下角的這個按鈕:

在Attributes Inspector底下的Simulated Metrics(模擬度量)屬性,改變Size為iPhone 4.7 inch,如圖:

在storyboard中,這個尺寸是iPhone6/6s的屏幕尺寸.
在storyboard中,“inferred”是Simulated Metrics里默認的設置.Simulated Metrics是一個在storyboard中的視覺輔助設計,也就是你的屏幕最終的樣子.僅僅需要記住的是,它們不會在運行時被使用.
為了體會storyboard是如何工作的,可以在右下角控制器面板的Object Library中拖拽一些控件:

當你拖拽這些控件的時候,它們會出現在左側的 Document Outline 中:

storyboard中顯示了你創建的所有控制器,目前僅僅有一個view controller (或者是scene)在你的storyboard中,但是在本教程中你會加入其他幾個控制器.在這個場景之上有,一個微型版的Document Outline,稱作Dock.

在這個場景中,Dock顯示了頂層的對象,每一個場景都擁有至少一個View Controller 對象, 一個 First Responder 對象, 和一個 Exit 選項,但是它也可能擁有其他頂級的對象.Dock可以很方便的連接這些outlet和action.如果你想要連接其他的view controller,你可以很簡單地從Dock中拖拽它的圖標.

---

Note:

你可能不太想使用First Responder.它是一個代理對象,指的是任何對象在任何給定的時間內的第一響應狀態.舉一個例子,你可以把按鈕的Touch Up Inside事件連接到First Responder的selector上.如果在某個時候,一個文本框是輸入的焦點,然后你可以按下按鈕來讓作為第一響應者的文本字段拷貝到粘貼板.

---

運行這個app,它應該看起來和你在編輯器里設計的完全一樣(你的可能看上去不同于下面的截圖—這僅僅是為了演示,不會在以后的教程中使用):

你定義的這個 View Controller作為初始的控制器—但是app怎樣才能加載它呢?看一看應用程序的代理就可以找到答案.打開AppDelegate.swift你會看到源代碼從這里開始.

import UIKit@UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate {var window: UIWindow?func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {// Override point for customization after application launch.return true}

在AppDelegate這個類的指定文件的頭部,@UIApplicationMain屬性作為模塊的入口點.這個屬性使用storyboard所必須的.你的應用程序委托繼承自UIResponder,并且他還有一個UIWindow屬性.所有的方法都是空的.甚至是application(_:didFinishLaunchingWithOptions:) 也只是簡單地返回了true.

這個秘密在一個叫做info.plist的文件中.在導航欄里點擊 Info.plist 你將看到下面這些內容:

Storyboard app使用的這個鍵UIMainStoryboardFile,也被稱為”storyboard file base name”,為了能夠指定Storyboard的名稱,必須在加載被命名的storyboard文件,自動地從storyboard中實例化”Initial View Controller”,然后把控制器的view添加到一個新的UIWindow對象上.?你也可以在General tab里Deployment Info下地Project Settings里看到這個部分:

現在來創建一個包含幾個view controller的Ratings app吧~

僅僅把它添加到我的標簽里

你將要創建的Ratings app有一個TabBarController,并且跟著兩個item,使用storyboard非常容易創建.

你將會在一個空的storyboard上開始創建,所以切換回Main.storyboard ,然后刪除默認創建的view controller.這可以通過在Document Outline 點擊View Controller 然后按下delete鍵,就可以刪除了.

為了方便,再一次改變Simulated Metrics讓其作為一個iPhone來顯示這個場景.當你做之前,在Document Outline選中Tab Bar Controller,然后在右側的 Attributes Inspector ,改變 Size 為iPhone 4.7 inch.這兩個view controller也會跟著改變,大小都變為 iPhone 6/6s的尺寸.

這個新的 Tab Bar Controller 已經預配置好了兩個view controller.UITabBarController也被稱作container view控制器,因為它包含了一個或者更多其他的視圖控制器.其他兩個常用的容器是Navigation Controller 和Split View Controller(在后面你將使用的是Navigation Controller).

容器之間的關系是由Tab Bar Controller 和 view controller 的箭頭代表的.下圖看到的在箭頭中間的圖標代表特定的嵌入關系.

---

Note:

如果你想同時移動或縮小Tab Bar Controller和它的附加視圖控制器,你可以按住?-點擊或點擊和拖拽多個選中的場景.這才有可能使他們在一起.(選中的場景有一條藍色的輪廓.)

---

往第一個view controller(當前顯示的標題是”Item 1”)中拖拽一個UILabel,雙擊,然后設置這個label的標題為”First Tab”.然后也拖拽一個UILabel在第二個view controller(“Item 2”),設置這個label的標題為”Second Tab”.當你在這兩個控制器之間接切換時確實看到發生了某些變化.

---

Note:

當你縮小編輯器的時候,你是不能往這些控制器里拖拽控件的.你可以通過雙擊這個工作區間來返回到正常縮放尺寸.

---

編譯并且運行(Build & Run),之后你會在控制臺里看到類似下面的錯誤信息:
Ratings[18955:1293100] Failed to instantiate the default view controller for UIMainStoryboardFile ‘Main’ - perhaps the designated entry point is not set?
幸運地是,錯誤信息非常清楚 — 你從來就沒有設置一個入口點,也就是說在你刪除默認創建的控制器之后,你并沒有設置Initial View Controller.為了解決這個問題,選中Tab Bar Controller然后在右側的 Attributes Inspector 里勾選 Is Initial View Controller.

在工作區間里,這個箭頭之前指向被刪除的view controller ,現在指向的是這個Tab Bar Controller.

這就意味著,當你運行app的時候,UIApplication會讓Tab Bar Controller 作為主屏幕.運行app嘗試一下.這個app現在有一個tab bar,并且你可以在兩個two view controller之間進行切換:

---

Tip:

想要改變 initial view controller,你也可以在view controller之間拖拽這個箭頭.

---

Xcode附帶了構建一個帶標簽app的模板(也叫標簽應用模板),你可以使用這個模板,但是它卻不能很好地知道這應該如何工作,所以如果你覺得有必要,你也可以手動創建一個Tab Bar Controller.

---

Note:

如果你的Tab Bar Controller連接了超過5個子控制器,當你運行app的時候,他會自動地把這些控制器都加上.多么簡潔啊!

---

添加一個Table View Controller

目前只有兩個UIViewController連接到了 Tab Bar Controller上.現在,你需要用一個UITableViewController來替換第一個UIViewController.

在Document Outline欄里點擊第一個view controller ,然后按delete鍵刪除.然后從Object Library中拖拽出一個新的Table View Controller到先前view controller的位置.

現在你需要把這個Table View Controller放在一個導航控制器里.在Table View Controller選中情況下,再Xcode的菜單欄里選擇Editor\Embed In\Navigation Controller .這也就添加了另一個控制器.

你也可能會從Object Library拖拽一個已經嵌入tableview 的Navigation Controller,并且這個個嵌入命令也能節省很多時間.
因為這個Navigation Controller 也是view controller的容器(就好像Tab Bar Controller),它有一個關系指向Table View Controller.你也可以在看見Document Outlin里看到這個關系.

可以注意到的是Table View Controller已經嵌入到了一個導航欄里.Interface Builder會自動把它放在那里,因為這個控制器將顯示在這個Navigation Controller的框架里.那并不是一個真正的UINavigationBar對象,但它是一個模擬的對象.Simulated Metrics將在這個控制器里推斷上下文,然后在Navigation Controller會顯示一個導航欄.在一個 Tab Bar Controller里會顯示一個標簽欄,等等…

新的控制器是正方形的.當你把它們嵌入到 Tab Bar Controller ,一瞬間,它們就會改變它們的大小里匹配它們的父視圖控制器.
為了把這兩個新的控制器連接到Tab Bar Controller,按住control并且拖動Tab Bar Controller到Navigation Controller上.當你放首位的時候,會出現一個小的.選擇Relationship Segue – view controllers選項:

這樣在這兩個控制器之間就創建了一個新的箭頭關系.這也是一個嵌入關系,正如你看到的 Tab Bar Controller.
Tab Bar Controller有兩個嵌入的關系,對應每一個標簽.這個Navigation Controller本身也與Table View Controller有一個嵌入關系.

當你創建了這個新連接的時候,這個Tab Bar Controller就添加了一個新的標簽.并且有一個簡單地名字為”Item”.對于這個app來說,如果你想讓這個新的控制器作為第一個標簽,那么你只可以拖動來改變的它們的順序.

嘗試運行一下這個app.現在第一個導航控制器里的標簽包含了一個 table view.

只要你把一個view controller連接到了Tab Bar Controller上,你就可以在Document Outline或者這個控制器的底部看到生成了一個Tab Bar Item對象.你可以在Tab Bar Controller上使用Tab Bar Item來配置標簽的標題和圖標.
選中 Navigation Controller里的Tab Bar Item,之后在Attributes inspector里設置標題為Players.

用相同的方式給view controller的Tab Bar Item重命名為Gestures.一個精心設計的app也應該在這些標簽上放一些圖片, 教程的資源包含了一個為images的子文件夾.拖拽這個文件夾到工程中的 Assets.xcassets文 里.

你可能猜到了,給Gestures項的是Gestures.png.
一個內嵌在Navigation Controller中view controller有一個Navigation Item,用來配置導航欄(navigation bar).在Document Outline離選擇Table View Controller的Navigation Item然后在Attributes inspector中改變它的標題為Players.

注意到了么?現在在Document Outline里的Item已經變為了Players啦~

另外,你也可以雙擊導航欄然后改變標題.需要注意的是,你應該雙擊Table View Controller中的模擬導航欄,而不是在Navigation Controller里真正的導航欄對象.

運行app,你就會驚嘆于你的漂亮的標簽欄,然而卻沒有寫一行代碼!

總結

以上是生活随笔為你收集整理的iOS 9 Storyboard 教程(一上)的全部內容，希望文章能夠幫你解決所遇到的問題。

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