黑马程序员技术交流社区
标题: swift实作app 交流分項三（畫面切換) [打印本页]
作者: Kuhoku 时间: 2015-6-21 14:42
标题: swift实作app 交流分項三（畫面切換)
一行代码一场梦，大家好我是阿达，今天要跟大家分享的部分是『导览控制器』跟Segue 。用白话文来说就是『画面切换』。任何APP都需要做画面切换，所以他的重要性可想而知。
当我们用Storyboard来开发时『场景』(scene)跟Segue是两个常见的专有名词，所谓的场景就是对应了一个视图控制器以及他的视图。而Segue的位置就是在两个场景之间做连接，通常是使用『Push』及『Modal』来作转换。
我们继续用上一篇的项目接着下去。同样的在这里附上上一篇的项目档案。
项目档案：http://pan.baidu.com/s/1mgmq2Cg
打开Storyboard，选择tableViewController,点击选单中的『Editor —> Embed in —> Navigation Controller』。
这个动作是再把视图控制器加入导览控制器中。完成之后会发现Storyboard 当中多了一个导览控制器。
现在我们的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当中把图片显示出来。
恭喜小伙伴们又往前了一大步，没日没夜地写感觉效率真的不高，当初只是为了入学资格而要写出十篇技术文，可是看到有小伙伴们真的照着做了，感觉这是一份责任感，有必要做出高素质的分享，所以现在阿达的目标会放在如何让小伙伴们更好上手，如果真的因为这样赶不上第二阶段招生我也认了，感谢各位小伙伴的爱护与支持，让我们用一行一行的代码，一步一步的实现我们的梦想，我是阿达，我们下次见！
作者: woaiqpl 时间: 2015-6-21 14:53
学习了，厉害啊
作者: Kuhoku 时间: 2015-6-21 14:58
感謝小夥伴的支持，如果喜歡的小夥伴們可以參考從第一篇開始喔
作者: Kuhoku 时间: 2015-6-21 15:00
項目下載：http://pan.baidu.com/s/1ntuvWlr
作者: 离经叛道的女子 时间: 2015-6-22 01:41
加油 阿达 一直支持你
作者: Kuhoku 时间: 2015-6-22 01:43
感謝支持
你也要加油喔
作者: rzb2010 时间: 2015-7-4 23:49
:lol，不错，虽然不懂
作者: RichardM 时间: 2015-7-4 23:53
好贴..........................
作者: pp584995727 时间: 2015-7-5 06:39
可以,不错的分享
作者: ios_xiaot 时间: 2015-7-5 08:00
谢谢分享
作者: qq358556392 时间: 2015-7-5 13:17
谢谢分享，楼主辛苦
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |