Objective-C UI之UITableView詳解

UITableView在IOS開發中占據非常重要的位置，必須熟練掌握。

學習UITableView之前，先了解一下一些基本概念：

• UITableView繼承於UIScrollView，是可以進行垂直滾動的控件
• UITableView的每一條數據對應的單元格叫做Cell，是UITableViewCell的一個對象，繼承於UIView
• UITableView可以分區顯示，每一個分區稱為section，每一行稱為row，編號都從0開始
• 系統提供了一個類來整合section和row，叫做NSIndexPath

從上面可以了解到，section和row代表一個UITableViewCell在UITableView上的位置

下面，我們創建一個UITableView：

//style是一個UITableViewStyle類型的參數，是一個枚舉類型，包含UITableViewStylePlain,UITableViewStyleGrouped
UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];

[self.view addSubview:tableView];

 

下面是UITableView的常用屬性：

rowHeight	行高
separatorStyle	分隔線樣式
separatorColor	分隔線顏色
tableHeaderView	UITableView的置頂視圖
tableFooterView	UITableView置底視圖

 

 

 

 

 

一、UITableView基礎

UITableView中有兩個重要的屬性：dataSource（遵循UITableViewDataSource協議）和delegate（遵循UITableViewDelegate協議）

其中dataSource是和顯示數據相關的代理，delegate是和視圖操作相關的代理

UITableViewDataSource協議中有兩個必須實現的協議方法：

1.UITableView每個分區包含的行數:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

2.每一行要顯示的Cell:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

第一個方法可以根據給出的參數section不同返回不同的行數

第二個方法：tableView每次要顯示一個Cell都會調用這個方法獲取

 

UITableView的每一個單元格是UITableViewCell類的對象，默認提供了三個視圖屬性：

1. 圖片視圖：UIImageView *imageView
2. 標題視圖：UILabel *textLabel
3. 副標題視圖：UILabel *detailTextLabel

下面是返回Cell的例子：（沒有使用registerClass注冊的情況）

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellID = @"cell";

    //通過標識符，在tableView的重用池中找到可用的Cell（在重用池內部其實是一個可變的集合）
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];

    //如果重用池中沒有這個標識符對應的cell，則創建一個新的，並且設置標識符
    if (!cell) {
        //代碼塊內只做Cell樣式的處理，不做數據設置
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:cellID];
    }

    //對Cell做數據設置
    [cell.textLabel setText:@"標題"];
    [cell.detailTextLabel setText:@"描述：這是小標題"];
    
    return cell;
}

UITableView有一個重用池機制管理Cell，目的是使用盡可能少的Cell顯示所有的數據

UITableView重用Cell的流程

1. 當一個Cell被滑出屏幕，這個Cell會被系統放到相應的重用池中
2. 當tableView需要顯示一個Cell，會先去重用池中嘗試獲取一個Cell
3. 如果重用池沒有Cell，就會創建一個Cell
4. 取得Cell之后會重新賦值進行使用

在創建UITableView之后，需要注冊一個Cell類，當重用池中沒有Cell的時候，系統可以自動創建Cell。相關方法：

[tableView registerClass:(Class)cellClass forCellReuseIdentifier:(NSString *)identifier];（可以使用不同identifier進行多次注冊）

系統提供了一個獲取重用池中Cell的方法（需要一個重用標識）：

- (UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier;

 

UITableView的常用協議方法

1.UITableViewDataSource

• UITableView分區個數：- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
• 分區的頂部標題：- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
• 分區的底部標題：- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
• UITableView右側的索引錄：- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView

2.UITableViewDelegate

• 告訴delegate選中了一個Cell：- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
• 每一行的高度：- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
• 每一個分區的頂部高度：- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
• 每一個分區的頂部自定義視圖：- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

 

二、UITableView編輯

流程：

1. 讓tableView處於編輯狀態：[tableView setEditing:(BOOL)editing animated:(BOOL)animated];
2. 確定Cell是否處於編輯狀態：

   //重寫UITableViewDataSource的協議方法，根據indexPath決定哪些Cell處於編輯狀態，返回YES是可編輯，NO為不可編輯
   - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath;

3. 設定Cell的編輯樣式（刪除、添加）：

   //重寫UITableViewDelegate的協議方法，根據indexPath可以決定Cell的編輯樣式，是添加UITableViewCellEditingStyleInsert還是刪除UITableViewCellEditingStyleDelete，還是不進行編輯UITableViewCellEditingStyleNone
   - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;

4. 編輯狀態進行提交：

   //重寫UITableViewDataSource協議方法，根據editingStyle刪除indexPath位置的Cell，還是在indexPath處插入Cell，修改數據源
   - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;
   

 注意：編輯結束后，由於numberOfRowInSection這個協議方法只在tableView添加到父視圖的時候調用一次，而且table上的數據都是由數組提供，因此，需要先改變數組中的數據，然后讓table的協議重新調用進行重新賦值

即先修改數據源，在刷新table（使用[table reloadData]方法刷新）

 

三、UITableView移動

1. 實現協議，告訴tableView是否能夠移動：

   //返回YES允許移動
   - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;

2. 移動：

   //修改數據源，再進行[tableView reloadData]更新tableView視圖數據
   - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath

 

四、UITableViewCell

1.自定義Cell

1. 創建一個類繼承於UITableViewCell
2. 實現UITableViewCell的初始化方法：- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
3. 確保所有的添加的子視圖都在自定義Cell的初始化方法中創建，避免子視圖的重復創建
4. 在Cell的子視圖創建成功后，將子視圖設置為屬性，便於在UITableView的協議中給自定義視圖賦值

一般而言，Cell在創建的時候的frame大小是(0,0,320,44)，而我們設定的Cell的高度一般會大於44。因此：在自定義Cell中創建子視圖的frame為CGRectZero。在Cell添加到tableView上的時候才給子視圖設置frame，Cell添加到tableView的時候大小已經更改為tableView設定的大小，所以在自定義Cell的方法layoutSubviews中設置子視圖的frame

2.Model的使用

Model類的作用主要是為我們提供數據，一般我們的數據都是存放在數組和字典中，OC中的KVC就是幫助我們將字典轉換為Model類而存在的

使用步驟：

1. 創建一個Model類繼承於NSObject
2. 添加和字典中對應的屬性，屬性名要和字典key值相同，除系統關鍵字外
3. 在視圖控制器中將字典通過KVC為Model賦值
4. 將Model對象添加到數組中並刷新tableView

注意：Model類要重寫-(void)setValue:(id)value forUndefinedKey:(NSString *)key，防止找不到和key值相同的屬性時，會crash，當key值為系統關鍵字，可以在方法里面為對應的屬性（屬性名和系統關鍵字不沖突）賦值，比如_id = value;

3.多種Cell混合使用

不同的Cell需要使用不同的重用標識符來進行區分，而重用標識符的區分需要根據不同的情況來區分，比如：

• Model屬性區分（不同的數據內容，比如數據中有type字段，0代表文字類型，1代表圖片類型）
• 固定的行顯示的Cell類型不一樣 

4.自適應高度

1. 文本自適應高度：

   //獲得字體樣式屬性
   NSDictionary *att = @{NSFontAttributeName:[UIFont systemFontOfSize:18.0]};
   //根據字體樣式屬性獲得高度
   CGRect rect = [string boundingRectWithSize:CGSizeMake(300,MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:att context:nil];
   //重新設置顯示文本控件的frame
   [self.label setFrame:CGRectMake(0,0,300,rect.size.height)];
   
   //我們可以定義一個類專門用來計算文本高度，這樣可以使用時直接調用

2. Cell自適應高度：

   通過協議方法- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath設定Cell的高度
   
   在自定義Cell中的layoutSubviews方法中設定子視圖的高度

 

 

---

轉載請注明：作者SmithJackyson