[APP開發-使用Swift] 10. Navigation Controller、Segue
「我的餐廳」App既然已經可以在Table View列出多個我們喜愛的餐廳，是否可以點進去個別的餐廳查詢更詳細的資料呢？接下來我們就需要新增一個Detail View，以便可以讓Table View點選後呈現，利用Navigation Controller以及Segue就可以將不同的View串連起來。
- 選擇Main.storyboard → Restaurant Table View Controller。再從上方選單挑選Editor → Embed In → Navigation Controller。
2. 修改導覽列標題：選擇Navigation item，在Attributes inspector中將Title修改為「我的餐廳」。
3. 拖拉一個View Controller至Storyboard
4. 接著將一個Table View拖進去View Controller裡，按下Add New Constraints，將Table View 4個邊界設為0。
5. 將Table View的Prototype Cells設為1。
6. 選擇Table View內的Table View Cell，在Attributes inspector設定Identifier = Cell ，在Size inspector設定Row Height = 36。
7. 接著我們在Cell上方拖拉一個Image View進來，並將高度設為300。
8. 從Cell拖拉一個Segue物件到剛建立的View Controller，並將segue identifier設為showRestaurantDetail。
9. 新增：RestaurantDetailViewController
10. 串連Storyboard以及RestaurantDetailViewController
11. 建立一個Image View Outlet: restaurantImageView。
12. 我們希望從前面Table View點選某一間餐廳後，Detail View可以顯示該餐廳的明細資料，為了能夠接收從前面傳過來的餐廳資料，我們在IBOutlet下方宣告一個restaurant變數，並在viewDidLoad()裡面將image資料放進去。
// RestaurantDetailViewController.swift@IBOutlet weak var restaurantImageView: UIImageView!
var restaurant: Restaurant!override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
restaurantImageView.image = UIImage(named: restaurant.image)
}
13. 接著為了讓segue可以傳遞資料，我們加上以下程式碼在RestaurantTableViewController.swift，將餐廳資料傳到Detail View。
// RestaurantTableViewController.swift// MARK: - Navigationoverride func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "showRestaurantDetail" {
if let indexPath = tableView.indexPathForSelectedRow {
let destinationController = segue.destination as! RestaurantDetailViewController
destinationController.restaurant = restaurants[indexPath.row]
}
}
}
執行看看。
哎呀！可以從Table View到Detail View沒有問題，不過跳出來我們之前做的alert選單，這一段已經不再需要了，tableView(_:didSelectRowAt:)可以整段移除，如果想要保留程式碼但不執行，可以註解起來，整段Mark起來，再用command + ‘/’ 即可。
注意到了嗎？Navigation Controller在Detail View自動幫我們加上「<我的餐廳」，也就是Detail View的上一層，讓我們隨時可以返回。
