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 }