UITableView动态Cell高度

iOS UI开发过程中,UITableView的动态Cell高度一直都是个问题。实现这样的需求,实现方式有很多种,只是实现起来复杂程度和性能的区别。

在不考虑性能的情况下,tableView动态Cell高度,可以采取估算高度的方式。如果通过估算高度的方式实现的话,无论是纯代码还是Interface Builder,都只需要两行代码就可以完成Cell自动高度适配。

实现方式:
需要设置tableViewrowHeight属性,这里设置为自动高度,告诉系统Cell的高度是不固定的,需要系统帮我们进行计算。然后设置tableViewestimatedRowHeight属性,设置一个估计的高度。(我这里用的代理方法,实际上都一样)

原理:
这样的话,在tableView被创建之后,系统会根据estimatedRowHeight属性设置的值,为tableView设置一个估计的值。然后在Cell显示的时候再获取Cell的高度,并刷新tableViewcontentSize

实现代码:
UITableView部分

- (void)tableViewConstraints {
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.dataList.count;
}

- (MasonryTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    MasonryTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:LXZTableViewCellIdentifier];
    [cell reloadViewWithText:self.dataList[indexPath.row]];
    return cell;
}

// 需要注意的是,这个代理方法和直接返回当前Cell高度的代理方法并不一样。
// 这个代理方法会将当前所有Cell的高度都预估出来,而不是只计算显示的Cell,所以这种方式对性能消耗还是很大的。
// 所以通过设置estimatedRowHeight属性的方式,和这种代理方法的方式,最后性能消耗都是一样的。
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 50.f;
}

- (UITableView *)tableView {
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        // 设置tableView自动高度
        _tableView.rowHeight = UITableViewAutomaticDimension;
        [_tableView registerClass:[MasonryTableViewCell class] forCellReuseIdentifier:LXZTableViewCellIdentifier];
        [self.view addSubview:_tableView];
    }
    return _tableView;
}

UITableViewCell部分

// 自定义了一个UIImageView和UILabel控件,并且通过Masonry进行约束。
[self.avatarImageView mas_makeConstraints:^(MASConstraintMaker *make) {
      make.size.mas_equalTo(CGSizeMake(40, 40));
      make.top.left.equalTo(self.contentView).mas_offset(CellPadding);
}];
        
[self.detailLabel mas_makeConstraints:^(MASConstraintMaker *make) {
      make.left.equalTo(self.avatarImageView.mas_right).mas_offset(CellPadding);
      make.top.equalTo(self.contentView).mas_offset(CellPadding);
      make.right.bottom.equalTo(self.contentView).mas_offset(-CellPadding);
      make.height.greaterThanOrEqualTo(@30);
}];

以上内容来自:iOS自动布局框架-Masonry详解

以上内容根据本人需求验证,发现坑很大啊!!!
需要补充的一点是:
cell的高度是由系统来计算,好像很厉害的样子,实际上,系统是计算各个控件的高度,加上间距得出来的。所以我们必须告诉系统,各个控件的heighttopbottom

自定义Cell中,我们指定avatarImageViewheight,和top
指定detailLabeltopbottom,和>30的height
运行没有问题,但当设置图片的高度>44时,返回到高度仍然是默认高度,cell并不能计算出实际高度。

我用自己的项目来做测试,布局如下:


cell的布局

设置imageViewtopleftwidthheight=width的x倍
label设置lefttopwidth

运行:


屏幕快照 2017-11-29 下午12.02.59.png

结果:不能自动计算高度

思考:估计cell自动计算高度也是根据各个控件的topheightbottom来计算所得的,所以会不会是缺少bottom约束呢?
为了排除其他控件的影响,我删除了label,只留下imageView

运行:
cell的高度仍然为默认高度:44。
并且控制台输出提示:

>2017-11-29 15:39:46.879167+0800 YXTableViewTest[1531:72187] [Warning] Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead.
翻译:
只警告一次:检测到一个情况:约束含糊地表明tableview的cell的contentview的高度为0。我们正在考虑无意的崩溃,并使用标准高度来代替。

提示缺少约束,可能出现height为0的情况,系统因此使用默认高度,44。estimatedRowHeight 的默认高度为:44。

根据提示,那么我可不可以这样理解:由于系统不会主动添加约束,当缺少bottom约束时,系统无法得到完整的约束,来计算imageView所占高度。所以无法计算cell的高度。

解决:增加约束
separatorView.top = 9;
此时xib提示错误:约束出错

因为我的cell高度是随意拉出来的。
所以需要自己计算cell的高度,吻合separatorView.top = 9;
设置cell的高度为91,错误提示消失

运行:无问题

其实不管xib的错误警告也是没有问题的。毕竟约束都设置正确了。

切换为6Plus,出现了警告,提示无法同时满足所有约束:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
·
·
·

经过一番折腾,还是没能解决。
好吧,既然运行没有问题,那就不管了。以后有办法再解决。

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