开始用Swift开发iOS 10 - 10 Navigation Controller的介绍和Segue

接着上一篇开始用Swift开发iOS 10 - 9 Table Row的删除, UITableViewRowAction和UIActivityViewController的使用的代码，继续学习Navigation Controller和Segue。

创造Navigation Controller

选中Restaurant Table View Controller然后点击菜单栏中的Editor > Embed in > Navigation Controller；生成了新的一Scene（Navigation Controller Scene）。

开始用Swift开发iOS 10 - 10 Navigation Controller的介绍和Segue_第2张图片

选中之前Scene中的Navigation bar，修改其title为Food Pin。

添加 Detail View Controller

之前添加导航栏，现在添加另一个view controller，用来显restaurant的详细内容。

拖动一个新的View Controller。
拖动一个image View，调整合适大小，并添加相关约束。Content Mode属性修改为 Aspect Fill。
用segue连接prototype cell和detail scene。 Ctrl-drag从prototype cell到detail scene。如果不方便选择prototype cell，可以在document outline中拖动。选择Show连接风格。

开始用Swift开发iOS 10 - 10 Navigation Controller的介绍和Segue_第3张图片

开始用Swift开发iOS 10 - 10 Navigation Controller的介绍和Segue_第4张图片

iOS 10中有几种sugue类型：
- Show：新的view controller将被添加view controller栈的顶部。跳转的页面有Navigation bar，并且有返回原来页面的返回按钮。这是非常常用的的类型。
- Show detail：在view controller栈中，新的view controller将被替代原来的view controller。跳转的页面没有Navigation bar，也没有返回原来页面的返回按钮。
- Present modally：新页面将以动画形式从底部出现到覆盖整个手机屏幕。这种形式最常见的列子是iOS自带的日历应用：
- Present as popover：以带有箭头锚点的弹框显示。通常使用的iPad应用中
不再需要action sheet，去除tableView(_:didSelectRowAt:)方法
创建新类文件RestaurantDetailViewController，继承至UIViewController。是新建scene与RestaurantDetailViewController的联系。
在RestaurantDetailViewController中加入一个outlet和一个变量，outlet关联Image View，restaurantImage用与接受table view传来的图像名称数据。

    @IBOutlet var restaurantImageView:UIImageView!
    var restaurantImage = ""

    override func viewDidLoad() {
        super.viewDidLoad()

        restaurantImageView.image = UIImage(named: restaurantImage)
    }

通过segues传递数据

segue管理view controller之间的过渡。当segue触发时，storyboard会通知源view controller（如RestaurantTableViewController）调用方法prepare(for:sender:)，可以通过此方法传递数据。

当storyboard中结构复杂时，segue可能会有很多，同一个view controller可能与各级view controller之间有segue，这种情况最好给segue一个唯一identifier。设置segue的identifier为 showRestaurantDetail。
在RestaurantTableViewController中添加prepareForSegue:

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showRestaurantDetail" {
            if let indexPath = tableView.indexPathForSelectedRow {
                let destinationController = segue.destination as! RestaurantDetailViewController
                destinationController.restaurantImage = restaurantImages[indexPath.row]
            }
        }
    }

为详情页面添加三个标签

添加三个标签，Text分别为Name，Location，Type（注意：虽然Text会被替代，但不要开始留空，因为留空会使之后生成stack view时，大小不确定）；三个label生成一个stack view，调整字体和大小，添加适当的约束。
添加三个outlet，和三个与之对应的变量。

    @IBOutlet var nameLabel: UILabel!
    @IBOutlet var locationLabel: UILabel!
    @IBOutlet var typeLabel: UILabel!
    
    var nameText = ""
    var locationText = ""
    var typeText = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()

        restaurantImageView.image = UIImage(named: restaurantImage)
        nameLabel.text = nameText
        locationLabel.text = locationText
        typeLabel.text = typeText
    }

修改RestaurantTableViewController中的prepareForSegue方法：

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showRestaurantDetail" {
            if let indexPath = tableView.indexPathForSelectedRow {
                let destinationController = segue.destination as! RestaurantDetailViewController
                destinationController.restaurantImage = restaurantImages[indexPath.row]
                destinationController.nameText = restaurantNames[indexPath.row]
                destinationController.locationText = restaurantLocations[indexPath.row]
                destinationController.typeText = restaurantTypes[indexPath.row]
            }
        }
    }

代码

Beginning-iOS-Programming-with-Swift

说明

此文是学习appcode网站出的一本书《Beginning iOS 10 Programming with Swift》的一篇记录

系列文章目录

开始用Swift开发iOS 10 - 1 前言
开始用Swift开发iOS 10 - 2 Hello World！第一个Swift APP
开始用Swift开发iOS 10 - 3 介绍Auto Layout
开始用Swift开发iOS 10 - 4 用Stack View设计UI
[开始用Swift开发iOS 10 - 5 原型的介绍]
开始用Swift开发iOS 10 - 6 创建简单的Table Based App
开始用Swift开发iOS 10 - 7 定制Table Views
开始用Swift开发iOS 10 - 8 Table View和UIAlertController的交互
开始用Swift开发iOS 10 - 9 Table Row的删除, UITableViewRowAction和UIActivityViewController的使用