使用表视图和分割视图控制器导航数据.ppt

使用表视图和分割视图控制器导航数据,青岛滨海学院 信息工程学院计算机教研室 崔守良,本节内容： 表视图类型； 如何实现简单的表视图和控制器； 使用复杂的数据结构在包含分区的表中显示文本和图像； iPad分割视图控制器的用途； 如何使用模板Master-Detail Application,了解表视图,表视图UITableView在屏幕上显示一个单元格列表，每个单元格都可包含多项信息；可将表视图划分成多个区section，以便从视觉上将信息分组。 表视图能够响应触摸事件，借助表视图控制器UITableViewController以及两个协议UITableViewDataSource和UITableViewDelegate可让用户轻松在冗长的信息列表中上下滚动并选择单元格。,1. 表视图的外观 表视图有无格式plain和分组group两种样式。 2. 表单元格 表只是一个容器，要在表中显示内容，必须给表提供信息，这是通过配置表视图单元格UITableViewCell实现的。 单元格可显示标题、详细信息标签detail label、图像和附属视图accessery，其中附属视图是一个箭头，告诉用户可通过压入切换和导航控制器挖掘更详细的信息。 每个单元格都有独特的标识符,称为重用标识符reuse identifier，用于在编码时引用单元格。,3. 添加表视图 从对象库中拖曳UITableView到视图中。可调整其大小，如果拖曳一个UITableViewController到编辑器中，将在故事板中新增一个场景，其中包含一个填满整个视图的表格。 Content属性，默认设置为Dynamic Prototypes动态原型，可以直接在IB中以可视化的方式设计表格和单元格布局。 Style样式可以选择Plain或Grouped,4. 设置原型单元格的属性 选中单元格后，使用选取手柄可调调整单元格的高度。单元格的样式Style有以下几种： Basic:只显示标题 Right Detail：显示标题和详细信息标签，详细信息标签在右边； Left Detail: 显示标题和详细信息标签（左边）； Subtitle: 详细信息标签在标题下方,Image属性可以添加图像，注意，在原型单元格中设置的图像以及标题/详细信息标签只是占位符，将替换为在代码中指定的实际数据。 Selection和Accessory分别用于配置选定单元格的颜色以及添加到单元格右边的附属图形。 Identifier可能是最重要属性，设置它后才能在代码中引用原型单元格并显示内容。 要填充表格，需要选择表视图，使用connection Inspector将输出口delegate和dataSource连接到将实现协议UITableViewDelegate和UITableViewDataSource的类（可能是视图控制器）,5. 表视图数据源协议 表视图数据源协议UITableViewDataSource包含这样的方法，即描述表视图将显示多少信息，并将UITableViewCell对象提供给应用程序进行显示。下面是4个最有用的数据源协议方法： numberOfSectionsInTableView: 返回表视图将划分成多少个分区。 tableView: tableViewnumberOfRowsInSection: 返回给定分区包含多少行。 tableView: titleForHeaderInSection: 返回一个字符串，用作给定分区的标题。 tableView: cellForRowAtIndexPath: 返回一个经过正确配置的单元格对象，用于显示在表视图的指定位置。,6. 表视图委托协议 表视图委托协议包含多个对用户在表视图中执行的操作进行响应的方法，从选择单元格到触摸展开箭头，再到编辑单元格。 tableView: didSelectRowAtIndexPath方法传递一个NSIndexPath对象，指出触摸位置，可以响应用户的触摸,探索分割视图控制器（仅用于iPad）,分割视图让你能够在一个iPad屏幕中显示两个不同的场景。在横向模式下，屏幕左边三分之一为主视图控制器的场景，而右边包含详细视图控制器场景。在纵向模式下，详细视图控制器管理的场景将占据整个屏幕。 多数使用分割视图控制器的应用程序中，它将表、弹出框和视图组合在一起，其工作方式如下：在横向模式下，左边显示一个表，让用户能够做出选择；用户选择表中的元素后，详细视图将显示该元素的详细信息。转到纵向模式，表将消失，详细视图将填满整个屏幕；要进行导航，用户可触摸一个工具栏按钮，这将显示一个包含表的弹出框。,1.实现分割视图控制器 在项目中添加分割视图控制器，可将其从对象库拖曳到故事板中，在故事板中，它必须是初始视图，不能从其他任何视图切换到它。 可将这些默认视图删除，添加新场景，再在分割视图控制器和主/详细场景之间重新建立关系。为此，可按住Control键，并从分割视图控制器对象拖曳到主场景或详细场景，选择Relation-masterViewController或Relation-detailViewController。,在主视图控制器中可使用如下代码获取详细视图控制器： self.splitViewController.viewControllers lastObject 而详细视图控制器可使用如下代码获取主视图控制器： self.splitViewController.viewControllers objectAtIndex:0 属性splitViewController包含一个名为viewControllers的数组。,2. 模板Master-Detail Application 该模板自动提供了所有功能，你无需处理弹出框，无需设置视图控制器，也无需在用户旋转iPad后重新排列视图，只需给表和详细视图提供内容，这些分别是在模板的MasterViewController类和DetailViewController类中实现的。,一个简单的表视图应用程序,实现概述 创建一个表视图，包含两个分区，这两个分区的标题分别为Red和Blue，且分别包含常见的红色和绿色花朵的名称。除标题外，每个单元格还包含一幅花朵图像和一个展开箭头。用户触摸单元格时，将出现一个提醒视图，指出选定花朵的名称和颜色。,2. 创建项目 新建一个Single View Application项目，命名为FlowerColorTable. 添加图像资源，在我们创建的表视图中，将显示每种花朵的图像. 在这个项目中，需要两个数组redFlowers和blueFlowers分别包含要在表视图中显示的红色花朵和蓝色花朵的名字，每种花朵的图像文件名和花朵名相同，只需在这些数组中的花朵名称后面加上.png即可访问相应花朵图像。,2. 设计界面 打开文件MainStoryboard.sotryboard，并拖曳一个表视图UITableView实例到场景中。调整表视图的大小，使其覆盖整个场景。 设置表视图的Content属性Dynamic Prototypes，将表视图样式设置为Grouped。 设置单元格标识为flowerCell，设置其样式为Basic，使用下拉列表Accessory在单元格添加Detail Disclosure详细信息展开箭头。,3. 连接输出口delegate和dataSource 选择场景中的表视图对象，打开 Connections Inspector，从输出口delegate拖曳到文档大纲中的ViewController对象，对输出口dataSource执行同样的操作。 4. 实现应用程序逻辑 填充花朵数组 需要两个数组来填充表视图，一个包含红色花朵，一个包含蓝色花朵。由于在整个为中都将访问这些数组，必须将它们声明为实例变量/属性。,打开ViewController.h文件，在interface代码行下方声明属性: property (nonatomic, strong) NSArray *redFlowers; property (nonatomic, strong) NSArray *blueFloers; 在ViewController.m文件中合成： synthesize redFlowers; synthesize blueFlowers; 在viewDidUnload中执行清理工作： self setRedFlowers : nil;,为使用花朵名填充这些数组，在ViewController.m的方法ViewDidLoad中，分配并初始化它们： -(void) viewDidLoad self.redFlowers = NSArray alloc initWithObjects: ”Gerbera”, ”Peony”, ”Rose”, ”Poppy”, nil; self.blueFlowers = NSArray alloc initWithObjects: ”Hyacinth”, ”Hydrangea”, ”Sea Holly”, ”Phlox”, ”Iris”, nil; super viewDidLoad; ,实现表视图数据源协议 为给表视图提供信息，总共需要实现4个数据源协议方法： numberOfSectionsInTableView、tableView: numberOfRowsInSection、 tableView: titleForHeaderInSection和tableView: cellForRowAtIndexPath。 下面实现这些方法，首先需要将类ViewController声明为遵守协议 UITableViewDataSource: interface viewController: UIViewController ,返回表视图包含的分区数： -(NSInteger) numberOfSectionsInTableView: (UITableView *)tableView return 2; 返回每个分区的行数： -(NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger ) section if( section = 0) return self.redFlowers count; if( section = 1) return self.blueFlowers count; return 0; ,返回每个分区的标题： -(NSString *) tableView: (UITableView *) tableView titleForHeaderInSection: (NSInteger) section if ( section = 0) return ”Red”; if( section = 1) return ”Blue”; return ”Unknown”; ,配置要在表视图中显示的单元格： -(UITableViewCell *) tableView: ( UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath UITableViewCell * cell = tableView dequeueReusableCellWithIdentifier: ”flowerCell”; switch ( indexPath.section) case 0: cell. textLabel.text = self. redFlowers objectAtIndex: indexPath.row ; break;,case 1: cell.textLabel.text = self.blueFlowers objectAnIndex: indexPath.row; break; default: cell.textLabel.text = ”Unknown”; UIImage * flowerImage = UIImage imageNamed: NSString stringWithFormat: ”%”, cell.textLabel.text, ”.png”; cell.imageView.image = flowerImage; return cell; ,实现表视图委托协议 表视图委托协议处理用户与表的交互，要在用户选择了单元格时检测到这一点，必须实现委托协议方法tableView: didSelectRowAtIndexPath。这个方法在用户选择单元格时自动被调用，且传递给它的参数包含属性section和row，这些属性指出了用户触摸的是哪个单元格。 编写方法前，修改文件ViewController.h遵守UITableViewDelegate协议： interface ViewController : UIViewController ,响应单元格选择事件： -(void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath NSString * flowerMessage; switch (indexPath. Section) case 0: flowerMessage = NSString alloc initWithFormat: ”You chose the red flower - %”, self.redFlowers objectAtIndex: indexPath.row ; break;,case 1： flowerMessage = NSString alloc initWithFormat: ” you chose the blue flower - %”, self.blueFlowers objectAtIndex: indexPath.row ; break; default: flowerMessage = NSString alloc initWithFormat: ”I have no idea what you chose!”; break; ,UIAlertView * showSelection = UIAlertView alloc initWithTitle: ”Flower selected” message: flowerMessage delegate: nil cancelButtonTitle: ”OK” otherButtonTitles: nil ; showSelection show; 生成应用程序。,创建基于主-从视图的应用程序,创建一个按颜色分区的花朵列表，在每行都包含图像和详细信息URI。用户轻按特定花朵可以查看其详细视图。详细视图加载一篇对指定花朵的Wikipedia文章。 本程序为通用应用程序，在iPad和iPhone上都能运行，这个项目包含两个故事板，一个用于iPhone(MainStoryboard-iPhone.storyboard),还有一个用于iPad（MainStroryboard-iPad.storyboard）。,1.创建项目 启动Xcode，使用模板Master-Detail Application新建一个项目，命名为FlowerDetail。在项目创建向导中，从下拉列表Device Family中选择Universal，不要选择复选框Use core Data。 模板Master-Detail Application完成了所有艰难的工作：设置场景以及显示表视图的视图控制器（MasterViewController）和显示详细信息的视图控制器（DetailViewController）。 添加图像资源。,打开文件MainStoryboard-iPad.storyboard，分割视图控制器连接到两个导航控制器（UINavigationController），主导航控制器连接到一个包含表视图UITableView的场景，这是主场景，由MasterViewController类处理。 详细信息导航控制器连接到一个简单的空场景，这是详细信息场景，由DetailViewController类处理。 MainStoryboard-iPhone.storyboard文件有一个导航控制器，一个是主场景MasterViewController，第二个是详细信息场景DetailViewController.,2. 调整iPad界面 修改主场景 滚动到iPad故事板的右上角，把表视图的标题Master改为Flower Types。 选择表视图，在Attributes Inspector面板中从Content下拉列表中选择Dynamic Prototypes。 将单元格的标识符设置为flowerCell，将样式设置为Subtitle，包含标题和详细信息标签。,修改详细信息场景 从主场景向下滚动，看到一个很大的白色场景，其中有一个标签Detail View Content Goes Here，将该标签的内容改为Choose a Flower。 从对象库拖曳一个Web视图UIWebView到场景中，调整其大小，使其覆盖整个视图，这个Web视图将用于显示一个描述选定花朵的Wikipedia页面，选择菜单Editor-Arrange-Send to Back。 修改导航栏标题，设置为Flower Detail。,创建并连接输出口 在IB编辑器中选择Web视图，切换到助手编辑器模式，按住Ctrl键，从Web视图拖曳到DetailViewController.h现有属性下方，并创建一个名为detailWebView的输出口,3. 调整iPhone界面 修改主场景 和修改iPad主场景一样，给场景指定新标题Flower Types；配置表视图，将Content设置为Dynamic Prototypes，修改原型单元格，使其使用样式Subtitle，并使用标识符flowerCell。 使用Accessory指定一种展开箭头的样式。 修复受损的切换 当修改表视图使其使用动态原型时，将破坏单元格到详细信息场景的切换。因此需要先修复，按住Ctrl键，从单元格拖曳到详细信息场景，选择Push。,修改详细信息场景 在详细信息场景中添加一个Web视图，调整其大小，使其覆盖整个视图，将标签detail view content goes here放在后面，因为在iPhone版本中，不需要显示该标签，但是也不能删除，因为模板Master-Detail Application中，引用了该标签。 最后 将详细信息场景的导航栏标题改为Flower Detail。 创建并连接输出口 将详细信息场景中的Web视图连接到在iPad中已经创建的输出口webDetailView。,4. 实现应用程序逻辑 创建应用程序数据源 在MasterViewController类中添加两个类型为NSArray的属性：flowerData和flowerSections，第一个属性存储描述每种花朵的字典对象，第二个存储在表视图中创建的分区的名称： property (strong,nonatomic) NSArray * flowerData; property (strong, nonatomic) NSArray * flowerSections;,在文件MasterViewController.m中进行合成： synthesize flowerData; synthesize flowerSections; 在viewDidUnload中进行清理： self setFlowerData: nil; self setFlowerSections : nil; 声明一个方法createFlowerData，用于将数据加入到数组中：,-(void) createFlowerData self.flowerSections = NSArray alloc initWithObjects: ”Red Flowers”, ”Blue Flowers”, nil; NSMutableArray * redFlowers = NSMutableArray alloc init ; NSMutableArray * blueFlowers = NSMutableArray alloc init ; redFlowers addObject: NSDictionary alloc initWithObjectsAndKeys: ”Poppy”, ”name”, ”poppy.png”, ”picture”, ”/wiki/Poppy”, ”url”, nil ;,redFlowers addObject: NSDictionary alloc initWithObjectsAndKeys: ”Tulip”, ”name”, ”tulip.png”, ”picture”, “ /wiki/tulip”, ”url”, nil ; blueFlowers addObject: NSDictionary alloc initWithObjectsAndKeys: ”Hyacinth”, ”name”, ”hyacinth.png”, ”picture”, ” /wiki/Hyacinth_(flower)”, ”url”, nil; blueFlowers addObject: NSDictionary alloc initWithObjectsAndKeys: ”Hydrangea”, ”name”, ”hydrangea.png”, ”picture”, ”http:/ /wiki/hydrangea”, ”url”, nil;,self.flowerData = NSArray alloc initWithObjects: redFlowers, blueFlowers, nil; 填充数据结构 在MasterViewController的viewDidLoad中加入如下代码： self createFlowerData;,5. 实现主视图控制器 创建表视图数据源协议方法 MasterViewController类要遵守合适的数据源协议和委托协议以提供访问和处理数据的接口。 在numberOfSectionsInTableView方法中返回分区数，只需要计算数组flowerSections包含的元素数即可： return self.flowerSections count;,方法tableView: numberOfRowsInSection中获取给定的分区包含的行数，由于数组flowerData包含两个对应于分区的数组，因此首先必须访问对应于指定分区的数组，然后返回其包含的元素数： return self.flowerData objectAtIndex: section count; 方法tableView: titleForHeaderInSection给指定分区提供标题，应用程序应使用分区编号作为索引来访问数组flowerSections，并返回该索引指定位置的字符串： return self.flowerSections objectAtIndex: section ;,创建单元格 最重要的数据源协议方法tableView: cellForRowAtIndexPath。 首先，声明一个单元格对象，并使用前面给原型单元格指定的标识符flowerCell初始化： UITableViewCell * cell = tableView dequeueReusableCellWithIdentifier: ”flowerCell” ; 设置单元格的标题、详细信息标签和图像：,cell.textLabel.text = self.flowerData objectAtIndex: indexPath.section objectAtIndex: indexPath.row objectForKey: ”name” ; cell.detailTextLabel.text = self.flowerData objectAtIndex: indexPath.section objectAtIndex: indexPath.row objectForKey: ”url” ; cell.imageView.image = UIImage imageNamed: self.flowerData objectAtIndex: indexPath.section objectAtIndex: indexPath.row objectForKey: ”picture”; 最后返回单元格： return cell;,使用委托协议处理导航事件 在文件MasterViewController.m中，设置详细控制器的detailItem属性： -(void) tableView: (UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath self. detailViewController. detailItem = flowerData objectAtindex: indexPath.se