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協議中有兩個必須實現的協議方法：

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;	UITableView每個分區包含的行數
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;	每一行要顯示的Cell

 

 

 

 

第一個方法可以根據給出的參數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的常用協議方法

• UITableViewDataSource

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

 

 

 

 

 

 

 

 

• UITableViewDelegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath	告訴delegate選中了一個Cell
- (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

Objective-C UI之UITableView詳解