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方法合并成一個代理方法？
