iOS第13章 表格视图
本章源代码 "归档.zip" http://vdisk.weibo.com/s/Is_OR
目标
总体了解关于导航的相关类
自定义导航栏UINavigationController、UINavigationBar、UINavigationBarItem
了解表视图基本概念
表格的样式
掌握创建表格的相关类以及关系
使用代码创建表格控件
实现表格的代理类和数据源
表格的高级操作
1、总体了解关于导航的相关类
对象：在 IOS 界面中，每一个存在，独立的组件。
任何一个 IOS APP 的界面，都由非常多的对象组成。
在我们的 Demo 中，用到 UIWindow、UIView、UINavigationController、UINavigationBar、UINavigationItem、UIButton、UIImage、、、、、、
(1)UIViewController 是 UINavigationController 的父类，所有UIViewController 类中都定义了一个 navigationController、navigationItem 属性，可以控制导航栏是否显示和隐藏，以及导航上面的 方向按钮。
(2)UINavigationController 类主要包含NavigationBar ，并控制是否隐藏导航栏。可以使用根视图，创建一个 UINavigationController 对象，该对象对应一个后台隐藏的导航栈，该栈可以把当前视图压入、弹出。每次显示压入后的这个视图。
(3)UINavigationBar 可以调整导航栏的样式、修改导航栏背景图片
(4)UINavigationItem 能够控制到行栏上面的按钮，按钮分为左、中、右三部分。还可以隐藏导航栏自带的 Back按钮。
2、自定义导航栏样式
2.1 掌握 UINavigationController导航栏相关功能和实现
(1)一般为一个项目的根视图创建一个导航栏控制器对象 UINavigationController
//1创建一个根视图控制器
RootViewController*root = [[RootViewControlleralloc]init];
//2 希望使用导航，需要创建一个导航控制器(包含导航栈)
UINavigationController*nav = [[UINavigationControlleralloc]initWithRootViewController:root];
//指定工程的 根视图控制器
self.window.rootViewController = nav;
(2)导航控制器创建好后，可以把 N 个视图控制器 push 到该栈中，每次都只显示当前 push 进去的视图
-(void)pushView:(UIButton *)button
{
//做导航,创建一个新的视图对象，压入导航栈。用户会看到新压入的视图
AAViewController*avc = [[AAViewControlleralloc]init];
[self.navigationController pushViewController:avc animated:YES];
}
(3)可以调用方法，隐藏或显示导航栏，或者判断当前视图中导航栏是否隐藏
//方法，操作导航栏隐藏或显示
[self.navigationController setNavigationBarHidden:NO];
//判断当前视图是否隐藏导航栏
if(self.navigationController.navigationBarHidden) {
UIAlertView*alert=[[UIAlertViewalloc]
initWithTitle:@"提示"
message:@"当前导航栏隐藏"
delegate:self
cancelButtonTitle:@"OK"
otherButtonTitles: nil];
[alert show];
}else
{
UIAlertView*alert=[[UIAlertViewalloc]
initWithTitle:@"提示"
message:@"当前导航栏显示"
delegate:self
cancelButtonTitle:@"OK"
otherButtonTitles: nil];
[alert show];
}
2.2 掌握 UINavigationBar 相关功能和实现
(1)UINavigationBar 主要设置导航栏的样式，有三中系统提供的样式
//把状态栏下面的导航栏改为默认样式 self.navigationController.navigationBar.barStyle=UIBarStyleDefault;
| 枚举值 |
样式 |
| UIBarStyleDefault |
|
| UIBarStyleBlackOpaque |
|
| UIBarStyleBlackTranslucent |
(2)UINavigationBar 运行用户自定义背景图片
- (void)viewDidLoad
{
[self.navigationController.navigationBar
setBackgroundImage:[UIImage imageNamed:@"bg_nav.png"]
forBarMetrics:UIBarMetricsDefault];
}
//BarMetrics 指定外观标准
typedef enum {
UIBarMetricsDefault, //默认标准，手机竖着拿
UIBarMetricsLandscapePhone, //手机横着拿
} UIBarMetrics;
2.3 掌握 UINavigationBarItem 相关功能和实现
(1)可以使用系统自带的导航栏按钮，系统提供的导航栏按钮类型如下图
//创建导航栏专用按钮 UIBarButtonItem
UIBarButtonItem*barBt = [[UIBarButtonItemalloc]
initWithTitle:@"前进"
style:UIBarButtonSystemItemDone
target:self
action:@selector(pushView:)];
//得到当前视图中，导航控制器
self.navigationItem.rightBarButtonItem = barBt;
(2)UINavigationBarItem 可以隐藏系统自动生成的 Back 按钮
- (void)viewDidLoad
{
[super viewDidLoad];
//1 隐藏自动生成的 Back 按钮
[self.navigationItem setHidesBackButton:YES];
}
(3)NavigationItem 分为左、中、右三部分，每个部分可以放入一个 或 多个按钮或其他组件
| 位置 |
对应属性 |
描述 |
| Left |
backBarButtonItem leftBarButtonItem |
backBarButtonItem自动生成，一般不修改它。如果需要自定义按钮，可以创建按钮，需要使用到 UIBarButtonItem，然后放入 leftBarButtonItem |
| Center |
titleView |
中间区域可以让入任意常规控件，一般放入按钮 |
| Right |
rightBarButtonItem |
右侧表示前进，添加方式与左侧一样 |
(4)在导航栏上面添加按钮的顺序
(5)实现代码如下
//1 创建导航栏专用按钮 UIBarButtonItem
UIBarButtonItem*barBt = [[UIBarButtonItemalloc]
initWithTitle:@"前进"
style:UIBarButtonSystemItemDone
target:self
action:@selector(pushView:)];
//得到当前视图中，导航控制器
self.navigationItem.rightBarButtonItem = barBt;
//2创建自定义样式的按钮
UIButton*mybt1 = [UIButtonbuttonWithType:UIButtonTypeCustom];
//指定按钮的尺寸
mybt1.frame = CGRectMake(0, 0, 40, 30);
//创建一个按钮图片
UIImage*btimg = [UIImageimageWithContentsOfFile:[[NSBundle mainBundle]pathForResource:@"btn_back_tapped" ofType:@"png"]];
//设置按钮两种状态下的图片
//正常状态
[mybt1 setImage:btimg forState:UIControlStateNormal];
//被选中状态
[mybt1 setImage:[UIImage imageNamed:@"btn_back_tapped.png"]forState:UIControlStateHighlighted];
//设置按钮的事件处理
[mybt1 addTarget:self
action:@selector(popView:) forControlEvents:UIControlEventTouchUpInside];
//创建一个能够放入 导航栏的 UIBarButtonItem
UIBarButtonItem*bbt = [[UIBarButtonItemalloc]initWithCustomView:mybt1];
//把按钮添加都当前导航控制器的 navigationItem 中,
//navigationItem 中只允许放入 UIBarButtonItem
self.navigationItem.leftBarButtonItem = bbt;
(6)下面是用户可以自定义导航栏的几种方式
3、了解表视图基本概念
表格是IOS 应用中，经常使用的用户界面。表的形式多样，可以把数据显示在多行，也可以分为几部分的可滚动列表提供的数据。
表格有很多用途：
· 让用户浏览带层次结构的数据
· 提出了一个方便用户快速查询的索引项列表
· 在视觉上不同的分组显示的详细信息和控制
· 提供一个可选择的选项列表
表格有两种基本类型的UITableView类的一个实例，Plain(平常)或Grouped(分组)。一个普通的表观是一个完整的列表；一个分组表观具有视觉上不同的部分。
表格有一个数据源DataSource，可能有一个代理Delegate。数据源对象填充Sections部分和Rows行提供的数据。委托对象的自定义其外观和行为。
表格视图中只有一列，只允许垂直滚动。它由行Table Cell 部分。每个部分(Sections)可以有一个页眉(TableHeader)和页脚(TableFooter)显示文本或图像。然而，许多表只有一部分不可见的页眉或页脚。通常以编程方式，可以调用UIKit框架提供的索引号标识行和部分，访问这些单元格。部分编号0 至N–1 从表格视图顶部向底部；行编号0至N–1在一段。每个表格视图都可以有它自己的页眉和页脚，与其他表格不同。表格标题出现在第一段的第一行。
4、表格的样式 TableView Style
Plain (普通表) 或者regular (整齐的表)
在普通表格视图（或整齐）方式显示横跨屏幕，底色为乳白色的行。一个普通的表视图可以有一个或多个部分，部分可以有一行或多行，每一段都有其自己的页眉或页脚的标题。（页眉或页脚可能也有一个自定义的视图，例如一个包含一个图像）。当用户滚动很多行的一部分，这部分的标题漂浮在表观上节的页脚浮底。
普通的表视图通过 Sections 中的 index 索引，进行快速导航；下图显示了这种表观的一个例子，这是所谓的索引表。在索引项对应于部分标题。例如，本节的标题可能是两个字母的州名缩写，和一段行可以在该州的城市；触摸在某点的指数显示为选定状态的城市。行的索引列表不应该披露的指标或详细信息按钮，因为这些干扰用户选择。
最简单的表格视图类是一个选择列表。选择列表是一个普通的表观，提出了一种菜单，用户可以选择的选项。它可以限制选择一行或允许多重选择。选择列表是一个选定的行标记。
Grouped Table Views
一个分组表视图也显示一个列表的信息，但它在视觉上按照不同的部分，把相关的行划分在一起。如图所示，每一节有圆角和默认情况下出现的蓝灰色背景。每一节的页眉或页脚可能为部分提供一些上下文或总结文本或图像。一个分组表特别适合在数据层次显示最详细的信息。它允许你单独的细节为概念的群体，帮助用户快速了解它提供上下文信息。
表格中 单元格的样式 Cell Style
除了定义两种默认风格的表视图，UIKit框架定义了一个表，视图用于绘制其行Cell四种风格。您可以创建自定义的表观不同的Cell表现，如果你想，但这四个预定义的单元格样式是最适合的用途。
(1)表格行的默认样式，使用一个简单的单元格样式，有一个单一的名称和一个可选的图像。这种风格为 UITableViewCellStyleDefault 常量。
(2)左对齐主标题和副标题的 灰色的行的单元格样式。它也允许一个图像在图像的默认位置。这种风格为 UITableViewCellStyleSubtitle 常数。
(3)左对齐主标题行的单元格样式。它把字幕在蓝色文本右对齐。图像是不允许的。这种风格是用于设置的应用程序，其中的字幕显示偏好的当前设置。它选 UITableViewCellStyleValue1常数。
(4)行的单元格样式将主要标题在蓝色和右对齐在一点的缩进的行的左侧。副标题是左对齐在很短的距离这一点。图片不允许。选 UITableViewCellStyleValue2常数。
表格扩展
| 标准视图配件 |
描述 |
| 披露指示->UITableViewCellAccessoryDisclosureIndicator 选择表格一行，需要跳转到另一个表格，显示数据模型中下一个表 |
|
| 详细信息->UITableViewCellAccessoryDetailDisclosureButton 选中表格一行，需要显示该选项的详细信息 |
|
| 确认->UITableViewCellAccessoryCheckmark 选择列表，点击可以弹出提示，可以设置单选或多选 |
5、掌握创建表格的相关类以及关系
表格视图编程接口包括几个UIKit类，两个正式的协议，和一个类添加到基础框架类。
TableView
表格本身是UITableView类的一个实例。你可以用自己的方法来配置如：表视图的外观，指定行或提供一个用于表的标题视图的默认高度。还提供了其他的方法，让你可以访问当前选中的行以及具体的行或单元格。你可以调用其他方法管理选择，滚动表视图，并插入和删除行和部分。
UITableView继承UIScrollView类，它定义了含量大于窗口的大小视图滚动行为。表格重新滚动行为允许垂直滚动只。
TableViewController
UITableViewController 类，为表格视图增加了许多标准表相关的行为如选择管理，行编辑，表结构的支持，及其他。这额外的支持能够减少你必须写的创建和初始化你的表界面的代码量。一般都不直接使用该类，而是创建一个UITableViewController 的子类，在子类中添加自定义行为。
DataSource Delegate
一个表格对象必须有一个代理 Delegate 和一个数据源DataSource。MVC设计模式，数据源是应用程序的数据模型（即，它的对象模型）。代理 Delegate，从另一方面，管理表视图的外观和行为。数据源和代理 通常（但不一定）是相同的对象，这个对象通常是UITableViewController自定义类
数据源采用 UITableViewDataSource协议。UITableViewDataSource有两个必需的方法。
tableView：numberOfRowsInSection：方法告诉表格在每个段(Section)显示多少行，
tableView：cellForRowAtIndexPath：方法提供了表格每个单元格Cell 显示的数据。
其他可选的方法允许数据源配置多个部分，提供的标题和/或页脚，并支持添加，删除，和表中的行排序。
代理 采用UITableViewDelegate协议。该协议没有必选(required)的方法。它声明的方法，允许将修改的表观，可见方面管理的选择，支持附件的观点，并支持编辑单个表中的行。
一个应用程序可以使用类 UILocalizedIndexedCollation帮助用户，当点击一个项目的编号时，数据源组织数据索引列表和显示适当的部分数据。该UILocalizedIndexedCollation类也可以定位标题。
延伸类 NSIndexPath
许多 tableView 方法接收参数或返回值类型都是 index Paths 。索引路径(index path)标识一个在数组中存储的某个节点的路径。并在基础框架，它由一个NSIndexPath对象表示。UIKit宣布在方法返回关键路径NSIndexPath类别，确定行和列的部分，和部分指标构建NSIndexPath对象。
TableView Cells
在”数据源和代理“指出，“数据源必须返回一个单元格对象，在每个可见的行表视图显示。这些 Cell 的对象必须从UITableViewCell类继承。
这一个类提供了方法，包括管理 cell 的选择和编辑方法，管理附属视图，并配置单元。您可以直接由UITableViewCell类定义的标准样式实例化Cell，给这些Cell 含量组成的文本的一个或两个字符串，在某些形式中，图像和文本。可以使用标准的 Cell 样式。你也可以自定义类UITableViewCell表观Cell的外观和行为。
6、使用代码创建表格控件
创建一个完整表格视图的步骤如下图:
(1)在新窗口中创建一个 UITableView，并指定样式
- (void)viewDidLoad
{
[super viewDidLoad];
//根据当前 View 大小创建一个矩形
CGRectframe = [self.view bounds];
//创建一个Table
UITableView*tabView = [[UITableViewalloc]
initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height) style:UITableViewStylePlain];
//添加当前 table 到视图中
[self.view addSubview:tabView];
}
typedefenum {
UITableViewStylePlain, //普通表格
UITableViewStyleGrouped //分组表格
}UITableViewStyle;
7、实现表格的代理类和数据源
如果数据比较简单，就可以把当前视图控制器 XXXViewController对象作为数据源对象，在当前控制器类中编写数据源代理中的方法。
8、表格的高级操作
选中某一行，导航到下一个视图：
(1)为表格视图，创建一个 导航控制器对象
(2)实现<UITableViewDelegate>
(3)选择 下列方法实现
#pragmamark - Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
//根据行号判断，进行导航
if(indexPath.row==0){
//说明选中第一个单元格
//创建要导航到的新页面
CSubViewController*subview = [[CSubViewControlleralloc]initWithNibName:@"CSubViewController" bundle:nil];
//使用导航控制器对象，进行入栈
[self.navigationController pushViewController:subview animated:YES];
}
}
作业：
1、选择一套 导航模版，创建至少三个 导航视图
2、完成在导航栏中间，添加小按钮，点击后有提示
3、预习 该课堂笔记中的表格内容。