快捷導(dǎo)航

你應(yīng)該知道的tableViewCell行高計(jì)算處理

更新時(shí)間：2018年12月06日 10:39:55 作者：Climb

這篇文章主要給大家介紹了關(guān)于tableViewCell行高計(jì)算的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

UITableView 是在app界面里非常常用的一個(gè)控件了，打開一個(gè)app，內(nèi)容列表作者列表朋友圈列表等等，，，都離不開 UITableView 。

而 UITableView 的精髓，則是在 UITableViewCell 展現(xiàn)的，最常用的自定義cell 有的行高是固定的，而大部分則需要根據(jù)內(nèi)容來(lái)計(jì)算行高展示的。

下面就說(shuō)說(shuō)我在實(shí)際開發(fā)中處理cell行高的幾種情況：

1. 不需要?jiǎng)討B(tài)計(jì)算高度

我在寫tableview時(shí)，基本都是自定義cell，而所有的自定義cell，都會(huì)繼承一個(gè)基類BaseTableViewCell：

.h里：

.h里：
// 重用標(biāo)識(shí)
+ (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;
}

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

// cell高度
+ (CGFloat)staticHeight {
 return 44.f;
}

這樣寫的好處是，當(dāng)我們?cè)谑褂胻ableview時(shí)，會(huì)方便我們對(duì)重用標(biāo)識(shí)符行高使用，看一下：

staticHeight可以在子類的自定義cell里更改設(shè)置，使用時(shí)：

這樣寫，更能清晰明了的看到對(duì)每個(gè)自定義cell的設(shè)置，也會(huì)讓代碼看上去優(yōu)雅整齊一些。

2. 動(dòng)態(tài)計(jì)算高度

實(shí)際開發(fā)中，使用最多的應(yīng)該是動(dòng)態(tài)計(jì)算cell高度了，這也是tableView很基本的一個(gè)功能。

比如搜索資訊這塊：

標(biāo)題高度不固定，內(nèi)容高度不固定，標(biāo)簽不固定，這樣的就需要根據(jù)model里的內(nèi)容計(jì)算行高了：

用的時(shí)候,在tableview的代理里設(shè)置：

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

這樣就可以達(dá)到每個(gè)cell根據(jù)內(nèi)容展示不同高度的要求了。

這種方法很繁瑣，但是也是最精確的，最可控的，都支持autolayout和frame。

3. 動(dòng)態(tài)計(jì)算 - 緩存高度

為什么要緩存高度？

因?yàn)楫?dāng)tableView滾動(dòng)時(shí)會(huì)不停的回調(diào) heightForRowAtIndexPath 這個(gè)代理方法，當(dāng)cell的高度需自適應(yīng)內(nèi)容時(shí)，就意味著每次回調(diào)這個(gè)方法時(shí)都要計(jì)算高度，而計(jì)算是要花時(shí)間了，在用戶體驗(yàn)上的體現(xiàn)就是卡頓，眾所周知 60fps是比較符合人眼審視的，如果幀數(shù) 低于這個(gè)數(shù)值過(guò)多，就會(huì)明顯感受到卡幀等現(xiàn)象，為了讓用戶體驗(yàn)比較好些，我們就要對(duì)高度計(jì)算進(jìn)行優(yōu)化。

思路：為了避免重復(fù)且無(wú)意義的計(jì)算cell高度，緩存高度就顯得尤為重要了。

緩存高度機(jī)制

緩存高度我們需要一個(gè)容器來(lái)保存高度數(shù)值，可以是model 可以是一個(gè)可變數(shù)組也可以是一個(gè)可變字典，以達(dá)到每當(dāng)回調(diào) heightForRowAtIndexPath 這個(gè)方法時(shí)，我們先去這個(gè)緩存里去取，如果有，就直接拿出來(lái)，如果沒(méi)有，就計(jì)算高度，并且緩存起來(lái)。

以model為例：

在model里聲明個(gè)cellHeight屬性，用于保存Model所對(duì)應(yīng)的Cell的高度，然后在 heightForRowAtIndexPath 方法中，如果當(dāng)前Model的cellHeight為0，說(shuō)明這個(gè)Cell沒(méi)有緩存過(guò)高度，則計(jì)算Cell的高度，并把這個(gè)高度記錄在Model中，這樣下次再獲取這個(gè)Cell的高度，就可以直接去Model中獲取，而不用重新計(jì)算：

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 WMSearchResultQAModel *model = self.dataArray[indexPath.row];
 if (model.cellHeight > 0) {
  // 有緩存的高度，取出緩存高度
  return model.cellHeight;
 }
 // 沒(méi)有緩存時(shí)，計(jì)算高度并緩存起來(lái)
 CGFloat cellHeight; = [WMSearchResultQAModel calutWholeCellHeightWithModel:model];
 // 緩存給model
 model.cellHeight = cellHeight;
 return cellHeight;
}

這樣就實(shí)現(xiàn)了高度緩存和Model、Cell都對(duì)應(yīng)的優(yōu)化，我們無(wú)需手動(dòng)管理高度緩存，在添加和刪除數(shù)據(jù)的時(shí)候，都是對(duì)Model在數(shù)據(jù)源中進(jìn)行添加或刪除。

而如果使用可變數(shù)組或可變字典時(shí)，則需要額外的在刷新tableView時(shí)對(duì)其進(jìn)行清空處理。

4. 自適應(yīng)高度

在 iOS8 之后，系統(tǒng)結(jié)合autolayout提供了動(dòng)態(tài)結(jié)算行高的方法 UITableViewAutomaticDimension，做好約束，我們都不用去實(shí)現(xiàn) heightForRowAtIndexPath 這個(gè)代理方法了。

masonry支持毫無(wú)壓力。

實(shí)現(xiàn)步驟：

1、tableView設(shè)置

// 預(yù)設(shè)行高
self.tableView.estimatedRowHeight = xxx;
// 自動(dòng)計(jì)算行高模式 
self.tableView.rowHeight = UITableViewAutomaticDimension;

2、在自定義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));
  // 在自動(dòng)計(jì)算行高模式下 要加上的 
  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);
 }];
}

布局時(shí)兩個(gè)注意點(diǎn)：

· 所有子控件,都要依賴與self.contentView作為約束父控件,而不是self(cell)

· 關(guān)鍵控件要做bottom約束（因?yàn)椴辉僦付ㄐ懈撸砸枰o出根據(jù)bottom的約束）

3、最關(guān)鍵的一步： [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;
  };
 //關(guān)鍵的一步,解決不正常顯示問(wèn)題
 [cell layoutIfNeeded];
 return cell;
}

這樣就完成了自動(dòng)適應(yīng)高度的要求了。

另外：

針對(duì)一些自動(dòng)適應(yīng)高度不好做的cell，可以單獨(dú)處理如下：

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

5.自適應(yīng)高度 - 緩存行高

在用UITableViewAutomaticDimension，有的界面比較復(fù)雜，雖然這樣能完成顯示，但是在滑動(dòng)的過(guò)程中，能肉眼感受到卡掉幀，眾所周知 60fps是比較符合人眼審視的，如果幀數(shù) 低于這個(gè)數(shù)值過(guò)多，就會(huì)明顯感受到卡幀等現(xiàn)象，這屬于優(yōu)化性能方面的問(wèn)題，所以就要思考一下怎樣來(lái)達(dá)到優(yōu)化tableview性能。

思路：

緩存高度機(jī)制

首先獲取cell實(shí)際顯示的高度

- (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(@"第%@行的計(jì)算的最終高度是%f",key,cell.height);
}

//didEndDisplayingCell 當(dāng)cell滑出屏幕時(shí)會(huì)觸發(fā)此方法,是cell已經(jīng)被真正的顯示在了屏幕上，所以在這里打印出的高度必然是最正確的高度。根據(jù)indexPath.row作為key，將高度緩存進(jìn)字典.

然后在 heightForRowAtIndexPath 方法里判斷，如果字典里有值，則使用緩存高度，否則自動(dòng)計(jì)算：

- (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;
}

注意：設(shè)置cell的預(yù)估高度時(shí)一定要設(shè)置最小高度cell的那個(gè)值。不然的話，在滑動(dòng)的時(shí)候，當(dāng)高度最小的那個(gè)滑動(dòng)到一大半的時(shí)候，就會(huì)突然一下消失，造成掉幀的現(xiàn)象。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: