四种方法实现UITableView的cell高度自动计算

UITableview是iOS开发中使用最频繁的一个控件,在实际开发中,我们经常需要定制cell,让cell显示图片、文字等。由于cell包含的图片和文字是根据服务器返回的数据进行填充的,这就导致cell包含的内容的高度是不定的。

四种方法计算cell的高度:

1、iOS8的自动计算机制,需要autolayout(适用iOS8之后系统)
2、iOS6之后系统API结合autolayout进行计算(适用于iOS6之后的系统)
3、手动计算(适用于iOS6之后的系统)
4、借助于第三方框架自动计算(适用于iOS6之后的系统)


方法1:iOS8的自动计算

此方法必须使用autolayout,这里我是用的xib设置的,也可以使用第三方框架masonry设置。

设置约束的时候必须注意每个控件在垂直方向上必须都有约束,这样cell才可以计算出来高度。
下面我们来看看cell的内部控件的垂直方向的约束如何设置

昵称label的垂直约束
Paste_Image.png
内容文字label的垂直约束
Paste_Image.png
内容图片的垂直约束

height <= 400这个约束也可以不用设置,我这里是为了不让图片过长,所以限制了高度。

Paste_Image.png

下面我只贴出计算高度的代码,整个Demo我会放大github上面。

具体实现代码

iOS8时代的高度计算非常简单,下面两行代码就搞定了,非常方便。
前提是需要设置好在垂直高度上的约束。

- (void)viewDidLoad{    
    self.tableView.estimatedRowHeight = 80.0f;
    self.tableView.rowHeight = UITableViewAutomaticDimension;
}

效果如下

方法2:iOS6的系统API结合autolayout

控件的约束和第一个方法的一样,下面列出的代码是和第一个方法不同的地方。
该方法的demo和第一个方法的demo是同一个,每个方法独立使用到的代码我会特别注明,没有注明就是所有方法共有的。

//TableViewCell.m文件
//======================
- (void)setModel:(TableViewModel *)model
{
    //必须设置label的最大宽度,不然系统无法计算label的最大高度
    CGFloat preferredWidth = [UIScreen mainScreen].bounds.size.width - 53;
    self.userName.preferredMaxLayoutWidth = preferredWidth;
    self.userContentString.preferredMaxLayoutWidth = preferredWidth;

    self.headImage.image = model.userHeadImage;
    self.userContentImage.image = model.userContentImage;
    self.userContentString.text = model.userContentString;
    self.userName.text = model.userName;
}
//viewController.m文件
//===========================
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    static TableViewCell *Cell;
    static dispatch_once_t onceToken;
    //必须使用dispatch_once,保证只会从缓存池中取一个cell用于高度计算,其他的cell高度都是用这个cell的高度。不然每次都从缓存池中取出来不同的cell,导致高度计算出问题
    dispatch_once(&onceToken, ^{
        Cell = [tableView dequeueReusableCellWithIdentifier:CellId];
    });

   TableViewModel *model = self.modelArray[indexPath.row];
    Cell.model = model;
    // 根据当前数据,计算Cell的高度,注意+1是contentview和cell之间的分割线高度
    model.cellHeight = [Cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height +1.0f;
   return model.cellHeight;
}

//实现该方法后,tableview就不会一次性调用完所有cell的高度,有些不在可见范围的cell是不需要一开始就知道高度的。当然,estimatedHeightForRowAtIndexPath方法调用频率就会非常高,所以我们尽量返回一个比较接近实际结果的固定值以提高性能.
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 112.0f;
}

```
该方法实现效果和方法一相同

---
###方法3、手动计算
该方法需要手动计算垂直高度上每个控件的高度,然后相加得出cell的高度。
这种方法最繁琐,但是也是最精确的,也是最可控的。
使用这个方法,可以不需要使用autolayout设置约束,直接使用frame设置每个控件的位置。但是为了方便,我这里还是使用autolayout设置控件的约束和位置。

因为需要确切的知道每个控件的高度,所以这里image的高度必须是固定的,这样才可以进行cell的高度计算
修改如下

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/277755-af1882da9e9033c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

######修改的代码如下:
```
//TableViewModel.m文件
//===============================
#import "TableViewModel.h"

@implementation TableViewModel

//方法3代码
- (CGFloat)cellHeight{
    // 文字的最大尺寸(设置内容label的最大size,这样才可以计算label的实际高度,需要设置最大宽度,但是最大高度不需要设置,只需要设置为最大浮点值即可),53为内容label到cell左边的距离
    CGSize maxSize = CGSizeMake([UIScreen mainScreen].bounds.size.width - 53, MAXFLOAT);
  
    // 计算内容label的高度
    CGFloat textH = [self.userContentString boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14]} context:nil].size.height;
    
    /*
     昵称label和cell的顶部为0
     17为昵称label的高度
     8.5为昵称label和内容label的间距
     textH为内容label的高度
     304为内容image的高度
     */
    _cellHeight = 0 + 17 + 8.5 + 8 +textH + 304;
    
    return _cellHeight;
}

```
```
//ViewController.m文件
//==========================

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
 //方法3代码
   TableViewModel *model =  self.modelArray[indexPath.row];
    return model.cellHeight;
}
```

---
###方法四、使用第三方框架
这是国内的一个大神写的框架,可以一行代码就实现cell的高度自动计算。同时还能实现缓存高度,最低兼容版本为iOS6。
实现代码就不写了,非常简单

具体看这篇文章:《[优化UITableViewCell高度计算的那些事](http://blog.sunnyxx.com/2015/05/17/cell-height-calculation/)》

这里啰嗦两点,也是自己踩过的坑:

1、在博主的文字里面提到使用的时候直接使用如下代码即可:
```
#import <UITableView+FDTemplateLayoutCell.h>
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return [tableView fd_heightForCellWithIdentifier:@"identifer" cacheByIndexPath:indexPath configuration:^(id cell) {
        // 配置 cell 的数据源,和 "cellForRow" 干的事一致,比如:
        cell.entity = self.feedEntities[indexPath.row];
    }];
}
```
一定要把上面的id cell,换成自己的cell类,比如我的就是WSTableViewCell *cell。算是一个小坑吧。

2、很多人肯定吃过self-sizing-cell的亏,觉得我上面都设置对了,为什么就是算不出来高度呢?

要满足self-sizing-cell,必须满足两点:

* 你的cell里面的控件必须在上下左右四个方向都有约束到cell的四个边。如下图:
![](http://upload-images.jianshu.io/upload_images/277755-b542dff0d55ddc91.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

*约束一定要是控件和cell的contentView边缘之间的约束,而不是控件和cell边缘的之间的约束。
 
因为设计给的图,cell内部的控件和cell的距离是到cell边缘的距离,然后我就发现怎么都不能进行高度自动计算,所有的cell全部叠在一起了。被这个坑了很久,一直找不出来原因。另外cell的边缘和cell的contentView的边缘相差8pt。

######错误设置:

ReplayCell是cell的名字


![Paste_Image.png](http://upload-images.jianshu.io/upload_images/277755-6c893ca13fbe137c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

######正确设置:
superView是cell的contentView
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/277755-1a3adac25658e4e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

---
###总结:
上面四种方法各有优缺点,如果你的App最低兼容版本是iOS8,那请毫不犹豫的选择方法一的系统方法吧,高效简洁。

如果你需要最低兼容iOS6,可以从其他三个方法中选一个,建议使用方法四的第三方框架,高效强大。

所有的代码都放在了Github上面,小伙伴们可以参考下。

地址如下:
https://github.com/XiMu-Demo/Blog-Demo/tree/master/calculateCellHeight
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,423评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,147评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,019评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,443评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,535评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,798评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,941评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,704评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,152评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,494评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,629评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,295评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,901评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,978评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,333评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,499评论 2 348

推荐阅读更多精彩内容