第十章 导航控制器及场景转换

IOS 8编程入门--使用swift语言 专题目录:

IOS 8 开发入门--序言(一)

IOS 8 开发入门--序言(二)

第一章:创建你的第一个App(一)

第一章:创建你的第一个App(二)

第二章:使用Storyboard设计用户界面(一)

第二章:使用Storyboard设计用户界面(二)

...............

第七章  使用prototype Cell定制Table View(一)

第七章  使用prototype Cell定制Table View(二)

第八章 表格单元格选取以及UIAlertController(一)

第九章 删除表格行,定制Action按钮,MVC模式(一)

全书完整目录

导航控制器及场景转换介绍

首先,什么是导航控制器(navigation controller)?在IOS app开发过程中导航控制器是和table view一样的常用UI元素。它为分层内容提供了一个向下展开的分层接口。观察一下系统内置的照片应用,YouTube,和联系人。它们均通过导航控制器来显示层级结构。典型情况下table view控制器和导航控制器在大多数app中是配合使用的。但这并不意味着你必须同时使用。

场景及故事板中的场景转换

迄今为止我们在构建FoodPin app过程中我们只在故事板中创建了一个视图控制器。故事板允许我们做更多的事情。你可以通过点击轻易的在导航控制器中嵌入视图控制器并且创建不同场景之间的转移。在故事板中工作是场景和场景转移通常一起出现。在故事板中,一个场景指代一个视图控制器和对应的视图。每一个场景有一个连接器,它主要用来连接视图控制器和视图之间的动作和属性。场景转移主要是指两个场景之间的切换过程。Push和Modal是两种最常见的场景转移形式。

创建导航控制器

我们继续完善FoodPin app。经过我们这章改造,app仍然在表格中显示一系列餐馆,但是它会嵌入到导航控制器中。当用户选择任意一个餐馆,app将会导航到下一个界面来展示餐馆细节。

如果你已经关闭了FoodPin工程,那是时候运行Xcode并且重新打开工程了。选择Main.storyboard切换到故事板编辑器。现在你只有一个表格视图控制器(table view controller)。Xcode 提供一个嵌入功能让任意视图控制器可以很容易嵌入导航控制器。选择表格视图控制器并且点击菜单栏的编辑。选择“嵌入”(Embed  in)然后选择“导航控制器(Navigation Controller)”。

Xcode 自动将表格控制器嵌入到导航控制器。我们给导航条起一个名字。在表格控制器(table view controller)中选择导航条。然后在属性查看器中设置名字为“Food Pin”。

现在运行app看看我们的app变成什么样子了。App 和之前一样只不过增加了一个导航条。

增加细节视图控制器(Detail View Controller)

很简单吧?仅仅点击了几下,你就在app中增加了导航条。现在缺少的就是另一个视图控制器用来显示餐馆细节。当用户选择任意一个餐馆,app应该转移到细节视图控制器并且显示餐馆的细节。

在界面构造器中(Interface Builder)从对象库中拖一个视图控制器出来,用于创建细节视图控制器。这章主要的目的就是教会你如何实现导航。我们尽量把细节视图设计的简单。让我们调节照片视图(Image View)来显示餐馆照片。从对象库中拖一个照片视图然后将它放在在视图的中央。设置照片的宽度为320,高度为250.

现在你在故事板中有两个视图控制器了。但是它们两之间没有关联。我们需要使用场景转换来连接它们。在音乐领域,场景转换时一段音乐和另一段音乐之间的无缝转移。在故事板中,两个场景之间的转移就叫做场景转换。

因为我们想在用户点击表格视图中的单元格时转移到细节显示场景。我们将在prototype cell和细节场景之间添加一个场景转换。按住控制键,点击prototype cell拖动到视图控制器。同时松开键盘和鼠标,将会出现一个弹出窗口显示三种场景转移类型(push, modal, custom)。


正如在前面介绍的,场景转移定义了两个场景之间的变换。在IOS中,push和modal是两种标准的转移。对于导航,我们选择“Push”。Push导航是为“逐渐向下”展示界面设计的。当我们想为某个元素提供更多信息时,典型导航选择是Push。一旦选好,Xcode自动为prototype cell 和细节视图控制器之间建立Push场景。

现在,你可以准备运行app了。一旦启动,选择任何一个餐馆然后app将会转移到细节界面。现在,细节界面控制器只显示了一个空白界面,但是好消息是你已经创建了一个导航界面了。

没有编写任何一行代码,你就在你的app中增加了一个导航控制器。很不可思议吧?我想你脑子了肯定有一系列问题吧:

1、我如何从“Restaurant Table View Controller”中把餐馆信息传递给“Detail View Controller”?

2、我如何在细节控制器中将选中的餐馆照片显示出来?

我们一个一个分析

继续前进之前的两点改进

当你将单元格和细节视图控制连接起来时,单元格上出现一个扩展指示器(disclosure indicator)灰色的V型图案暗示单元格可以点击而且当单元格被选中时将会显示一个细节视图。

在2007年之前不是这样的。在最初的iPhone发布之后7年,用户开始习惯iPhone的用户界面。对我来说并不总是需要使用扩展显示器。有时候你想关闭该显示,好让界面看起来更干净。

在界面构造器中,选择prototype cell。你可以在属性查看器中看到一个名叫“Accessory”的选项。将它的值从修改为None。

当你运行app并且选择一个单元格时app自动导航到一个空白屏幕并且显示一个动作选择列表。我们不需要动作选择列表。后面我们将在细节视图中添加一个相同功能的函数。所以从RestaurantTableViewController.swift中删除tableView(_:didSelectRowAtIndexPath:)方法。

创建一个新的类

Ok,让我们回到细节视图。在视图控制器中将更新选中的餐馆的图片。现在视图控制器默认和UIViewController 类关联。

事实上UIViewController类只提供视图关联的最基础模型。它里面没有变量用于存储餐馆图片。因此,我们扩展并且创建我们自己的类,替代UIViewController.

在项目导航栏中,右击“FoodPin”文件夹然后选择“NewFile...”。选择“Cocoa Touch Class”作为类模板。取一个类名DetailViewController并且将其设置为UIViewController的子类。点击“Next”并且在工程文件夹中保存。

正如我们知道的,我们将DetailViewController类设置为视图控制器(View Controller)。在界面构造器中,选择detail view controller。在标识查看器中(Identity Inspector)修改定制类(custom class)为DeatailViewController。

为定制类增加变量

在定制类中我们有两件事要做:

增加一个变量restaurantImage用于数据传递:当用户在表格中选择餐馆时,需要能够把照片名传递给细节视图。

为图片视图增加一个输出变量restaurantImageView:随后我们可以用选中的餐馆图片更新它。

好了,在DetailViewController.swift中添加下面的代码:

下一步,我们需要在故事板中将照片视图和restaurantImageView关联起来。右击UIImageView对象。从Reference Outlets 选项中拖动到Detail View Controller。释放鼠标按钮,选择restaurantImageView变量。

现在你已经在故事板中将照片对象和输出变量关联起来了。任何在变量上的变化都可以看到反馈。但是我们还有一件事情没有做。我们希望照片视图显示选中的餐馆照片。在viewDidLoad方法中,增加下面的代码。

当视图被加载到内存中时viewDidLoad方法被调用。你可以在这个方法里面添加对视图的定制。在上面,我们简单的将照片视图的显示照片设置为餐馆照片。

试着编译并且运行你的App。哦,细节视图在选择了餐馆之后仍然是一片空白。我们仍然遗漏了一件事情。我们没有编写任何从表格视图控制器传递餐馆图片到细节控制器的代码。因此,restaurantImage变量并没有被赋值。

使用场景转换传递数据

现在终于来到了本章最核心的部分:使用场景转换在视图控制器之间传递数据。场景转换描述视图控制器之间的转移,并且包含在转移中涉及的视图控制器。当场景转移被触发时,在可见的转移发送前,故事板运行时通过调用prepareForSegue方法通知源视图控制器(在本例中时RestaurantTableViewController)。默认的prepareForSegue方法是空方法。通过重载该方法,你可以将任何相关的书籍传递给新的控制器,在本例中时DetailViewController。

场景转移可以被多个源触发。随着你的App逐渐复杂,很可能在视图控制器之间不止一种场景转移。因此,最好的方法是在故事板中为每一个不同的场景转移提供一个不同的标识符。标识符是一串字符串,该字符串被应用用于区分不同的场景转移。

在属性查看器中选择场景转移(segue)然后可以为它取个标识符。在本例中,我们将场景转移命名为showRestaurantDetail。

场景转移配置完毕之后,在RestaurantTableViewController.swift中添加下面的代码覆盖默认的prepareForSegue方法。

代码中的第一行用于检测场景转移的标识符。这段代码只有在场景转移是showRestaurantDetail时才执行。在代码块中,我们首先再次获取被选中的行。Index path 对象返回的是一个可选类型(optional)。在swift中,你可以同时使用if 和let处理可选类型。这里的条件语句块只有在indexPath存在时才执行。

一个场景转移对象同时包含源和目的视图控制器。你可以使用segue.destinationViewController再次获取目的控制器。在这个例子中,目的控制器是DetailViewController。最后我们将餐馆名传递给目的控制器。

准备测试

现在,可以准备测试app了。点击运行按钮编译并运行app。这次,你的app应该可以按照预期的运行了。试着选择餐馆,被选中的餐馆细节将会展示出来。

你的练习

在细节展示界面中显示更多的餐馆细节是不是会更好。试着卫显示的餐馆增加名字,类型,地址等标签。如果你理解了如何传递数据,增加这些功能将不会太难。

你可以下线本章Demo 作为参考 http://pan.baidu.com/s/1i4Vu0U5

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容