1. UITableView的概念
1> 概述
- UITableView 繼承于 UIScrollView , 可以滾動
- UITableView 的每一條資料對應的單元格叫做 Cell , 是 UITableViewCell 的一個對象, 繼承于 UIView
- UITableView 可以分區顯示, 每個分區稱為 section , 每一行稱為 row, 編号都從0開始
- 系統提供了一個專門的類來整合 section 和 row, 叫做 NSIndexPath
2> 圖解
2. UITableView的基本使用
1> UITableView 的建立代碼
1 // 建立對象
2 // 使用初始化方法,并設定樣式
3 // 系統為我們提供了兩種樣式 (UITableViewStyleGrouped 分組樣式 ,UITableViewStylePlain 普通樣式)
4 self.tableView = [[UITableView alloc] initWithFrame:self.frame style:UITableViewStyleGrouped];
5
6 // 添加到父視圖
7 [self addSubview:self.tableView];
2> UITableView 顯示的相關屬性
1 // 設定屬性
2
3 // 分隔線的顔色
4 self.tableView.separatorColor = [UIColor blackColor];
5
6 // 分隔線的樣式
7 self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
8
9 // 設定行高
10 self.tableView.rowHeight = 120;
11
12 // 添加置頂視圖
13 UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 200)];
14
15 headerView.backgroundColor = [UIColor cyanColor];
16
17 self.tableView.tableHeaderView = headerView;
3. UITableView顯示資料
1> UITableView中兩個重要的屬性
2> UITableView代理的實作代碼
① 簽訂 UITableView 協定
@interface ViewController () <UITableViewDataSource, UITableViewDelegate>
@end
② 設定目前的 ViewController 為 UITableView 代理
1 // 設定dataSource代理
2 tableView.delegate = self;
3
4 // 設定delegate代理
5 tableView.dataSource = self;
③ UITableViewDataSource協定方法的實作代碼
- UITableView 的 DataSource 是負責給 UITableView 對象提供資料的代理, 遵循 UITableViewDataSource 協定
- UITableViewDataSource 協定中有兩個必須實作的協定方法
1 // tableView每個分區要顯示的行數
2 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
3 return 100; }
4 // tableView每次要顯示一個cell都會調用這個方法擷取
5 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
6 UITableViewCell *cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"reuse"] autorelease];
7 cell.textLabel.text = @"标題";
8 return cell;
9 }
- UITableViewDataSource 協定中其他的協定方法
1 // 設定分區個數
2 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
3 return 2;
4 }
5
6 // 設定頭标題
7 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
8
9 return @"頭标題";
10 }
11
12 // 設定未尾标題
13 - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {
14 return @"尾标題";
15 }
16
17 // 設定分區索引
18 - (NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView {
19
20 return @[@"A", @"B", @"C", @"D"];
21 }
④ UITableViewDelegate 協定中的協定方法
1 // 設定行高
2 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
3 return 120;
4 }
5
6 // 設定分區頭高度
7 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
8 if (section == 0) {
9 return 100;
10 }
11 return 40;
12 }
13
14 // 設定分區尾高度
15 - (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
16
17 return 40;
18 }
19
20 // 自定義Section的header視圖
21 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
22 if (section == 0) {
23 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100)];
24 label.backgroundColor = [UIColor orangeColor];
25 label.text = @"第一個section的header視圖";
26
27 return label;
28 }
29 return nil;
30 }
31 // 點選cell
32 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
33 // 取消選中效果
34 [tableView deselectRowAtIndexPath:indexPath animated:YES];
35
36 if (indexPath.section == 0 && indexPath.row == 0) {
37 // 跳轉第二頁
38 SecondViewController *secondVC = [[SecondViewController alloc] init];
39 [self.navigationController pushViewController:secondVC animated:YES];
40
41 }
42 }
3> UITableViewCell
UITableView 的一個單元格 UITableViewCell 類的對象, 繼承于 UIView
① UITableViewCell 預設提供了3個視圖屬性:
1 cell.textLabel.text = @"朋友圈";
2
3 // 詳細的描述Label
4 cell.detailTextLabel.text = @"分享";
5
6 cell.imageView.image = [UIImage imageNamed:@"Action_Moments"];
② 設定後面的小視圖
1 // 設定後面的小視圖 - 系統的樣式 (accessory 配件)
2 cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
3
4 // 設定後面的小視圖 - 自定義樣式
5 UIImageView *accessoryView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 48, 48)];
6 accessoryView.image = [UIImage imageNamed:@"Expression_3"];
7
8 cell.accessoryView = accessoryView;
4. UITableViewCell的重用機制
UITableView 有一個重用池機制管理 cell , 目的是使用盡可能少的 cell 顯示資料
2> UITableView重用cell的流程
- 當一個 cell 被滑出螢幕, 這個 cell 會被系統放到相應的重用池中
- 當 tableView 需要顯示一個 cell , 會先去重用池中嘗試擷取一個 cell
- 如果重用池沒有 cell , 就會建立一個 cell
- 取得 cell 之後會重新指派進行使用
3> UITableView 重用 cell 的兩種方法
① 普通方法
1 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
2
3 static NSString *identifier = @"cell";
4 // 1.優先從重用隊列中查找辨別符為cell的UITableViewCell對象
5 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
6
7 if (cell == nil) {
8 // 如果cell為空,說明重用隊列中沒有辨別符為cell的對象,那麼建立辨別符為cell的對象
9 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
10 }
11
12 // 設定cell顯示的資料
13 ...
14
15 // 傳回cell對象
16 return cell;
17 }
② 使用注冊實作
1 - (void)viewDidLoad {
2 [super viewDidLoad];
3
4 // 第一步:注冊cell
5 [_rootView.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
6
7 }
8 // 傳回cell對象
9 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
10 {
11 // 第二步:根據重用辨別符查找cell(如果找到就傳回,沒有找到就會自動建立一個并傳回)
12 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
13
14 // 設定資料
15 cell.textLabel.text = _dataArray[indexPath.row];
16
17 return cell;
18 }