Fork me on GitHub

开始用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)。

  • 选中之前Scene中的Navigation bar,修改其titleFood 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连接风格。

  • 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传来的图像名称数据。

    1
    2
    3
    4
    5
    6
    7
    8
    @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:

    1
    2
    3
    4
    5
    6
    7
    8
    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分别为NameLocationType(注意:虽然Text会被替代,但不要开始留空,因为留空会使之后生成stack view时,大小不确定);三个label生成一个stack view,调整字体和大小,添加适当的约束。
  • 添加三个outlet,和三个与之对应的变量。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    @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方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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 - 10 Navigation Controller的介绍和Segue
  • 本文作者: AndyRon
  • 发布时间: 2017年07月17日 - 00:00
  • 最后更新: 2017年09月09日 - 12:55
  • 本文链接: http://andyron.com/2017/beginning-ios-swift-10.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!