#68 利用 unwind segue 將表格選擇的結果回傳 - App 功能實作解密 1

使用 iOS App 時，我們時常看到進入下一頁的表格，點選某個 cell 後返回前一頁並將結果回傳的設計，比方以下 Calendar & Clock App 的例子。

Calendar App

建立新的行程時，設定重覆的頻率。

點選 Repeat Cell，然後在 Repeat 的表格頁面選擇重覆的頻率。

選擇 Every Day 後，Repeat cell 顯示 Daily

Clock App

新增某個國家的時間。

點選右上角的 +，然後在 Choose a City 的表格頁面選擇城市。

選擇 Acton, U.S.A 後，World Clock 新增了 Acton 的時間

這樣子的 App 功能是如何做到的呢 ? 方法當然不只一個，利用 unwind segue 是其中一種不錯的方法。假設我們目前在 BViewController，想在返回 AViewController 時將資料傳給 A，實作的方法可分為以下幾個步驟:

controller A & B 的類別名為 AViewController & BViewController

1. 在要回去的頁面，也就是 AViewController 裡定義 unwind segue function (AViewController.swift)

unwind segue function 必須以 @IBAction 開頭，參數的型別為 UIStoryboardSegue。當 BViewController 透過 unwind segue 返回 BViewController 時，會觸發 unwind segue function，AViewController 可透過參數 unwindSegue 的 source 存取 BViewController，然後再從 BViewController 的 property 讀取到想要的資料。

@IBAction func unwindToA(_ unwindSegue: UIStoryboardSegue) {
   if let sourceViewController = unwindSegue.source as? BViewController {
      print(sourceViewController.data)
   }
}

2. 從 storyboard 連線，從觸發返回 A 頁面的元件(比方 button) 連到紅色的 Exit，選擇剛剛定義的 function unwindToA:。

點選按鈕將觸發 function unwindToA，返回定義 unwindToA 的 AViewController。

Calendar App 選擇重覆的頻率

以 Calendar App 選擇重覆的頻率為例，SelectFrequencyTableViewController 返回前一頁時須將選擇的頻率告訴 EditEventTableViewController，因此我們可透過 unwind segue 實現。

完整範例:

AppPeterPan/CalendarRepeatUnwindSegue

以下為幾個關鍵的步驟說明，詳細的程式可參考 GitHub 連結:

準備動作:

1 新增繼承 UITableViewController 的 EditEventTableViewController & SelectFrequencyTableViewController。

2 在 storyboard 設計畫面。

New Event 頁面的類別設為 EditEventTableViewController(static cells)，Repeat 頁面的類別設為 SelectFrequencyTableViewController。

以 unwind segue 回到之前頁面並傳遞資料:

1. 在 EditEventTableViewController 定義 unwind segue 連結的 function unwindToEditEvent(_:)。

輸入 unw 後從自動完成選單選擇 Unwind Segue Method。

Xcode 自動幫我們輸入以下程式。

修改程式碼。

@IBAction func unwindToEditEvent(_ unwindSegue: UIStoryboardSegue) {
   if let sourceViewController = unwindSegue.source as? SelectFrequencyTableViewController {
      repeatFrequencyLabel.text = sourceViewController.selectedFrequency
   }
}

透過 SelectFrequencyTableViewController 的 property selectedFrequency 取得重覆的頻率。

2. 在 storyboard 裡從 SelectFrequencyTableViewController 的 cell 連線到上方紅色的 Exit，選擇 Selection Segue 下的 unwindToEditEvent:。

3. 在 SelectFrequencyTableViewController 的 function prepare 裡設定使用者選擇的頻率。(SelectFrequencyTableViewController.swift)

當使用者點選某個 cell 選擇重覆的頻率時，將觸發 unwind segue，此時將呼叫 SelectFrequencyTableViewController 的 function prepare，我們在裡面設定使用者選擇的頻率。

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
   if let cell = sender as? UITableViewCell, 
      let indexPath = tableView.indexPath(for: cell) {
      selectedFrequency = frequencies[indexPath.row]
   }
}

經由 unwind segue 從 SelectFrequencyTableViewController 返回 EditEventTableViewController 時，SelectFrequencyTableViewController 的 function prepare 會先執行，接著才執行 unwind segue 對應的 function unwindToEditEvent，因此我們可在 unwindToEditEvent 裡讀取 SelectFrequencyTableViewController 的 selectedFrequency，得到使用者選擇的重覆頻率。

@IBAction func unwindToEditEvent(_ unwindSegue: UIStoryboardSegue) {
   if let sourceViewController = unwindSegue.source as? SelectFrequencyTableViewController {
      repeatFrequencyLabel.text = sourceViewController.selectedFrequency
   }
}

作業練習

利用 unwind segue，模仿實現 Setting App 自動鎖定時間設定的功能。只須做到畫面上顯示選取的時間，不須做到螢幕鎖定的功能。

作品集

作業#50 — myBucketList

100道iOSApp謎題 #68 利用 unwind segue 將表格選擇的結果回傳