iOS學習31之UITableVIewCell自定義

1. 自定義Cell

　1> 爲何要自定義Cell

• UITableView 中系統的Cell共提供了四種默認樣式,  分別是:

　　　　UITableViewCellStyleDefault

　　　　UITableViewCellStyleValue1

　　　　UITableViewCellStyleValue2　　

　　　　UITableViewCellStyleSubtitle

　　可是在實際使用過程當中, Cell樣式的佈局上千差萬別, 所以咱們須要自定義Cell

• 在前期咱們學過自定義視圖, 即建立一個類繼承於 UIView 或者 其餘的視圖, 在自定義類中建立其子視圖, 這樣就會造成一個新的自定義視圖。

• 系統提供的cell知足不了複雜的樣式,所以: 定義Cell和自定義視圖同樣,本身建立一種符合咱們需求的Cell並使用這個Cell。

　2> 自定義Cell的步驟

• 建立一個類繼承於 UITableViewCell

• 實現 UITableViewCell 的初始化方法:

 1 // 初始化
 2 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
 3     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
 4     if (self) {
 5         //初始化子視圖
 6         [self initLayout];
 7     }
 8     return self;
 9 }
10 
11 //初始化子視圖佈局方法
12 - (void)initLayout {
13     
14     //1.頭像
15     self.headerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(16, 10, 100, 100)];
16     
17     self.headerImageView.layer.masksToBounds = YES;
18     
19     self.headerImageView.layer.cornerRadius = CGRectGetWidth(self.headerImageView.frame) / 2;
20     
21     // cell提供一個contactVIew屬性，專門用來自定義cell，防止在cell佈局的時候發生佈局混亂，若是是自定義cell，記得將子控件添加到contactVIew上
22     [self.contentView addSubview:self.headerImageView];
23     
24     //2.姓名
25     self.nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMaxX(self.headerImageView.frame) + 10, CGRectGetMinY(self.headerImageView.frame), 100, 40)];
26     
27     [self.contentView addSubview:self.nameLabel];
28     
29     //3.電話號碼
30     self.phoneLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMinX(self.nameLabel.frame), CGRectGetMaxY(self.nameLabel.frame) + 20, 200, 40)];
31 
32     [self.contentView addSubview:self.phoneLabel];
33 }

contentView 是 Cell 提供一個屬性，專門用來自定義 Cell ，防止在 Cell 佈局的時候發生佈局混亂，若是是自定義 Cell，記得將子控件添加到 contactVIew 上

效果圖:

• 確保全部的你想添加的子視圖都在自定義 Cell 的初始化方法中建立, 因爲 UITableView 的重用機制, 一個 Cell 在第一次建立成功並用於下一次顯示的時候,不會再走初始化方法, 這樣能夠避免子視圖的重複建立。

• 在 Cell 的子視圖建立成功後,將子視圖設置爲屬性,相似於 UITableViewCell 所自帶的 textLabel 和 detailTextLabel 屬性。便於在 UITableView 的協議中給自定義視圖賦值。

2. 多種Cell混合使用

　1> 概述

　　在 TableView 中不單單隻顯示一種 Cell , 多種 Cell 能夠並存

　2> 使用場景

　　一個重用標識符只能針對於一種 Cell 樣式, 不一樣的 Cell 須要基於不一樣的重用標識符來進行區分, 重用標識符的區分須要根據不一樣的狀況來劃分, 如:

• model 屬性劃分(不一樣的數據內容,好比一個數據中有 type 字段, 爲1表明圖片類型, 爲0表明文字類型)

 1 Model *model = [self.tableArray objectAtIndex:indexPath.row];
 2 //根據model屬性劃分
 3 if (model.type == 0) {
 4     FirstTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:firstIdentify];
 5     return cell;
 6 }
 7 if (model.type == 1) {
 8     SecondTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:secondIdentify];
 9     return cell;
10 }

• 固定的行顯示的 Cell 類型不同

 1 // 第一行顯示第一種Cell
 2 if (indexPath.row == 0) {
 3     FirstTableViewCell *cell = [tableView
 4                                 dequeueReusableCellWithIdentifier:firstIdentify];
 5     return cell;
 6 }
 7 // 第二行顯示第二種Cell
 8 if (indexPath.row == 1) {
 9     SecondTableViewCell *cell = [tableView
10                                  dequeueReusableCellWithIdentifier:secondIdentify];
11     return cell;
12 }

3. Cell自適應高度 

　1> 自適應高度的兩種應用

　　① 文本自適應高度:根據文本內容設定Label高度

　　　第一步: 修改 Label 的高度(在 - (void)layoutSubView 方法中 )

1 - (void)layoutSubviews {
2     
3     // 1. 獲取文本高度
4     CGFloat textHeight = [Tool textHeightWithText:self.myLabel.text font:[UIFont systemFontOfSize:20]];
5     // 2.修改label的frame
6     self.myLabel.frame = CGRectMake(0, 0, self.bounds.size.width, textHeight);
7 }　　　　

　　　獲取文本高度的方法(通常封裝在工具類中)

 1 // 計算文本高度
 2 + (CGFloat)textHeightWithText:(NSString *)text font:(UIFont *)font {
 3     
 4     // iOS7.0中求文本高度的方法，返回一個CGRect的高度
 5     
 6     // 第一個參數
 7     CGSize size = CGSizeMake([UIScreen mainScreen].bounds.size.width, 10000);
 8     
 9     // 第二個參數：設置以行高爲單位
10     CGRect rect = [text boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : font} context:nil];
11     
12     return rect.size.height;
13 }

　　第二步:設置 Cell 的高度

1 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
2     
3     CGFloat textHeight = [Tool textHeightWithText:self.myModel.textString font:[UIFont systemFontOfSize:20]];
4 
5     return textHeight;
6 }

　  ② 圖片自適應高度:根據圖片寬度進行等比例縮放

　　第一步：修改imageView的高度

1 - (void)layoutSubviews {
2     // 1.獲取圖片的高度
3     CGFloat imageH = [Tool imageHeightWithImage:self.myImageView.image];
4     // 2.修改imageView的高度
5     self.myImageView.frame = CGRectMake(0, textHeight, [UIScreen mainScreen].bounds.size.width, imageH);
6 }

　　獲取圖片高度的方法(通常封裝在工具類中)

 1 + (CGFloat)imageHeightWithImage:(UIImage *)image {
 2     
 3     // 獲取圖片的寬度和高度
 4     CGFloat width = image.size.width;
 5     CGFloat height = image.size.height;
 6     // 計算圖片高度
 7     float scile = height / width;
 8     float screenH = [UIScreen mainScreen].bounds.size.width;
 9 
10     return  scile * screenH;
11 }

　　第二步:設置 Cell 的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    CGFloat imageHeight = [Tool imageHeightWithImage:self.myModel.image];
    
    return imageHeight;
}

　　在上面 獲取圖片高度的方法 中存在一個 bug , 當計算圖片高度的數據類型爲CGFloat時, 對於某些圖片就會出現程序崩潰

　　錯誤代碼:

 1 + (CGFloat)imageHeightWithImage:(UIImage *)image {
 2     
 3     // 獲取圖片的寬度和高度
 4     CGFloat width = image.size.width;
 5     CGFloat height = image.size.height;
 6     // 計算圖片高度
 7     CGFloat scile = height / width;
 8     CGFloat screenH = [UIScreen mainScreen].bounds.size.width;
 9 
10     return  scile * screenH;
11 }

　　錯誤信息:

　　③ 兩種使用同時出現

　　　其餘部分所有相同,處理在第二步設置Cell的高度, 代碼以下:

1 // 設置cell的高度
2 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
3     // 獲得文字自適應高度
4     CGFloat textHeight = [Tool textHeightWithText:self.myModel.textString font:[UIFont systemFontOfSize:20]];
5     // 獲得圖片自適應高度
6     CGFloat imageHeight = [Tool imageHeightWithImage:self.myModel.image];
7     // 返回二者的和
8     return textHeight + imageHeight;
9 }