iOS UIKit：TableView之表格建立（1）

时间 2019-11-12

原文原文链接

Table View是UITableView类的实例对象，其是使用节（section）来描述信息的一种滚动列表。但与普通的表格不一样，tableView只有一行，且只能在垂直方向进行滚动。tableView由多个section组成，而section又由行（row）组成，也可将行称为单元格（cell）。Cell是UITableViewCell类的实例对象。编程

1 样式 设计模式

UIKit框架提供了一些标准样式供设计UITableView和UITableViewCell的结构和显示外观，同时也提供一些单元格的附加显示方式。数组

1.1 Table View app

UITableView类有两种主要的样式：plain 和grouped，二者的差异主要是在外观上。框架

1.1.1 Plain类型 编辑器

Plain样式是table view的一种常规样式，该类型的section间距很是细微。并且每一个section对象都有本身的header和footer标题，当用户滚动表格时，section的header标题会跟着浮动到顶部，同时section的footer则会浮动到表格的底部。如图 11所示。布局

图 11 A table view in the plain style ui

若使用了索引表（indexed list）则会在表格的右侧显示每一个section的header标题，当用户触碰了某一项索引时，视图会滚动到相应的section中，从而索引表起到了导航的做用。如图 12所示。 atom

图 12 A table view configured as an indexed list spa

1.1.2 Grouped类型

Grouped样式的表格也能够展现数据，但每一个section之间都有很是明确的间距，如图 13（左）所示。同时Grouped样式表格的每一个section的位置和尺寸都是固定，如图 13（右）所示。

图 13 A table view in the grouped style

1.2 Cell View

除了为UITableView定义了两种类型的样式外，UIKit框架还为 cell也定义了四种类型的样式。同时用户还能够自定类型的cell样式。

1.2.1 Basic类型

这种类型的cell是由常量UITableViewCellStyleDefault来描述的，其使得table view的cell只拥有一个简单标题和可选的图像。如图 14所示。

图 14 Default table row style

1.2.2 Subtitle类型

该类型的table view cell除拥有一个左对齐的标题，同时还有一个灰色的副标题，固然也能够设置图像。能够经过UITableViewCellStyleSubtitle常量进行描述，如图 15所示的效果图。

图 15 Table row style with a subtitle under the title

1.2.3 Right Detail类型

该类型的table view cell也有一个左对齐的标题，但副标题是蓝色的右对齐，同时不容许设置图像。能够经过UITableViewCellStyleValue1常量进行描述，如图 16所示。

图 16 Table row style with a right-aligned subtitle

1.2.4 Left Detail类型

该类型的table view cell比较特殊，其标题位于行的左侧，可是右对齐的且默认为蓝色；而副标题位于行的右侧，可是为左对齐。同时这种类型样式不容许设置图像。能够经过UITableViewCellStyleValue2常量进行描述，如图 17所示。

图 17 Table row style in Contacts format

1.3 Accessory Views

UIKit框架还Table view提供了三种附加视图，如表 11所示。

表 11 accessory views

accessory views	Name	Description
	Disclosure indicator	使用UITableViewCellAccessoryDisclosureIndicator常量。若需在另外一个层次的table view中显示更详细的信息，则可使用这种类型。
	Detail disclosure button	使用UITableViewCellAccessoryDetailDisclosureButton常量，能够在另外一个view中显示更详细的信息（能够为 table view，也能够不是）。
	Checkmark	使用UITableViewCellAccessoryCheckmark常量。可使用这种样式来让用户进行选择，能够是多选，也能够是单选。

2 API概述

UIKit为table view编程提供了两个protocols，及一个category。

2.1 View

Table view自己是UITableView的实例对象，可使用这个类的方法来配置table view的外观和行为，同时能够用于管理section、row和滚动视图。UITableView继承自UIScrollView类，该类定义了视图的滚动行为，但UITableView只容许在垂直方向上进行滚动操做。

2.2 Data Source与Delegate

一个UITableView对象必需要有一个delegate和一个data source对象。遵照MVC设计模式，data source 用于协调数据模型和视图；而delegate管理视图的外观和行为。其实data source和delegate常常为同一个对象。

1） Data source

Data source对象是继承自UITableViewDataSource协议，而且必须实现该协议的其中两个方法：

tableView:numberOfRowsInSection：该方法是告诉UIKit每一section有多少行，即有多少个cell。
tableView:cellForRowAtIndexPath：该方法向UIKit返回每一行中的cell对象。

另外还有一些可选的方法用于配置section的数目、header和footer，及配置是否支持添加、移除和跟踪row。

2） Delegate

Delegate对象是继承自UITableViewDelegate协议，这个协议没有必需要实现的方法。其提供了不少配置table view可视化外观的方法，及一些section管理方法。同时app还可使用一个便利的类：UILocalizedIndexedCollation。该类帮助data source来组织索引列表的数据；同时当用户点击row时，该类能以很是合适的方式来显示section对象。

2.3 Controller

根据UIKit提出的MVC设计模型，UITableView属于V部分元素，其须要指定C部分元素进行管理。对于control对象，有两种实现方式：

1）继承UIViewController类

若用户直接继承UIViewController类来管理UITableView，那么用户需实现UIViewController类的两个方法，其实现的具体任务为：

viewWillAppear:方法

即在table view展现以前，经过调用UITableView对象的deselectRowAtIndexPath:animated:方法来清理选中的row。
viewDidAppear:方法

即在table view展现了以后，应向UITableView对象发送flashScrollIndicators消息，从而刷新视图。

2）继承UITableViewController类

UITableViewController类已经实现了Delegate和Data Source协议，同时实现了一些细节工做。如当table view将要显示视图时，或是table view完成了显示内容时，UITableViewController类能帮忙清理section对象。另外还能以合适的方式响应用户交互事件；最重要的是UITableViewController类有一个tableView属性，其指向UITableView对象。

注意：

Apple虽然推荐采用继承UITableViewController类来管理tableView，但若一个视图中还拥有其它的子view对象，那么应该采用继承UIViewController类的方式，而不是继承UITableViewController类，由于UITableViewController类会将UITableView对象填充整个屏幕。

固然若在interface builder的库中直接拖动一个 table view controller对象到设计界面中，那么则须要继承UITableViewController类。

2.4 Paths

不少table view方法都使用NSIndexPath对象做为参数。该对象声明了在table view中单元格（cell）的路径，其有两个属性：section和row。经过这个对象能标识二维空间table view中cell的位置。

2.5 Cells

在table view中的行实际上是一个单元格，便是UITableViewCell对象。该类提供了不少方法用于管理和配置单元格。用户能够直接继承该类，从而自定义cell的外观和样式。

3 建立与配置

3.1 基本过程

在建立table view过程当中，有几个实体对象之间会发生交互：viewController、tableView、data source和delegate。其中viewController、data source和delegate通常是同一个对象，以下是建立基本tableView的过程，如图 31所示。

a) viewController指定frame和style值来建立UITableView实例对象，其中可使用programmatically或storyboard方式。

b) 用户（ViewController）为UITableView对象设置data source和delegate对象，而后向其发送reloadData消息。

c) UITableView对象调用data source对象的numberOfSectionsInTableView:方法，从而得到tableView中section的数量。该方法为可选方法，默认返回1。

d) UITableView对象调用data source对象的tableView:numberOfRowsInSection:方法，从而得到每一个section中row的数量，该方法为必须实现的方法。

e) UITableView对象调用data source对象的tableView:cellForRowAtIndexPath:方法，从而得到每一个row中的UITableViewCell对象，该方法为必须实现的方法。

图 31 Calling sequence for creating and configuring a table view

3.2 Storyboard方式

3.2.1 建立tableView

在interface builder的库中有两种控件：table view和table view controller，从而能够采用两种方式来建立表格。

1) table view控件

若使用table view控件，则可自由配置content view中的内容，如能够添加更多的控件，而不是仅仅只有一个table view控件。固然这种方式须要用户进行更多配置，如界面的布局等。以下是建立和配置的步骤：

直接从库中拖动一个table view控件到某个UIViewController的rootView内。
建立一个继承UIViewController类的子类，同时建立遵照UITableViewDataSource和UITableViewDelegate协议的类，在该类中实现data source两个必选方法。
在UIViewController子类中设置tableView对象的data source和delegate对象。
在indentity inspector中指定相应的class类，并指定tableView的样式类型。

2) table view controller控件

也能够直接使用table view controller控件，但因为table view controller控件把整个屏幕除了导航栏和状态栏都被table view所填满，因此没法再添加其它的视图，其自定义方式比较受限，但若只是使用table view则比较简单。以下是建立和配置的步骤：

直接从库中拖动一个table view controller控件到中央的编辑器内。
建立一个UITableViewController类的子类，并实现UITableViewDataSource协议的两个必选方法（其它方法也可实现）。
在indentity inspector标签中指定相应的class类，并指定tableView的样式类型。

3.2.2 设置tableview内容

tableView的内容就是cell，其中有两种方式来建立cell：Dynamic和Static。

1) Dynamic prototypes

这种方式是指在interface builder中建立一个cell原型（模板），而后在data source的相应方法中经过标识符获取原型cell类，接着实例化模板对象并返回。如图 32所示的cell原型（左），及设置Identifier的内容（右）。

图 32 A dynamic table view

2) Static cells

这种方式为tableView指定静态的布局内容和cell的数量。

图 33 A static table view

注意：经过interface builder建立tableView默认是动态原型模型，若但愿使用static cell方式，须要对其进行某些设置，如图 34所示：

选中table view；
显示Attributes inspector；
在其content菜单中选择Static Cells选项。

图 34 static cell配置

3.3 Program方式

3.3.1 实现协议

经过程序的方式建立table view，同样须要实现协议的相应方法；如果继承UIViewController类，则同时还需实现UITableViewDelegate和UITableViewDataSource协议，并实现相应的方法。以下所示。

1 @interface RootViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
2 @property (nonatomic, strong) NSArray *timeZoneNames;
3 @end

3.3.2 建立和配置

在实现相应协议后，便可建立table view对象，并进行相应配置，可按以下方法进行：

a) 建立并初始化UITableView对象；

b) 设置data source和delegate对象；

c) 调用UITableView对象的reloadData方法。

以下是建立一个tableView对象，并设置到controller的view的属性：

1 - ( void)loadView
2 {
3     UITableView *tableView = [[UITableView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame] style:UITableViewStylePlain];
4     tableView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
5     tableView. delegate = self;
6     tableView.dataSource = self;
7     [tableView reloadData];
8
9     self.view = tableView;
10 }

3.4 查询数据

在建立一个UITableView对象后，controller对象将向UITableView对象发送reloadData消息，从而UITableView对象经过查询data source和delegate对象的消息来显示相应section和row对象。

以下所示是实现一个data source和delegate协议方法的简单示例：

1 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { // 可选：返回表格section的数量，默认为1.
2      return [regions count];
3 }
4 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { // 必选：返回每一个section中row的数量
5     Region *region = [regions objectAtIndex:section];
6      return [region.timeZoneWrappers count];
7 }
8 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { // 可选：返回每一个section中的header标题
9     Region *region = [regions objectAtIndex:section];
10      return [region name];
11 }
12 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 必选：返回每一个row中的cell对象
13      static NSString *MyIdentifier = @" MyReuseIdentifier ";
14     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
15      if (cell == nil) {
16         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault  reuseIdentifier:MyIdentifier];
17     }
18     Region *region = [regions objectAtIndex:indexPath.section];
19     TimeZoneWrapper *timeZoneWrapper = [region.timeZoneWrappers objectAtIndex:indexPath.row];
20     cell.textLabel.text = timeZoneWrapper.localeName;
21      return cell;
22 }

3.5 索引列表

Table view经过索引列表可以快速进行导航，其中UITableView的plain和grouped样式均可配置索引列表。而配置索引列表只需实现UITableViewDataSource协议的三个方法：

1) sectionIndexTitlesForTableView:其返回表格右边的索引标题，是一个NSString类型的数组。

2) tableView:titleForHeaderInSection:其返回每一个section的header标题，是一个NSString对象。

3) tableView:sectionForSectionIndexTitle:atIndex:其返回section的索引，即当点击表格右边的索引时，将滚动到section的位置，是一个整型值。

如在一个tableView中有8个section，则与索引列表的三个方法所实现以下：

1 - (NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView
2 {
3     NSArray<NSString*>* array = @[ @" I0 ", @" I1 ", @" I2 ", @" I3 ", @" I4 ", @" I5 ", @" I6 ", @" I7 "];
4      return array;
5 }
6 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
7 {
8     NSString* title = [[NSString alloc] initWithFormat: @" T%ld ",section];
9      return title;
10 }
11
12 - (NSInteger)tableView:(UITableView *)tableView
13 sectionForSectionIndexTitle:(NSString *)title
14                atIndex:(NSInteger)index
15 {
16      return index;
17 }

图 35 索引列表效果图