UINavigationController

Size: px

Start display at page:

Download "UINavigationController"

笺规经
5 years ago
Views:

1 UINavigationController

前面我们看到了 UITabBarController 能够允许用户访问不同的 screen, 标签栏控件适用于几个 screen 之间互不依赖的情况如果我们想让用户在一些相关联的 screen 之间移动, 我们就可以使用 UINavigationController 比如 ios 的设置应用有多个相关的 screen:

2 前面我们看到了 UITabBarController 能够允许用户访问不同的 screen, 标签栏控件适用于几个 screen 之间互不依赖的情况如果我们想让用户在一些相关联的 screen 之间移动, 我们就可以使用 UINavigationController 比如 ios 的设置应用有多个相关的 screen: 一系列的设置和针对每个设置的详细页面, 对于每个详细项还有一个选项页面, 这种类型的界面称作 :drill-down interface 这一个主题我们就使用 UINavigationController 给 Homepwner 添加一个 drill-down interface, 让用户能够查看和编辑一个 BNRItem 的详细信息

3 增加了 UINavigationController 的 Homepwner

4 UINavigationController

5 当应用程序呈现多屏信息时, UINavigationController 维护了一个这些屏幕的堆栈 (stack) 每一个 screen 是 UIViewController 的 view, 这个 stack 就是 view controller 的数组当一个 UIViewController 位于 stack 的顶部时, 它的 view 就可见

6 在初始化一个 UINavigationController 的实例时, 我们给它一个 UIViewController 这个 UIViewController 是 navigation controller 的 root view controller 这个 root view controller 总是在堆栈的底部应用程序运行时, 可以往堆栈中压入更多的 view controller.

7 UITabBarController 是在初始化的时候就拿到了它所有的 view controller, 而对于 navigation viewcontroller, 只有它的 root view controller 是保证一直在堆栈中的当 UIViewController 被压入 stack 时, 它的 view 是从右边滑入屏幕 ; 当堆栈弹出的时候, 顶层的 view controller 被移出堆栈, 它的 view 是从左边滑入屏幕的

8 堆栈这是一个带有两个 view controller 的 navigation controller: 一个 root view controller, 一个是在它之上的其他 view controller, 可见的是上面的 view controller

viewcontrollers 和 topviewcontroller 和 UITabBarController 类似, UINavigationController 有一个 viewcontrollers 数组它的 root view controller 是数组中的第一个对

9 viewcontrollers 和 topviewcontroller 和 UITabBarController 类似, UINavigationController 有一个 viewcontrollers 数组它的 root view controller 是数组中的第一个对象当更多的 view controller 被压入堆栈时, 他们被添加到了这个数组的结尾这样数组中的最后一个 view controller 就在堆栈的顶部 UINavigationController 的 topviewcontroller 属性保持了一个到堆栈顶部的指针

10 UINavigationController 的 view UINavigationController 是 UIViewController 的子类, 所以它有一个自己的 view 它的 view 总是拥有两个 subview: 一个是 UINavigationBar 以及 topviewcontroller 的 view 也可以把 navigation controller 设成 window 的 rootviewcontroller 来把它的 view 作为 window 的 subview

11 UINavigationController 的 view

12 升级 Homepwner 应用这一节我们增加一个 UINavigationController 到 Homepwner 应用并把 ItemsViewController 作为 UINavigationController 的 rootviewcontroller 然后我们创建另外一个可以压入到 UINavigationController 堆栈的 UIViewController 的子类

13 升级 Homepwner 应用当用户选择其中一行时, 新的 UIViewController 的 view 将会滑入屏幕这个 view controller 将会允许用户查看和编辑选中的 BNRItem 的属性下一页是更新后的 Homepwner 应用的对象示意图

14 对象示意图

15 增加 UINavigationController 修改 HomepwnerAppDelegate.m 生成一个 UINavigationController, 给它一个 root view controller, 并把它设成 window 的 root view controller - (BOOL)application:(UIApplication *)application didfinishlaunchingwithoptions: (NSDictionary *)launchoptions { self.window = [[UIWindow alloc] initwithframe:[[uiscreen mainscreen] bounds]]; ItemsViewController *ivc = [[ItemsViewController alloc] init]; UINavigationController *navcontroller = [[UINavigationController alloc] initwithrootviewcontroller:ivc]; // [[self window] setrootviewcontroller:ivc]; [[self window] setrootviewcontroller:navcontroller]; } self.window.backgroundcolor = [UIColor whitecolor]; [self.window makekeyandvisible]; return YES;

16 空的导航栏构建并运行我们会发现界面顶部多了一个空白的 navigation bar, 同时 ItemsViewController 的 view 被自动调整大小以适应屏幕

17 再加一个 UIViewController

18 添加完了 UINavigationController 之后, 我们来添加用来压入 navigation controller 堆栈的另外一个 UIViewController 创建一个新的 UIViewController 子类, 命名为 : DetailViewController, 勾选上 With XIB for user interface

19 在 Homepwner 中, 我们希望用户能够轻击一个 item, 然后跳到另外一个屏幕. 在这个新的屏幕上有能够编辑那个 BNRItem 每一个属性的文本字段这个 view 将会被 DetailViewController 的实例控制

20 更简便建立连接的方式 detail view 需要 4 个 subview - 每个针对一个 BNRItem 实例的实例变量因为我们需要在运行时访问这些 subview, DetailViewController 需要这些 subviews 的 outlets 这样我们需要添加四个新的 outlets 到 DetailViewController 可以使用一种稍微简化的方式合并声明 outlets, 再建立连接的方式

21 配置 DetailViewController XIB

22 Control-drag UITextField 到 DetailViewController.h 实例变量区域

23 在弹出窗口输入变量名

设置完的 DetailViewController.h #import <UIKit/UIKit.

24 设置完的 DetailViewController.h #import DetailViewController : UIViewController { weak IBOutlet UITextField *namefield; } weak IBOutlet UITextField *serialnumberfield; weak IBOutlet UILabel *datelabel; weak IBOutlet UITextField *valuefield; 注意 XIB 文件不要有坏连接, 否则在 XIB 文件被加载时, 应用会崩溃另外针对 XIB 文件中的每个 UITextField, 连接 delegate 属性到 File s Owner( 从 UITextField Control-drag 到 File s Owner, 然后从列表中选择 delegate)

25 使用 NavigationController 导航

26 现在我们已经有了一个 navigation controller, 以及两个 view controller 的子类 ( ItemViewController 和 DetailViewController), 下面要把它们连起来工作我们要让用户点击 ItemViewController 的 table view 的一行, 然后 DetailViewController 的 view 就可以滑动到屏幕, 并且显示选中的 BNRItem 实例的属性

27 压入视图控制器首先我们需要创建一个 DetailViewController 的实例, 那么这个对象应该在哪里被创建呢? 前面的几节我们都是在 application:didfinishlaunchingwithoptions: 方法中实例化我么需要的所有的 controller

28 例如在 tab bar controller 一节, 我们创建了两个 view controller, 然后马上把它们加到了 tab bar controller 的 viewcontrollers 数组在使用 navigation controller 时, 我们不能简单的把所有可能用到的 view controller 都存到 stack 中

29 navigation controller 的数组是动态的, 我们开始于一个 root view controller, 然后根据用户的需要添加 view controller 这样 navigation controller 之外的一些对象就需要创建 DetailViewController 的实例, 并且负责把它加入到堆栈中

30 这个对象必须满足两个要求 : 它需要知道什么时候把 DetailViewController 压入堆栈它需要一个指向 navigation controller 的指针来给 navigation controller 发送一个名为 : pushviewcontroller:animated: 的消息

ItemsViewController 这两个条件都满足 : 第一, 它知道 table view 中的行什么时候被轻击, 作为 table view 的 delegate, 当这个事件发生时, 它会收到 tableview:didselectrowatindexpath: 消息第二, 在 navigation controller

31 ItemsViewController 这两个条件都满足 : 第一, 它知道 table view 中的行什么时候被轻击, 作为 table view 的 delegate, 当这个事件发生时, 它会收到 tableview:didselectrowatindexpath: 消息第二, 在 navigation controller 堆栈中的 view controller 能够通过给它自己发送 navigationcontroller 消息得到一个指向这个 navigation controller 的指针作为 root view controller,itemsviewcontroller 总是位于 navigation controller 堆栈中, 因此也总是可以拿到这个指针

32 navigationcontroller 属性

33 tableview:didselectrowatindexpath: 这样就由 ItemsViewController 负责生成 DetailViewController 的实例, 并把它加入到堆栈首先在 ItemsViewController.h 中导入 DetailViewController 的头文件当一行被轻击时, 它的 delegate 被发送 tableview:didselectrowatindexpath: 消息, 这个消息包含选中行的 index path 我们在 ItemsViewController.m 中实现这个方法来生成 DetailViewController 然后把它压入 navigation controller 的堆栈

ItemsViewController 中的 didselectrowatindexpath: #import "ItemsViewController.h" #import "BNRItemStore.h" #import "BNRItem.h" #import "DetailViewController.

34 ItemsViewController 中的 didselectrowatindexpath: #import "ItemsViewController.h" #import "BNRItemStore.h" #import "BNRItem.h" #import ItemsViewController - (void)tableview:(uitableview *)tableview didselectrowatindexpath: (NSIndexPath *)indexpath { DetailViewController *detailviewcontroller = [[DetailViewController alloc] init]; // 压入 navigation controller stack 的顶部 [[self navigationcontroller] pushviewcontroller:detailviewcontroller animated:yes]; }

栈内 view controller 的生命周期因为 UINavigationController 的堆栈是一个数组, 它将会拥有所有添加到它里面的 view controller 的所有权这样在 tableview:didselectrowatindexpath: 结束之后 (

35 栈内 view controller 的生命周期因为 UINavigationController 的堆栈是一个数组, 它将会拥有所有添加到它里面的 view controller 的所有权这样在 tableview:didselectrowatindexpath: 结束之后 ( 方法对它的持有消失 ), DetailViewController 只会被 UINavigationController 所拥有当堆栈弹出时,DetailViewController 被销毁 ; 当下一次一行被轻击时, 一个新的 DetailViewController 的实例被生成

36 push view controller 的一般模式让一个 view controller 压入新的 view controller 是一种常见的模式一般是由 root view controller 创建下一个 view controller, 然后这个 view controller 在这之后再创建下一个 view controller...

37 我么也可以让 view controller 能够压入不同类型的 view controller 比如 Photos 应用, 根据选中的媒体类型的不同, 可以往 navigation controller 的堆栈中分别压入 video view controller 或者 image view controller

38 在 view controller 之间传送数据

39 目前屏幕上的 UITextField 都是空的要填充这些字段, 我们需要一种方法来把选中的 BNRItem 从 ItemsViewController 中传到 DetailViewController 要成功实现此功能, 我们需要给 DetailViewController 一个属性来持有 BNRItem 当一行被轻击时,ItemsViewController 将提供相应的的 BNRItem 给被压入堆栈的 DetailViewController 的实例

40 这个 DetailViewController 将把这个 BNRItem 的属性填充到它的文本字段在 DetailViewController 的 view 上编辑 UITextFields 中的文本将改变 BNRItem 的属性

BNRItem *item; 在 DetailViewController.h 中我们增加一个这个属性同时在文件顶部, 前置声明 BNRItem #import <UIKit/UIKit.

41 BNRItem *item; 在 DetailViewController.h 中我们增加一个这个属性同时在文件顶部, 前置声明 BNRItem #import DetailViewController : UIViewController { weak IBOutlet UITextField *namefield; } weak IBOutlet UITextField *serialnumberfield; weak IBOutlet UILabel *datelabel; weak IBOutlet UITextField (nonatomic, strong) BNRItem

42 在 DetailViewController.m 中为 item sythesize accessor, 并且导入 BNRItem 头文件 #import "DetailViewController.h" #import item;

43 item 内容的显示当 DetailViewController 的 view 显示在屏幕上时, 它需要设置它的 subview 来显示 item 的属性这样我们可以在 DetailViewController.m 中重写 viewwillappear: 来给各种 UITextFields 传递 item 的属性 - (void)viewwillappear:(bool)animated { [super viewwillappear:animated]; [namefield settext:[item itemname]]; [serialnumberfield settext:[item serialnumber]]; [valuefield settext:[nsstring stringwithformat:@"%d", [item valueindollars]]]; NSDateFormatter *dateformatter = [[NSDateFormatter alloc] init]; [dateformatter setdatestyle:nsdateformattermediumstyle]; [dateformatter settimestyle:nsdateformatternostyle]; } [datelabel settext:[dateformatter stringfromdate:[item datecreated]]];

44 压入堆栈前给 item 赋值下面我们在 ItemViewController.m 中的 tableview:didselectrowatindexpath: 中增加一段代码, 压入堆栈前把选中的 BNRItem 传给 DetailViewController, 这样 DetailViewController 就能在 viewwillappear: 被调用前拿到它的 item - (void)tableview:(uitableview *)tableview didselectrowatindexpath: (NSIndexPath *)indexpath { DetailViewController *detailviewcontroller = [[DetailViewController alloc] init]; NSArray *items = [[BNRItemStore defaultstore] allitems]; BNRItem *selecteditem = [items objectatindex:[indexpath row]]; [detailviewcontroller setitem:selecteditem]; // 压入 navigation controller stack 的顶部 [[self navigationcontroller] pushviewcontroller:detailviewcontroller animated:yes]; }

45 view controller 间传递数据的方法在 view controller 之间传递数据 : 把所有的数据都放到 root view controller, 然后传递这些数据的一个子集给下一个 UIViewController, 是执行这类任务比较简洁而且高效的方法

46 构建运行, 然后选择 UITableView 中的一行, 出现的视图将包含选中的 BNRItem 的信息但是现在我们编辑这些数据的时候,UITableView 并不会反映出这些修改我们需要实现一些代码在 BNRItem 被编辑时来更新它的属性这些代码放到什么地方呢?

47 视图的出现和消失在 UINavigationController 将要切换 view 时, 它会发出两个消息 : viewwilldisappear: viewwillappear: 将被弹出堆栈的 UIViewController 会被发送 viewwilldisappear: 消息将要被置顶到堆栈的 UIViewController 被发送 viewwillappear: 消息我们可以在 DetailViewController 被弹出堆栈时, 把它的 item 的属性设置成 UITextFields 的内容

48 viewwilldisappear: 及超类当实现这些针对 view 的 appearing 和 disappearing 的方法时, 非常重要的一点是要调用他们超类的实现 - 这些超类里面也有一些工作要做我们在 DetailViewController.m 中实现 viewwilldisappear: - (void)viewwilldisappear:(bool)animated { [super viewwilldisappear:animated]; } // clear first responder [[self view] endediting:yes]; // 保存变更到 item [item setitemname:[namefield text]]; [item setserialnumber:[serialnumberfield text]]; [item setvalueindollars:[[valuefield text] intvalue]];

endediting: 注意 endediting: 的使用当 endediting: 消息被发送给一个 view, 如果它或者它的任何 subview 当前是 first responder, 它将放弃它的 first responder 状态, 并且键盘将被释放传递给它的参数决定了 first responder 是否应该被强制解除有些 first responder

49 endediting: 注意 endediting: 的使用当 endediting: 消息被发送给一个 view, 如果它或者它的任何 subview 当前是 first responder, 它将放弃它的 first responder 状态, 并且键盘将被释放传递给它的参数决定了 first responder 是否应该被强制解除有些 first responder 可能会拒绝放弃, 传递 YES 将会忽略这个拒绝 [super viewwilldisappear:animated]; // clear first responder [[self view] endediting:yes]; // 保存变更到 item [item setitemname:[namefield text]]; [item setserialnumber:[serialnumberfield text]]; [item setvalueindollars:[[valuefield text] intvalue]];

viewwillappear: 和 reloaddata: 现在当用户在 UINavigationBar 上轻击 Back 按钮的时候,BNRItem 的值将被更新当 ItemViewController 重新出现在屏幕上时, 它将被发送 viewwillappear: 消息抓住这个机会来重新加载 UITableView 这样用户就可以

50 viewwillappear: 和 reloaddata: 现在当用户在 UINavigationBar 上轻击 Back 按钮的时候,BNRItem 的值将被更新当 ItemViewController 重新出现在屏幕上时, 它将被发送 viewwillappear: 消息抓住这个机会来重新加载 UITableView 这样用户就可以立即看到这些变更在 ItemViewController.m 中重写 viewwillappear: 构建并运行, 切换和数据变更都非常流畅了 - (void)viewwillappear:(bool)animated { [super viewwillappear:animated]; [[self tableview] reloaddata]; }

51 UINavigationBar

52 UINavigationBar 应该显示当前在 UINavigationController 堆栈顶部的 UIViewController 的标题每个 UIViewController 都有一个 UINavigationItem 类型的 navigationitem 属性但是不像 UINavigationBar,UINavigationItem 不是 UIView 的一个子类, 所以它不能出现在屏幕上 navigation item 提供了 navigation bar 它需要绘制的内容

53 当一个 UIViewController 到达 UINavigationController 堆栈的顶部时, UINavigationBar 使用 UIViewController 的 navigationitem 来配置它自己如下图所示 :

54 UINavigationItem

55 UINavigationItem 的 title 字符串默认情况下,UINavigationItem 是空的从最基本的层面上来讲, 一个 UINavigationItem 应该有一个简单的 title 字符串当 UIViewController 被移到 navigation 堆栈的顶部并且它的 navigationitem 的 title 属性有一个有效的字符串,navigation bar 将显示这个字符串如下图所示 :

56 带 title 的 UINavigationItem

57 设置 ItemViewController 的 title 在 ItemViewController.m 中修改 init 来设置 navigationitem 的 title 以显示 Homepwner - (id)init { self = [super initwithstyle:uitableviewstylegrouped]; if (self) { UINavigationItem *n = [self navigationitem]; [n settitle:@"homepwner"]; } return self; } 构建并运行我们注意到在 navigation bar 上的 Homepwner 字符串但是点击一行以后 title 不在了, 我们需要也给 DetailViewController 一个 title

实现 setitem: 并设置 title 我们要把 DetailViewController 的 navigation item 的 title 设置成 BNRItem 显示的名称一致但是我们不能在 DetailViewController 的 init 中设置, 因为这时候还不知道它的 item 会是什么我们要在 DetailViewController 设置它的

58 实现 setitem: 并设置 title 我们要把 DetailViewController 的 navigation item 的 title 设置成 BNRItem 显示的名称一致但是我们不能在 DetailViewController 的 init 中设置, 因为这时候还不知道它的 item 会是什么我们要在 DetailViewController 设置它的 item 属性的时候设置它的 title 在 DetailViewController.m 中实现 setitem: 以替换 item 的 synthesized 默认的 setter 方法 - (void)setitem:(bnritem *)i { item = i; [[self navigationitem] settitle:[item itemname]]; }

59 UINavigationItem 的三个区域这时候再构建并运行, 生成并点击一行的时候我们就可以在导航栏上看到选中的 BNRItem 的名称

60 UINavigationItem 的三个区域一个 navigation item 可以持有不仅只是一个 title 字符串, 如后面的图所示, 每个 UINavigationItem 有三个可自定义的区域 : 一个 leftbarbuttonitem 一个 rightbarbuttonitem 和一个 titleview 左右导航按钮条目被指向 UIBarButtonItem 的实例, 包含的是针对仅可以在 UINavigationBar 或 UIToolbar 上按显示的一个按钮的信息

61 包含更多内容的 UINavigationItem

62 容器的概念和 UINavigationItem 一样,UIBarButtonItem 也不是 UIView 的一个子类, 也只是提供了一个 UINavigationBar 需要绘制的内容可以认为 UINavigationItem 和 UIBarButtonItem 是字符串, 图片以及其他内容的容器一个 UINavigationBar 知道如何在这些容器中进行查找并绘制它找到的内容

63 titleview UINavigationItem 的第三个可绘制的区域是它的 titleview 我们可以使用一个基本字符串作为它的 title 或者把一个 UIView 的子类放到 navigation item 的正中但是我们不能两个都设置

64 如果给一个特定的 view controller 设置一个自定义的 view( 像按钮, 滑块, 图片, 甚至一个地图 ) 适合上下文, 我们就可以把 navigation item 的 titleview 设成这个自定义的 view 一般情况下使用一个 title 字符串就足够了前一个图是就是一个使用自定义视图作为 titleview 的例子

65 UIBarButtonItem 的 target-action 我们来给 UINavigationBar 添加一个 UIBarButtonItem 我们希望这个 UIBarButtonItem 当 ItemsViewController 在堆栈顶部时出现在导航栏的右侧轻击它的时候, 它将往列表中添加一个新的 BNRItem

66 bar button item 具有一个 target-action 对, 作用类似 UIControl 的 target-action 机制 : 当被轻击时, 它发送 action 消息到它的 target 当我们在一个 XIB 文件中设置 target-action 对时, 通过从按钮 Control-drag 到它的 target, 然后从 IBActions 列表中选择一个方法

67 编程设置 target 和 action 要编程设置 target-action 对, 我们把 target 和 action 传递给按钮我们在 ItemsViewController.m 中生成一个 UIBarButtonItem 的实例并且把它的 target 和 action 传递给它

68 修改 ItemsViewController.m 中的 init - (id)init { self = [super initwithstyle:uitableviewstylegrouped]; if (self) { UINavigationItem *n = [self navigationitem]; [n settitle:@"homepwner"]; // 创建一个会发送 addnewitem: 到 ItemsViewController 的导航栏按钮 UIBarButtonItem *bbi = [[UIBarButtonItem alloc] initwithbarbuttonsystemitem:uibarbuttonsystemitemadd target:self action:@selector(addnewitem:)]; // 设成右边 [[self navigationitem] setrightbarbuttonitem:bbi]; } } return self; 构建并运行, 点击 + 按钮, 表格中将出现一个新行令, 还有其他的 initialization 消息可以发送给 UIBarButtonItem 的实例

navigationitem]; [n settitle:@"homepwner"]; UIBarButtonItem *bbi = [[UIBarButtonItem alloc]

69 加一个左按钮现在我们添加另一个 UIBarButtonItem 来替换掉表格头部中 Edit 按钮在 ItemViewController.m 中继续修改 init 方法 - (id)init { self = [super initwithstyle:uitableviewstylegrouped]; if (self) { UINavigationItem *n = [self navigationitem]; [n settitle:@"homepwner"]; UIBarButtonItem *bbi = [[UIBarButtonItem alloc] initwithbarbuttonsystemitem:uibarbuttonsystemitemadd target:self action:@selector(addnewitem:)]; [[self navigationitem] setrightbarbuttonitem:bbi]; // 加一个编辑按钮 [[self navigationitem] setleftbarbuttonitem:[self editbuttonitem]]; } return self; }

70 editbuttonitem: [[self navigationitem] setleftbarbuttonitem:[self editbuttonitem]]; 在 navigation bar 中获得一个编辑按钮只需要一行代码

71 editbuttonitem 是从哪里来的呢? UIViewController 有一个 editbuttonitem 属性, 而且当被发送 editbuttonitem 时,view controller 就生成一个标题为 Edit 的 UIBarButtonItem 更给力的是, 这个按钮自带一个 target-action 对 : 当轻击时, 它发送 setediting:animated: 消息给它的 UIViewController 构建并运行确认一下 navigation bar 的效果

72 删除 header view 相关代码现在 Homepwner 已经有了一个全功能的导航栏, 可以把项目中有关 header view 及其相关的代码都删除掉了 ItemsViewController.m 中的 tableview:viewforheaderinsection: tableview:heightforheaderinsection: headerview: toggleeditingmode: ItemsViewController.h 中的 IBOutlet UIView *headerview; - (UIView *)headerview; - (IBAction)toggleEditingMode: 还可以把 HeaderView.xib 文件从 project navigator 中删除

73 带导航栏的 Homepwner

视图控制器 (View Controllers)

视图控制器 (View Controllers) 范圣刚,princetoad@gmail.com, www.tfan.org Quiz 和 QuizViewController 回顾在第一个 session 的 Quiz 应用程序中, 我们把所有的代码都写在 QuizViewController 类中这个类的一个实例是 Quiz 应用的控制器它有指向屏幕上的 labels 的指针,