swift实作app 交流分項三（畫面切換)

一行代码一场梦，大家好我是阿达，今天要跟大家分享的部分是『导览控制器』跟Segue 。用白话文来说就是『画面切换』。任何APP都需要做画面切换，所以他的重要性可想而知。

当我们用Storyboard来开发时『场景』(scene)跟Segue是两个常见的专有名词，所谓的场景就是对应了一个视图控制器以及他的视图。而Segue的位置就是在两个场景之间做连接，通常是使用『Push』及『Modal』来作转换。

我们继续用上一篇的项目接着下去。同样的在这里附上上一篇的项目档案。

项目档案：http://pan.baidu.com/s/1mgmq2Cg

打开Storyboard，选择tableViewController,点击选单中的『Editor —>  Embed in —> Navigation Controller』。

这个动作是再把视图控制器加入导览控制器中。完成之后会发现Storyboard 当中多了一个导览控制器。点选一下左边的『Navigation item』 将他的title 改成Food Pin 

修改好了之后tableViewController的标题会变成了Food Pin就像图片中这样，是不是很容易啊！只要点几下就可以加上一个导览介面，现在我们需要将它加上一些细节。

现在我们的App已经准备好了转换画面，所以接下来我们要做的就是让他可以转换的画面，首先我们拖曳一个ViewController 到Stroyboard上面来。 

接下来在新增的ViewController 上面放上一个图片视图(image View)，放在正中心的位置，图像尺寸宽度320，高度为250

好了，现在我们有两个场景了，那我们该怎么把他们连在一起呢？

首先我们要先想好，转换的方式应该是我们按下第一个画面上面的Cell 之后，把上面的图片传送到下一个画面，所以我们转换的关键点应该是在Cell上面下功夫。

点选左手边的Cell，按住control 拉出一条线来拉到新的场景『View Controller』之后，出现一个黑色的选单。

选择 push。在这里说明一下 Push是往下继续坦介面设计，如果你想要提供某个项目更进一步的资讯，选它就对了！

我们来看看画面上在tableview 跟 viewController 之间多了一个箭头，那就是Seuge了

接下来就是开心的command + R的时间了！

没错，一行程式都不用写，就可以顺利的完成画面切换。是不是很神奇啊？现在问题来了『我该如何把相片从Restaurant TableView Controller  传递到新的画面呢』？

我们就把新的画面命名叫做 Detail ，因为他是负责显示我们所选择的Cell里面的细节。按下command + N 来建立新的类别档案。选择『Cocoa Touch Class』作为类别模板。并且将它命名为 DetailViewController 

当然别忘记把ViewController 跟新增的DetailViewController做连接喔！

画面的部分在这边到一段落，接下来进入程式的部分啰。

将画面分割成两半右边的部分，选择DetailViewController，在左手边选择imgae View 按住control 拖曳出一条线来，连接到class DrtailViewController内部，并将这个变数名称命名成restaurantImageView 

之后我们需要在建立一个字串变数。程式码如下：

var restaurantImage:String!

完成之后的画面如下：

现在我们已经在Storyboard 中建立了图像控制器跟变数之间的连接了。现在我们要做的事情就是让图像控制器显示所选取的餐厅相片，我们要在下面的viewDidLoad里面加入以下的程式码：

 self.restaurantImageView.image = UIImage(named: restaurantImage)

在这里说明一下，named 所连接的必须是个字串，所以我们要在前面多宣告一个字串变数，让我们的图片显示器，去找图片的字串来显示。

当我们很开心地按下command+R 之后点下Cell 会发现，当机了。。。

没错，这是因为我没还没有编写任何可以将餐厅图片从TableViewController  传递到 ViewController 的程序，因次restaurantimage 变数还没有被指定任和值。

本篇分享最关键的部分，在不同的视图控制器之间使用『Sugue』做资料传递，Segue 主要是作为视图控制器间的转换。在Sugue被触发后，在画面切换之前，Storyboard 运行时候会通知来源控制器（也就是本篇的 ResturantTanleViewController)

今天我们的项目很简单，将来小伙伴们的项目越来越复杂了之后，小伙伴们可能会遇到一个画面有两三种切换方式，最好的方式就是把每个 Sugue 都赋予一个唯一的识别码( identifier)，这个识别码在你程序中跟其他的 Sugue做区分。

所以在这里我们点选一下左手边的Push segue to Detail View Controller 把右边的 identifier 修改成 『showRestaurantDetail』

修改好了之后，我们回到 RestaurantTableViewController.swift中，复写里面关于 prepareForSegue 方法中的内容：

//關於畫面切換

    

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {

        if segue.identifier == "showRestaurantDetail"{

            if let indexPath = self.tableView.indexPathForSelectedRow(){

                let destinationController = segue.destinationViewController as! DrtailViewController

                

                destinationController.restaurantImage = self.restaurantImages[indexPath.row]

            }

        }

    }

加完了之后画面长得像这样子的

这段程式翻成人类的语言就是说，如果切换的Sugue 是showRestaurantDetail的话，那就从DrtailViewController当中把图片显示出来。

恭喜小伙伴们又往前了一大步，没日没夜地写感觉效率真的不高，当初只是为了入学资格而要写出十篇技术文，可是看到有小伙伴们真的照着做了，感觉这是一份责任感，有必要做出高素质的分享，所以现在阿达的目标会放在如何让小伙伴们更好上手，如果真的因为这样赶不上第二阶段招生我也认了，感谢各位小伙伴的爱护与支持，让我们用一行一行的代码，一步一步的实现我们的梦想，我是阿达，我们下次见！