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的位置.
