在本系列Storyboard教程的第一部分，我們已經學習了如何使用Interface Builder創建并連接不同的視圖控制器，還有如何直接在Storyboard編輯器中創建自定義表項。

本教程的第二部分，也是最終部分，內容包括segue（轉場），static table view cell（靜態表項），添加玩家頁面和游戲選擇頁面！

好，現在讓我們一起探索Storyboard的其他酷炫特性吧！

轉場（Segue）

讓我們向Storyboard中繼續添加視圖控制器，創建一個讓用戶添加新玩家的頁面。

打開Main.storyboard，在包含表視圖的那個Players場景的導航欄右側拖入一個Bar Button Item（欄按鈕項），在屬性檢查器中將Identifier設為Add，使其成為標準添加（加號）按鈕。

當用戶點按這個按鈕時，你希望App會彈出一個模態頁面讓用戶輸入新玩家的詳細信息。

在Players場景的右邊拖入一個新的Navigation Controller（導航控制器）。記得雙擊面板可以縮放畫面騰出空間。新加入的導航控制器附帶一個表視圖控制器，很方便。

這里有個小技巧：選擇剛才在Players頁面里加入的加號按鈕，按住control鍵把它拖向新建的導航控制器，松手，在彈出的小選單中選擇modal（模態）。

還記得嗎：當Storyboard面板處于縮小狀態時，無法添加或修改內容。如果在創建轉場時遇到問題，請嘗試雙擊放大！

現在Players頁面和導航控制器之間多了一個新箭頭。

這種連接的類型叫做segue（轉場，讀作seg-way，源自電影術語，原指兩個場景間的過渡銜接），表示一個頁面到另一個頁面的過渡。此前我們所見的Storyboard連接描述的都是視圖控制器的包含關系，而轉場是用來切換頁面的。轉場可以由點擊按鈕、表項、手勢等條件觸發。

使用轉場的好處是，再也不用為呈現新頁面寫代碼了，也不用把按鈕連接到IBAction方法上，你只需要在Storyboard中從一個欄按鈕項拖到下一個頁面就可以創建過渡了。（注：如果你的控件已經綁定了IBAction連接，該連接會被轉場屏蔽。）

運行App，點擊加號按鈕，一個新的表視圖會從屏幕下方滑入。

這就是所謂的模態轉場。新頁面完全覆蓋原頁面，在關閉模態頁面之前，用戶只能在新頁面進行交互。后面我們還會看到push（入棧）轉場，這種轉場會把新頁面壓入導航控制器的導航棧（navigation stack）。

現在新頁面還沒什么用，連關閉頁面返回都做不到，有去無回，因為轉場是單向操作。

為返回頁面，Storyboard提供了unwind（回退）轉場。接下來我們要實現返回功能，主要分三個步驟：

1. 創建讓用戶點選的控件，通常是個按鈕。

2. 在你想返回的控制器創建回退方法。

3. 在Storyboard中將控件與回退方法連接。

首先打開Main.storyboard，選擇新的表視圖控制器場景（叫“Root View Controller”的那個）。雙擊導航欄，把標題改成“Add Player”。然后在導航欄添加兩個欄按鈕項，在屬性檢查器中設置左側按鈕的Identifier為Cancel，右側按鈕為Done，并將右側按鈕的Style改成Done。

現在終于可以創建回退轉場了。在PlayersViewController.swift（不是detail那個）的類定義下面添加如下的回退方法：

@IBAction func cancelToPlayersViewController(segue:UIStoryboardSegue) {
     dismissViewControllerAnimated(true, completion: nil)
}

@IBAction func savePlayerDetail(segue:UIStoryboardSegue) {
    dismissViewControllerAnimated(true, completion: nil)
}

這兩個方法在調用時都會解除這個控制器。后面你會改寫savePlayerDetail，讓它名副其實地履行自己的職責。

最后回到Interface Builder，把Cancel按鈕和Done按鈕連接到相應的action方法上。按住control從欄按鈕拖到視圖控制器上面的出口（exit）對象上，然后從彈出的選單中選擇正確的action名稱。

運行App，點擊加號按鈕，然后測試Cancel和Done按鈕。僅僅幾行代碼就可以實現如此功能。

靜態表項（Static Cell）

完成這部分后，添加玩家頁面會像這樣：

選中Add Player場景的表視圖，在屬性檢查器中設Content為Static Cells，把Style由Plain改成Grouped，并為表視圖設置兩個分段（section）。

修改Sections屬性值時，編輯器會復制已有的分段。（你也可以在左側的文檔大綱中選擇特定分段并復制。）

最終頁面每個分段應該只有一行，請在面板或文檔大綱中選中并刪除多余的表項。

在文檔大綱中選擇最上面的表視圖分段，在屬性選擇器中設Header字段值為Player Name。

選擇新建的文本字段，按住control拖到swift文件的類定義下面。在彈出框中將新outlet命名為nameTextField并點擊Connect。在點擊Connect后Xcode會在PlayersDetailViewController類中添加屬性并在Storyboard中建立連接：

為表項上的視圖創建outlet對于原型表項來說可能會遇到問題，這在上一部分的教程中提到過，不過靜態表項就不必擔心了，因為每個靜態表項都只會有唯一的實例，把子視圖與視圖控制器的outlet連接完全沒問題。

把第二分段的靜態表項的Style設為Right Detail，這會套用一個標準表項樣式，雙擊左側的label，把文本改為Game，然后為該表項設定Disclosure Indicator（展開方向標）附件。

添加玩家頁面的最終設計效果如圖：

目前在Storyboard中設計的頁面尺寸都符合iPhone 5的4英寸屏幕，高度為568點。當然你的App應當在不同的屏幕尺寸下正常工作，你可以在Storyboard中預覽所有的尺寸。

在工具欄上點開輔助編輯器，選擇跳轉欄中的Preview。點擊輔助編輯器左下角的加號添加新的預覽尺寸，如果想刪除一個屏幕尺寸，選中并按delete鍵即可。

一個簡單的評分App不需要什么花哨的東西，只是使用表視圖控制器，頁面自動縮放以填滿屏幕空間。當你想為不同的屏幕尺寸適配布局時，你需要使用Auto Layout和Size Classes。

構建并運行App，你會注意到添加玩家頁面依然是空白！

打開PlayerDetailsViewController.swift文件，刪除這一條代碼往下的所有內容（注意不要刪掉類自己的括號）：

// MARK: - Table view data source

現在，自從加入這個類以后Xcode顯示的那幾條警告（warning）也應該消失了。

運行App，檢查使用靜態表項的新頁面。完全沒有寫代碼，其實剛才還刪了一段代碼！

還要了解一點：靜態表項只在UITableViewController中有效，雖然Interface Builder允許你在常規UIViewController中的表視圖對象里添加靜態表項，運行時不會發揮作用，原因是UITableViewController中額外實現了一些用來處理靜態表項數據源的操作。在項目中誤用的話Xcode甚至會拒絕編譯，輸出報錯信息：“Illegal Configuration: Static table views are only valid when embedded in UITableViewController instances”。

另一方面，原型表項在常規視圖內的表視圖中可以正常工作，但在nib中就沒戲了。目前來講，使用原型表項或靜態表項就必須使用Storyboard。

你也有可能想在一個表視圖中混合使用靜態表項和常規的動態表項，很遺憾的是目前的SDK對此支持欠佳。如果你的App有這種需求，請參考蘋果開發者官方論壇上的相關帖子尋求可行方案。

注：如果構建的頁面上包含的靜態表項多到無法在可視范圍內全部展示，你可以在Interface Builder中直接利用滾動手勢查看，這個功能可能不容易發現，但確實管用。

不過總的來說該寫代碼的地方只能靠代碼，甚至靜態表項的表視圖也是如此。前面在把文本字段拖進第一個表項的時候，你可能發現尺寸不大合適，文本字段周圍有一點白邊，而且用戶看不到文本字段的實際范圍，如果正好點在邊框上，沒有彈出鍵盤，用戶會感到困惑。

為避免這種情況，你應該讓那一行任意位置接受的點擊都可以喚出鍵盤。要這樣做很容易，打開PlayerDetailsViewController.swift并如下添加

tableView(_:didSelectRowAtIndexPath:)`方法：
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
if indexPath.section == 0 {
     nameTextField.becomeFirstResponder()
    }
}

代碼的意思是如果用戶點按第一個表項，App應該激活相應文本字段。該分段只有一個表項，你只需使用分段的索引。設文本字段為第一響應者會自動喚出鍵盤。這只是一小處用戶體驗優化，但就是這樣一個小細節可以給用戶省去一點煩惱。

小訣竅：添加delegate委托方法或重寫視圖控制器方法時，直接輸入方法名開頭的幾個字母（前面不加func），即可在自動補全列表中選擇正確的方法。

另外，還應該在Storyboard的屬性檢查器中把相應表項的Selection Style設為None（原本是Default），否則用戶點按文本字段周圍的邊框時該行會高亮。

好啦，添加玩家頁面設計完成。現在我們要實現功能。

為添加玩家頁面實現功能

現在先不管Game這行，只輸入玩家名稱。

當用戶點擊Cancel按鈕時，頁面關閉，用戶剛剛輸入的數據隨之作廢。這部分功能直接用回退轉場已經實現好了。

而當用戶點擊Done時，你應該創建一個新的Player對象，參照用戶輸入填充屬性后更新玩家列表。

轉場即將發生時，prepareForSegue(:sender:)會被調用。你可以重寫這個方法，在退出視圖之前將數據保存到一個新的Player對象中。

注：不要擅自調用prepareForSegue方法，這是UIKit通知你一個轉場剛剛被觸發的消息。

在PlayerDetailsViewController.swift中，先在類上添加一條屬性：

var player:Player!

這條語句并不會將屬性實例化，但其中的感嘆號把該變量定義為隱式解包可選量（implicitly unwrapped optional），意思是該變量必須被實例化，而且你確定它在被使用前一定有值。

接下來在PlayerDetailsViewController.swift中添加以下方法：

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "SavePlayerDetail" {
     player = Player(name: self.nameTextField.text, game: "Chess", rating: 1)
    }
}

prepareForSegue(_:sender:)方法判斷轉場的標識符是否為SavePlayerDetail，當且僅當判定結果為真時，創建一個新的Player實例，其中game和rating均取默認值。如果此時運行，App會崩潰，因為不存在標識符SavePlayerDetail`，player不會被實例化，結合前面的隱式解包可選量定義，引發運行時錯誤。

小提示：如果App出現詭異的崩潰問題，而且代碼看起來似乎并無邏輯錯誤，那么可能是在代碼中刪除過對象或修改過對象名，以致Storyboard引用對象出錯。

在Main.storyboard中，在文檔大綱里找到Add Player場景，選擇連接到savePlayerDetail這個action的回退轉場，將其標識符改為SavePlayerDetail：

轉到PlayersViewController類，如下修改回退轉場方法savePlayerDetail(segue:)：

@IBAction func savePlayerDetail(segue:UIStoryboardSegue) {
let playerDetailsViewController = segue.sourceViewController    as PlayerDetailsViewController

//add the new player to the players array
players.append(playerDetailsViewController.player)

//update the tableView
 let indexPath = NSIndexPath(forRow: players.count-1,   inSection: 0)
 tableView.insertRowsAtIndexPaths([indexPath],  withRowAnimation: .Automatic)

//hide the detail view controller
dismissViewControllerAnimated(true, completion: nil)
}

這會通過傳入方法的轉場引用獲取一個指向PlayerDetailsViewController的引用，并借此向數據源中使用的Player數組添加新的Player對象，然后通知表視圖在末尾新增了一行，因為表視圖和數據源應當保持同步。

你可能會直接調用tableView.reloadData()，但還是為新行插入的操作加入動畫效果比較好。UITableViewRowAnimation.Automatic會以插入新行的位置自動選用合適的動畫，十分方便。

試試看，現在應該可以向列表中加入新玩家了！

性能

現在Storyboard已經有好幾個視圖控制器了，你或許會擔心性能問題，不過一次載入整個Storyboard并不是什么苦活，Storyboard不會立即實例化所有的視圖控制器，立即載入的只有初始視圖控制器。而由于這里的初始視圖控制器是一個分頁欄控制器，包含的兩個視圖控制器也會被載入（第一個分頁標簽的Players場景和第二個分頁標簽的場景）。

其他視圖控制器只有在轉場過去的時候才會被實例化。而當關閉視圖控制器的時候，它們會立即被釋放，所以內存中只有活躍使用的視圖控制器，就好像分別使用nib一樣。

實踐是檢驗真理的唯一標準，在PlayerDetailsViewController類中添加構造器（initializer）和析構器（deinitializer）：

required init(coder aDecoder: NSCoder) {
    println("init PlayerDetailsViewController")
    super.init(coder: aDecoder)
}

deinit {
     println("deinit PlayerDetailsViewController")
}

你剛剛重寫了init(coder:)和deinit方法，讓它們向Xcode調試面板輸出信息。現在運行App，打開添加玩家頁面，你會發現視圖控制器只有在被打開的時候才會分配。

關閉添加玩家頁面的時候，無論是點擊Cancel還是Done都會看到deinit析構器的println()輸出。如果再次打開這個頁面，你還會看到init(coder:)的輸出，這樣你應該相信這個事實了：視圖控制器是按需加載的，就像手動載入nib一樣。

注：如果你以前用過nib，那么你應該會很熟悉構造器init(coder:)，這部分機制延續到了Storyboard中：使用的方法依然是init(coder:)，awakeFromNib()和viewDidLoad()。Storyboard可以看成附帶了過渡信息和關聯信息的一系列nib的集合，而Storyboard內的視圖和視圖控制器使用與nib相同的方式編碼并解析。

游戲選擇頁面

在添加玩家頁面中點選Game行應該打開一個新頁面并讓用戶從列表中選擇一個游戲，這意味著下一步要加入另外一個表視圖控制器，不過這次的頁面不是模態顯示，而是壓入導航棧。

向Storyboard中拖入一個新的表視圖控制器，在添加玩家頁面中選擇Game表項（確保選中的是整個表項，而不是其中的label），然后按住control拖到新建的表視圖控制器，在兩者之間創建轉場。在彈出的選單中選擇轉場類型為Push，然后在屬性檢查器中把轉場的Identifier標識符設為PickGame。

雙擊導航欄，將新場景命名為Choose Game。設原型表項的Style為Basic（基本），設重用標識符為GameCell，如圖：

1421214153697020.png

現在為新頁面添加數據。在GamePickerViewController.swift中，在開頭添加games屬性，然后重寫viewDidLoad函數，像這樣：

var games:[String]!

override func viewDidLoad() {
    super.viewDidLoad()
    games = ["Angry Birds",
       "Chess",
       "Russian Roulette",
       "Spin the Bottle",
       "Texas Hold'em Poker",
       "Tic-Tac-Toe"]
}

你剛剛新增了一個叫做games的字符串數組，并在viewDidLoad()中用寫定的內容填充數組。

然后如下替換數據源方法：

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
     return 1
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
     return games.count
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
     let cell = tableView.dequeueReusableCellWithIdentifier("GameCell", forIndexPath: indexPath) as UITableViewCell
    cell.textLabel?.text = games[indexPath.row]
    return cell
}

上述代碼將games數組設為數據源并替換表項的textLabel中的字符串值。

只要數據源準備就緒就應該能正常工作。運行App，點選Game行，新的游戲選擇頁面會滑入屏幕。現在點擊各項不會有什么效果，但由于該頁面呈現在導航棧上，你可以直接點擊返回按鈕，返回原來的添加玩家頁面。

不用寫代碼就可以喚出新頁面，是不是很贊？只要按住control從靜態表項拖到新場景，寫的代碼只有填充表視圖的內容，而且一般來講比原地設計好的列表要靈活些（因為games數組更方便修改）。

當然新頁面要返回數據才有用，為此你要添加一個新的回退轉場。

在GamePickerViewController類的上面添加持有選中的游戲的名稱和索引的屬性：

var selectedGame:String? = nil
var selectedGameIndex:Int? = nil

然后修改cellForRowAtIndexPath:：

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("GameCell", forIndexPath: indexPath) as UITableViewCell
     cell.textLabel?.text = games[indexPath.row]

     if indexPath.row == selectedGameIndex {
        cell.accessoryType = .Checkmark
    } else {
     cell.accessoryType = .None
    }
    return cell
}

這會在當前所選游戲對應的表項附上選中標記（對號），這對用戶體驗來說不可或缺。

接著添加tableview(tableview:didSelectRowAtIndexPath:)方法：

    override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
     tableView.deselectRowAtIndexPath(indexPath, animated: true)

    //Other row is selected - need to deselect it
    if let index = selectedGameIndex {
        let cell = tableView.cellForRowAtIndexPath(NSIndexPath(forRow: index, inSection: 0))
     cell?.accessoryType = .None
}

    selectedGameIndex = indexPath.row
    selectedGame = games[indexPath.row]

    //update the checkmark for the current row
    let cell = tableView.cellForRowAtIndexPath(indexPath)
    cell?.accessoryType = .Checkmark
}

這段代碼首先會取消選擇剛剛點選的行，外觀會從灰色高亮變回常規的白色，然后移除對號，并在剛剛點選的行上附加選中標記。

運行App，測試是否正常。點選一個游戲名，相應行會附上選中標記，點選另一個游戲名，選中標記也隨之移動。

按要求來說點選某行之后應該關閉該頁面，不過現在并沒有自動返回，因為尚未綁定回退轉場。

在PlayerDetailsViewController.swift的類上面添加一個持有被選游戲的屬性，以便之后在Player對象中保存。令其默認值為"Chess"，這樣一來新玩家總會有一個選定的游戲。

var game:String = "Chess"
同樣在該文件中改寫viewDidLoad()以在靜態表項中游戲名稱：

override func viewDidLoad() {
super.viewDidLoad()
detailLabel.text = game
}
添加回退轉場方法：

@IBAction func selectedGame(segue:UIStoryboardSegue) {
    let gamePickerViewController = segue.sourceViewController as GamePickerViewController
    if let selectedGame = gamePickerViewController.selectedGame {
     detailLabel.text = selectedGame
     game = selectedGame
 }
     self.navigationController?.popViewControllerAnimated(true)
}

上述代碼會在用戶從選擇游戲場景選中一個游戲后執行。該方法按照選中的游戲更新頁面上的label和game屬性，然后將GamePickerViewController彈出導航棧。

在Main.storyboard中按住control從表項拖到Exit出口對象，然后從彈出列表中選擇selectedGame:。

設該回退轉場標識符為SaveSelectedGame。

運行App試試看，創建新玩家，點選Game行并選擇一個游戲。

在GamePickerViewController中添加prepareForSegue(segue:)方法：

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if segue.identifier == "SaveSelectedGame" {
        let cell = sender as UITableViewCell
        let indexPath = tableView.indexPathForCell(cell)
        selectedGameIndex = indexPath?.row
        if let index = selectedGameIndex {
        selectedGame = games[index]
    }
 }
}

prepareForSegue(_:sender:)的sender參數是引發轉場的對象，在這里對應選中的游戲表項，所以你可以利用表項的indexPath來在games數組中確定選中的游戲并在轉場發生之前更新selectedGame。

現在運行App，選擇游戲后玩家的游戲信息會隨之更新了。

接下來改寫PlayerDetailsViewController的prepareForSegue方法來返回選中的游戲，而不是寫定的"Chess"。這樣一來，完成添加玩家的操作后，Players場景中會顯示玩家實際選擇的游戲。

在PlayerDetailsViewController.swift中如下改寫prepareForSegue(_:sender:)方法：

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if segue.identifier == "SavePlayerDetail" {
     player = Player(name: nameTextField.text, game:game, rating: 1)
 }
}

完成添加玩家頁面并點擊Done后，玩家列表會更新正確的游戲信息。

還有一點，當你選擇一個游戲，返回添加玩家頁面，然后嘗試重新選擇游戲的時候，之前選定的游戲應該顯示選中標記。解決方法是在轉場時把PlayerDetailsViewController中保存的選中的游戲傳給GamePickerViewController。

還是在PlayerDetailsViewController.swift中，于prepareForSegue(segue:,sender:)方法的末尾添加以下代碼：

if segue.identifier == "PickGame" {
    let gamePickerViewController = segue.destinationViewController as GamePickerViewController
     gamePickerViewController.selectedGame = game
}

注意：現在有兩條檢查segue.identifier的if語句。SavePlayerDetail是返回玩家列表的回退轉場，PickGame是前往游戲選擇頁面的入棧轉場。添加的代碼會在GamePickerViewController的視圖加載之前更新其中的selectedGame。

打開GamePickerViewController.swift并在viewDidLoad()末尾添加以下代碼：

if let game = selectedGame {
     selectedGameIndex = find(games, game)!
}

這兩行代碼獲取從PlayerDetailsViewController傳進的selectedGame并將其轉換成正確的索引。find()函數會在games數組中查找匹配selectedGame的String，然后返回匹配元素的索引，賦值給selectedGameIndex，這個索引用來在對應表項上設置選中標記。

好。現在選擇游戲頁面功能實現完成！

何去何從？

可喜可賀，現在你已經了解Storyboard編輯器的基本用法，能夠創建包含多個視圖控制器并能通過轉場在場景之間切換的App！在一處集中管理多個視圖控制器和互相的關聯，讓整體把握App的樣子更加容易。

你也看到了自定義表視圖和表項有多么容易。有了靜態表項，不用實現所有的數據源方法也可以構建一些界面。

原文地址