處理不等高TableViewCell

TableViewCell

今天來和大家一起聊聊處理不等高TableViewCell的那些小花招

課題一：如何計算Cell高度

方案一：直接法（面向對象）

想知道妹紙愛你有多深？直接去問妹紙本人吧！

嗯！Cell也是一樣的，想知道cell到底有多高？直接問Cell本人就好了。直接法，就是把數據布局到Cell上，然后拿到Cell最底部控件的MaxY值。

第一步：創建Cell并正確設置約束，使文字區域高度能夠根據文字內容多少自動調整

QQ截圖20160329114325.png

添加好約束

第二步：再給這個Cell添加點別的東東，就叫這個東東BottomCub了。為Cub添加好約束。

QQ截圖20160329114358.png

隨便添加點什么

第三步：為這個Cell寫一個返回Cell高度 - 也就是BottomCub最大Y值的方法

#import "TestCell.h"

@interface TestCell ()

@property (strong, nonatomic) IBOutlet UILabel *longLabel;

@property (strong, nonatomic) IBOutlet UIView *bottomCub;

@end

@implementation TestCell

//? Cell的構造方法

+ (instancetype)creatWithTitle :(NSString *)title inTableView :(UITableView *)tableView

{

TestCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass(self)];

if (!cell) {

cell = [[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:kNilOptions].lastObject;

}

cell.longLabel.text = title;

return cell;

}

/**

*? 拿到bottomCub的最大Y值并返回

*/

- (CGFloat)cellHeight

{

//? 強制布局之前，需要先手動設置下cell的真實寬度，以便于準確計算

CGRect rect = self.frame;

rect.size.width = [[UIScreen mainScreen] bounds].size.width;

self.frame = rect;

[self layoutIfNeeded];? ? //? 一定要強制布局下，否則拿到的高度不準確

return CGRectGetMaxY(self.bottomCub.frame);

}

@end

第四步：在代理方法中設置Cell高度

*注意：計算Cell高度的過程，一定不要放在heightForRow代理方法中！這一點在后文中將會有所提及。

#import "AskCellViewController.h"

#import "TestCell.h"

@interface AskCellViewController ()

@property (strong, nonatomic) UITableView *tableView;

/** 測試數據 - Cell中文字內容數組*/

@property(copy,nonatomic) NSArray *testTitleArray;

@end

@implementation AskCellViewController

- (void)viewDidLoad {

[super viewDidLoad];

[self.view addSubview:self.tableView];

self.tableView.frame = self.view.bounds;

self.tableView.delegate = self;

self.tableView.dataSource = self;

self.tableView.tableFooterView = [[UIView alloc] init];

}

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

{

TestCell *cell = [TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView];

cell.selectionStyle = UITableViewCellSelectionStyleNone;

return cell;

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

//? *注意：計算Cell高度的過程，一定不要放在此代理方法中！這一點在后文中將會有所提及，此處僅為演示方便

CGFloat cellHeight = [[TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView] cellHeight];

NSLog(@"%f",cellHeight);

return cellHeight;

}

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

{

return self.testTitleArray.count;

}

#pragma mark - Lazy

- (UITableView *)tableView

{

if (!_tableView) {

_tableView = [[UITableView alloc] init];

}

return _tableView;

}

- (NSArray *)testTitleArray

{

return @[@"我是第一個Cell",@"我是第二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二個Cell",@"我是第三個Cell"];

}

@end

動態設定Cell高度結果

方案二：自己算（面向過程）

想知道妹紙愛你有多深？自己來算算看~

通常情況下，Cell之所以不等高，是因為Cell內部文字區域的高度會根據文字數量動態變化，圖片區域的高度會根據圖片數量而自動變化。也就是說，只要知道文字區域的高度、圖片區域的高度，就可以硬生生計算出Cell的高度了。

注意注意注意：如果產品有可能會要求調整行距，切不可用此方法計算！

替代可選方案：

1

CGSize size = [cell.content sizeThatFits:CGSizeMake(cell.content.frame.size.width, MAXFLOAT)];

第一步：硬生生的將每個Cell的高度算出來，并保存在一個數組中

第二步：heightForRow方法中返回相應的CellHeight

#import "CalculatorViewController.h"

#import "TestCell.h"

@interface CalculatorViewController ()

@property (strong, nonatomic) UITableView *tableView;

/** 測試數據 - Cell中文字內容數組*/

@property(copy,nonatomic) NSArray *testTitleArray;

/** 用來存Cell高度的數組*/

@property(copy,nonatomic) NSArray *cellHeightArray;

@end

@implementation CalculatorViewController

- (void)viewDidLoad {

[super viewDidLoad];

[self.view addSubview:self.tableView];

self.tableView.frame = self.view.bounds;

self.tableView.delegate = self;

self.tableView.dataSource = self;

self.tableView.tableFooterView = [[UIView alloc] init];

}

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

{

TestCell *cell = [TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView];

cell.selectionStyle = UITableViewCellSelectionStyleNone;

return cell;

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

CGFloat cellHeight = [self.cellHeightArray[indexPath.row] floatValue];

return cellHeight;

}

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

{

return self.testTitleArray.count;

}

#pragma mark - Lazy

- (UITableView *)tableView

{

if (!_tableView) {

_tableView = [[UITableView alloc] init];

}

return _tableView;

}

- (NSArray *)testTitleArray

{

return @[@"我是第一個Cell",@"我是第二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二個Cell",@"我是第三個Cell"];

}

- (NSArray *)cellHeightArray

{

NSMutableArray *cellHeightTMPArray = [@[] mutableCopy];

//? 開始硬生生的計算每一個Cell高度

for (NSString *string in self.testTitleArray) {

CGFloat cellHeight = 0;

//? 一個Cell由兩部分組成 - 高度自動調整的Label & bottomCub

//? bottomCub高度是確定的 - 120，Label和bottomCub之間的間距是確定的 - 8

static CGFloat bottomCubHeight = 120;

static CGFloat bottomMargin = 8;

//? 計算Label的高度 - 其實就是計算Lable中的String的總高度

//? 1. 拿到將要放入Lable的String

NSString *stringForLabel = string;

//? 2. 根據文字內容、字體（固定值）、文字區域最大寬度計算String總高度

static CGFloat fontSize = 17;

CGFloat labelHeight = [stringForLabel sizeWithFont:[UIFont systemFontOfSize:fontSize] constrainedToSize:CGSizeMake(self.tableView.frame.size.width, CGFLOAT_MAX)].height;

//? 3. 拿到了總高度，放入數組

cellHeight = labelHeight + bottomMargin + bottomCubHeight;

[cellHeightTMPArray addObject:@(cellHeight)];

}

return cellHeightTMPArray;

}

@end

方案三：利用iOS 8新特性

想知道妹紙愛你有多深？知道這個干嘛，直接通過iOS8，讓妹紙愛上你不就好啦~

其實，iOS8已經提供了直接通過XIB讓Cell高度自適應的方法了，只要簡單拖拖線，根本木有必要計算Cell高度，就可以搞定不等高Cell

第一步：設置tableView的估算Cell高度&rowHeight值為自動計算模式

- (void)viewDidLoad {

[super viewDidLoad];

self.tableView.estimatedRowHeight = 100;? //? 隨便設個不那么離譜的值

self.tableView.rowHeight = UITableViewAutomaticDimension;

}

第二步：為Cell中最下面的View設置約束 - 除了要定高、定寬、左上角粘著Label外，還要設置bottom距contentView的bottom間距為固定值，如0

bottomCub約束的添加方式

第三步：一定要注意 - 不能實現heightForRow代理方法！！！不能實現heightForRow代理方法！！！不能實現heightForRow代理方法！！！重要的事情說三遍...

- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath

{

return 1000;

}

QQ截圖20160329114956.png

iOS8新特性實現Cell高度的自適應

效果：一樣杠杠滴~

課題二：在哪計算Cell高度

方案一：在heightForRow代理方法中計算

示例代碼：見課題一方案一

說明：在這里進行計算是非常糟糕的選擇，因為系統調用heightForRow方法非常頻繁 感興趣的小伙伴可以打印測試下...在這里進行計算，意味著系統每調用一次heightForRow方法，就會執行一次高度計算...好可怕有木有?

方案二：在請求到數據后馬上計算

示例代碼：見課題一方案二

說明：在這里進行計算相對于方案一來說進步了很多，在這里計算是不錯的選擇哦！

方案三：在cellForRow代理方法中算

說明：其實，要隆重介紹的是方案三~

思路：

1.既然想知道Cell的高度，那么一定是Cell自己最懂自己有多高啦（面向對象的思維）。

2.那么，在哪里能拿到Cell和Cell的高度呢？ - 當然是CellForRow代理方法中啦！

3.但是，在CellForRow中拿到Cell高度后，如何傳遞給heightForRow代理方法呢？ - 可以將Cell高度保存在一個數組中，或者保存在Cell對應的Model中~

4.但是，我們知道系統對tableView代理方法的調用順序，是先調取heightForRow再調取cellForRow的呀，這意味著，我們在cellForRow方法中拿到cell高度之前，就需要設置heightForRow...怎么辦？

a.解決方案：實現estimatedHeightForRow代理方法！

b.實現這個代理方法后，系統會先調取cellForRow，再調取heightForRow，而且實現這個代理方法之后，腰不酸了，腿不疼了，一口氣上五樓也不費勁了~

示例代碼：可以參考下我之前的文章哦！傳送門 - iOS項目實例：QQ聊天界面UI搭建

注意：如果實現了estimatedHeightForRow代理方法，可能會造成tableView的ContentSize值不正確哦！所以，該方法請選擇使用...

結論

處理不等高TableViewCell，優先使用iOS8新特性（課題一方案三）

不能使用iOS8新特性的情況下，優先選擇課題一方案一+課題二方案三組合

不能用上面兩種，優先選擇使用課題一方案一+課題二方案二組合~

補充

tableView的contentSize計算機制

實驗方案

自定義一個tableView的子類，重寫setContentSize方法，在該方法中打印contentSizeHeight，觀察總結。

分兩組：第一組實現estimatedHeightForRow方法，第二組不實現。

第一組：section = 1 rowNumber = 5 | 估算行高10 | 實際行高100

第二組：section = 1 rowNumber = 5 | 未實現估算行高 | 實際行高100

實驗結果

第一組

36.png

實驗一 - 1組5行|估算行高10|實際行高100|計算contentSize.gif

第二組

QQ截圖20160329115440.png

實驗二 - 1組5行|不估算|實際行高100|計算contentSize.gif

實驗結論

viewDidAppear方法中拿到的contentSize才是準確的contentSize

contentSize至少會設置3次，如果估算行高與實際行高不符，會再次設置contentSize

未解之謎

通過打印我們可以看到，獲取cell之前，詭異地對heighForRow方法遍歷了三次...為什么是三次？

為什么最少設置3次contentSize，不能只設置1次嗎？

能否把返回Cell的方法和heightForRow方法合并成一個代理方法？

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • UITableViewCell 父類是UIView UITableView的每一行都是一個UITableViewC...
    翻這個墻閱讀 6,671評論 0贊 1
  • 我們在上一篇《通過代碼自定義不等高cell》中學習了tableView的相關知識，本文將在上文的基礎上，利用sto...
    啊世ka閱讀 1,533評論 2贊 7
  • 概述在iOS開發中UITableView可以說是使用最廣泛的控件，我們平時使用的軟件中到處都可以看到它的影子，類似...
    liudhkk閱讀 9,088評論 3贊 38
  • 版權聲明:未經本人允許,禁止轉載. 1. TableView初始化 1.UITableView有兩種風格:UITa...
    蕭雪痕閱讀 2,918評論 2贊 10
  • 在街道口，碰到一對情侶，男孩對女孩說：“以后，我會給你幸福的，請你相信我，好嗎？” 突然，我就想到了這個段子...
    壹冰閱讀 452評論 0贊 1