說說tableViewCell行高計算

UITableView · 發表 2018-12-05 18:47:39

摘要： UITableView 是在app介面裡非常常用的一個控制元件了，開啟一個app，內容列表作者列表朋友圈列表等等，，，都離不開 UITableView 。而 UITableView 的精髓，則是在 UITableViewCell 展現的，最常用的自定義cell 有的行高是固定的，而大...

UITableView 是在app介面裡非常常用的一個控制元件了，開啟一個app，內容列表作者列表朋友圈列表等等，，，都離不開 UITableView 。而 UITableView 的精髓，則是在 UITableViewCell 展現的，最常用的自定義cell 有的行高是固定的，而大部分則需要根據內容來計算行高展示的。

下面就說說我在實際開發中處理cell行高的幾種情況：

1. 不需要動態計算高度

我在寫tableview時，基本都是自定義cell，而所有的自定義cell，都會繼承一個基類BaseTableViewCell：

.h裡：
// 重用標識
+ (NSString *)reuseIdentifier;
// cell高度
+ (CGFloat)staticHeight;

.m裡：
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.opaque = NO;
self.selectionStyle = UITableViewCellSelectionStyleNone;
}
return self;
}

// 重用標識
+ (NSString *)reuseIdentifier {
return NSStringFromClass([self class]);
}

// cell高度
+ (CGFloat)staticHeight {
return 44.f;
}
複製程式碼

這樣寫的好處是，當我們在使用tableview時，會方便我們對重用識別符號行高使用，看一下：

staticHeight可以在子類的自定義cell裡更改設定，使用時：

這樣寫，更能清晰明瞭的看到對每個自定義cell的設定，也會讓程式碼看上去優雅整齊一些。

2. 動態計算高度

實際開發中，使用最多的應該是動態計算cell高度了，這也是tableView很基本的一個功能。比如搜尋資訊這塊：

標題高度不固定，內容高度不固定，標籤不固定，這樣的就需要根據model裡的內容計算行高了：

用的時候,在tableview的代理裡設定：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
WMSearchResultQAModel *model = self.dataArray[indexPath.row];
return [WMSearchResultQAModel calutWholeCellHeightWithModel:model];
}
複製程式碼

這樣就可以達到每個cell根據內容展示不同高度的要求了。這種方法很繁瑣，但是也是最精確的，最可控的，都支援autolayout和frame。

3. 動態計算 - 快取高度

為什麼要快取高度？因為當tableView滾動時會不停的回撥 heightForRowAtIndexPath 這個代理方法，當cell的高度需自適應內容時，就意味著每次回撥這個方法時都要計算高度，而計算是要花時間了，在使用者體驗上的體現就是卡頓，眾所周知 60fps是比較符合人眼審視的，如果幀數低於這個數值過多，就會明顯感受到卡幀等現象，為了讓使用者體驗比較好些，我們就要對高度計算進行優化。

思路：為了避免重複且無意義的計算cell高度，快取高度就顯得尤為重要了。

快取高度機制

快取高度我們需要一個容器來儲存高度數值，可以是model 可以是一個可變陣列也可以是一個可變字典，以達到每當回撥 heightForRowAtIndexPath 這個方法時，我們先去這個快取裡去取，如果有，就直接拿出來，如果沒有，就計算高度，並且快取起來。

以model為例：在model裡宣告個cellHeight屬性，用於儲存Model所對應的Cell的高度，然後在 heightForRowAtIndexPath 方法中，如果當前Model的cellHeight為0，說明這個Cell沒有快取過高度，則計算Cell的高度，並把這個高度記錄在Model中，這樣下次再獲取這個Cell的高度，就可以直接去Model中獲取，而不用重新計算：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
WMSearchResultQAModel *model = self.dataArray[indexPath.row];
if (model.cellHeight > 0) {
// 有快取的高度，取出快取高度
return model.cellHeight;
}
// 沒有快取時，計算高度並快取起來
CGFloat cellHeight; = [WMSearchResultQAModel calutWholeCellHeightWithModel:model];
// 快取給model
model.cellHeight = cellHeight;
return cellHeight;
}

複製程式碼

這樣就實現了高度快取和Model、Cell都對應的優化，我們無需手動管理高度快取，在新增和刪除資料的時候，都是對Model在資料來源中進行新增或刪除。而如果使用可變陣列或可變字典時，則需要額外的在重新整理tableView時對其進行清空處理。

4. 自適應高度

在 iOS8 之後，系統結合autolayout提供了動態結算行高的方法 UITableViewAutomaticDimension ，做好約束，我們都不用去實現 heightForRowAtIndexPath 這個代理方法了。

masonry支援毫無壓力。

實現步驟：

tableView設定

// 預設行高
self.tableView.estimatedRowHeight = xxx;
// 自動計算行高模式 
self.tableView.rowHeight = UITableViewAutomaticDimension;
複製程式碼

在自定義cell裡，masonry佈局，比如:

- (void)layoutSubviews {
[super layoutSubviews];
[self.headImgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.offset(kSpace15);
make.size.mas_equalTo(CGSizeMake(50.f, 50.f));
// 在自動計算行高模式下 要加上的 
make.bottom.equalTo(self.contentView.mas_bottom).offset(-kSpace15);
}];
[self.nickNameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.headImgView.mas_right).offset(12.f);
make.top.offset(17.f);
}];
[self.jobWorkLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.nickNameLabel.mas_right).offset(8.f);
make.right.lessThanOrEqualTo(self.contentView.mas_right).offset(-kSpace15);
make.top.offset(21.f);
}];
[self.hospitalLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.headImgView.mas_right).offset(12.f);
make.top.equalTo(self.jobWorkLabel.mas_bottom).offset(6.f);
}];
[self.line mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.offset(0);
make.height.mas_equalTo(0.5f);
}];
}
複製程式碼

佈局時兩個注意點： · 所有子控制元件,都要依賴與self.contentView作為約束父控制元件,而不是self(cell) · 關鍵控制元件要做bottom約束（因為不再指定行高，所以要需要給出根據bottom的約束）

最關鍵的一步： [cell layoutIfNeeded]

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
WMDoctorEvaluateDescribeInputCell *cell = [tableView dequeueReusableCellWithIdentifier:[WMDoctorEvaluateDescribeInputCell reuseIdentifier] forIndexPath:indexPath];
kWeakSelf
cell.describeInputBlock = ^(NSString * _Nonnull describeText) {
weakSelf.inputDescribeText = describeText;
};
//關鍵的一步,解決不正常顯示問題
[cell layoutIfNeeded];
return cell;
}

複製程式碼

這樣就完成了自動適應高度的要求了。

另外：針對一些自動適應高度不好做的cell，可以單獨處理如下：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 2) {
return [WMDoctorEvaluateStarCell staticHeight];
}
return UITableViewAutomaticDimension;
}
複製程式碼

5.自適應高度 - 快取行高

在用UITableViewAutomaticDimension，有的介面比較複雜，雖然這樣能完成顯示，但是在滑動的過程中，能肉眼感受到卡掉幀，眾所周知 60fps是比較符合人眼審視的，如果幀數低於這個數值過多，就會明顯感受到卡幀等現象，這屬於優化效能方面的問題，所以就要思考一下怎樣來達到優化tableview效能。

思路：快取高度機制

首先獲取cell實際顯示的高度

- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath 
{
NSString *key = [NSString stringWithFormat:@"%ld",(long)indexPath.row];
[self.heightDict setObject:@(cell.height) forKey:key];
NSLOG(@"第%@行的計算的最終高度是%f",key,cell.height);
}
複製程式碼

//didEndDisplayingCell 當cell滑出螢幕時會觸發此方法,是cell已經被真正的顯示在了螢幕上，所以在這裡打印出的高度必然是最正確的高度。根據indexPath.row作為key，將高度快取進字典.

然後在 heightForRowAtIndexPath 方法裡判斷，如果字典裡有值，則使用快取高度，否則自動計算：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *key = [NSString stringWithFormat:@"%ld",indexPath.row];
if (self.heightDict[key] != nil) {
NSNumber *value = _heightDict[key];
return value.floatValue;
}
return UITableViewAutomaticDimension;
}
複製程式碼

注意： 設定cell的預估高度時一定要設定最小高度cell的那個值 。不然的話，在滑動的時候，當高度最小的那個滑動到一大半的時候，就會突然一下消失，造成掉幀的現象。