主页 > J生活馆 >CS193P第七堂课摘要及心得笔记

CS193P第七堂课摘要及心得笔记

上次的笔记中我们提到了 View Controller 的基础,以及如何建立自己的 View Controller。在这一次的课程内容中,我们将学习到如何使用 UIKit 所提供的 View Controllers 来帮助我们建立程式的导览。

第七次的课堂中,主要涵盖了一下几个主题:

  1. Navigation Controller
  2. Controller 间的资料传递
  3. 自订导览列
  4. Tab Bar Controller
  5. 结合两种形式
Navigation Controller

在上一次的 iPhone 开发课程笔记 中我们谈到了 View Controller 的建立方法以及概念,概括而言,View Controller 在 iPhone 程式当中扮演着主干的角色,负责衔接 View 和 Model。

而在上回笔记中的后段,我们也曾经谈过我们可以透过 UIKit 中所提供的 View Controller 来衔结我们自己的 View Controller,建立出整个程式的动线。而 Navigation Controller 就是常用的一种。很多 iPhone 的程式中都有 Navigation Controller,像是当我们在专辑列表中选择了某一张专辑,随集会从萤幕左边带入歌曲的列表,我们也可以点左上角的返回按钮回到专辑列表,这样的导览模式就是 Navigation Controller。

而 Navigation Controller 的画面就如下所示,在中间显示了目前在 Stack 最上端的 Controller 的 View,在上面则是这个 Controller 的 title,左上角的上一页按钮则是前一个 Controller 的 title。

CS193P第七堂课摘要及心得笔记

就实做上来说,Navigation Controller 下面包含了许多需要显示的 View Controllers,用 Stack 的方式集合在一起。当我们需要换页的时候,我们只需要 push 一个 View Controller 进去,而需要回到上一页则是透过 pop 一个 View Controller 来达成。

- pushViewController:viewController animated:animated; // 换到新的 Controller - popViewControllerAnimated:animated; // 回到上一个 Controller - setViewControllers:viewControllers animated:animated; // 整组换掉,在 iPhone OS 3.0 后加入

上面这几个方法中,animated 这个参数决定了换页时是否会有动画的效果。在大多数的情况下,我们当然想要显示换页的效果,但是当程式刚启动、初始化时,在加入第一个 VIew Controller 的时,我们就不需要动画的效果。

值得一提的是,我们一般很少会直接呼叫 pop 方法,因为在使用者按下左上角的退回按钮时就会自动呼叫这个方法了。

在投影片的第 19 页和 22 有分别介绍如何初始化一个 Navigation Controller 以及如何加入新的 Controller,有兴趣的读者还请参考。比较需要注意的是,当我们初始化完 NavigationController 之后,要记得把 NavigationController 的 view 加入到 window 的 subview 中,否则画面上不会显示。

Controller 间的资料传递

在程式的进行中,会有很多 Controller 被建立或是移除,那我们要怎幺让这些 Controller 能够互相沟通呢?用下图的例子作为举例,List Controller 包含了所有资料的列表,而 Detail Controller 则是会显示被选取道的资料内容。

CS193P第七堂课摘要及心得笔记

由 List Controller 传递资料到 Detail Controller 的方法相当简单,由于后者的初始化会由前者进行,所以只要定义好初始化的参数就没问题了。然而,要从后者传递给前者,我们会使用 Delegate 的方式,也就是建立一组 protocol,让 List Controller 去实做,当 Detail Controller 需要传递讯息时则呼叫 List Controller 的对应方法就行了。

自订导览列

Navigation Controller 所产生的萤幕画面最上方有条导览列,包含了标题还有一些按钮,我们可以透过修改 UINavigationItem 来达成我们想要的效果。每个 View Controller 都包含一个 UINavigationItem,然而只有在 Navigation Controller 的 Stack 最上方的才会被显示。

CS193P第七堂课摘要及心得笔记

如果我们修改标题的话,并不需要修改 UINavigationItem,因为 View Controller 中就有一个 title 的 property,UINavigationItem 会自动继承这个 property 来显示。

至于按钮的部份,UIKit 提供了三种不同的按钮,分别是字串的显示、图片的显示和系统内建的按钮。而这些按钮就如同一般按钮一样,用的是 target-action 的概念,在投影片的第 50 到 59 页中有範例的程式码,读者可以直接複製使用。

CS193P第七堂课摘要及心得笔记

此外,我们也可以在原本 title 的地方显示一个 View 而非单纯的字串,只要将 self.navigationItem.titleView 指定为想要显示的 View 即可。

CS193P第七堂课摘要及心得笔记

最后,因为退回按钮是直接使用 NavigationController 中 Stack 的前一项 Controller 的 title,有时候会出现文字过长的情形,请参考投影片的第 66 页的作法,另行设定一个按钮替换,就可以解决这个问题了。

CS193P第七堂课摘要及心得笔记
Tab bar Controller

谈完了 NavgationController,我们当然也没有忘记 TabBarController。TabBarController 就是我们在各个 App 中看到下方有一排按钮,每个按钮分别会切换到不同的 View Controller。

CS193P第七堂课摘要及心得笔记

在投影片 78 页中可以看到,建立 TabBarController 的作法跟 NavigationController 相同,一样要记得加入到 window 的 subviews 当中,才会在萤幕上显示。

如同 UINavigationItem 一样,每个 View Controller 也包含了一个 UITabBarItem 物件,由文字及图案组成,而 UIKit 也提供了一些系统内建的按钮可以使用。建立按钮的程式码在投影片的第 84 和 87 页,大家还多多参考。要注意的是,除了用程式建立 UITabBarItem 之外,我们也可以透过 Interface Builder 来建立,相对是比较容易、简单。

结合两种形式

最后,我们也可以结合以上两种形式,由 Tab Bar Controller 作为基础,加入 Navigation Controller 或是其他自订的 View Controller,这样一来就形成了一般常见的 iPhone 应用程式架构了。

CS193P第七堂课摘要及心得笔记
结论

在这次的课程中,我们学习到了两种导览用的 View Controlles 的使用方法。在下一次的内容中,我们将看到如何透过 Table View Controller 来显示大量资料,并且处理捲动的效果,还请各位读者敬请期待!

参考资源