天天看點

iOS學習29之UITableView

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 }      
ui