[iOS] TableViewCell 自适应高度

说明

TableViewCell 几乎是必用控件,使用 TableViewCell 免不了计算其 cell 高度,网上也有非常多关于 TableViewCell 高度自适应的文章,自己也尝试总结了计算cell高度的几种方法。

TableViewCell 的行高计算

固定行高时

Cell高度固定图

如图所示:Cell 的格式是固定的,有一个固定高度,这种情况可以通过行高属性 rowheight 及行高方法 heightForHeaderInSection 来设置

//设置行高的属性
self.tableview.rowheight = 100;

//设置行高的方法
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 100;
}

行高不固定时

Cell高度变化图

如图所示:UILabel 的文字长度是不固定的,有的 Cell 含有配图,有的 Cell 不含配图,所以 Cell 的高度不能写死。需要根据数据的情况,让 Cell 自适应高度。

Cell 自适应高度的方法

方法一:通过 sizeThatFits 或 boundingWithRect 计算UILabel高度 从而计算 Cell行高

对于 UIImageView 的处理:

使用masonry对图片添加约束,当设置数据源的时候:
- 若有图片则使用SDWebImage 设置图片。
- 若无图片,则不设置图片,使用 mas_updateConstraints 更新约束将图片高度设置为0.

对于 UILabel 的处理:

计算UILabel高度即可:至于计算UILabel高度的计算方式,不管是普通文字的 text, 还是富文字的 attributedText 都可以通 sizeThatFits 或 boundingWithRect,计算出 UILabel的高度,详细计算方法参考另一篇文章UILabel 设置内容的间距及高度的计算

行高的计算

由以上两步,分别计算出 UIImageView 的高度 imaeViewHeight、UILabel 的高度labelHeigh。此时 Cell 的行高就可以通过 imageViewHeight + labelHeight 计算出行高 cellHeight, 此时将cellHeight通过模型来保存: model.cellHeigh = imageViewHeight + labelHeight ,方便以后调用 。

最后通过 heightForRowAtIndexPath 来设置该行行高

//设置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return model.cellHeight;
}

方法二: 通过 autoLayout 设置估计高度,来自适应高度

此方法适用于 iOS8 之后版本

对于 UIImageView 的处理:

使用 masonry 对图片添加约束,当设置数据源的时候:
- 若有图片则使用SDWebImage 设置图片。
- 若无图片,则不设置图片,使用 mas_updateConstraints 更新约束将图片高度设置为0.

对于 UILabel 的处理

只需要在设置数据源之后,调用 [contentLabel sizeToFit];

行高设置方法

  • 使用属性: self.tableView.estimatedRowHeight = 100; //设置估计高度
  • 设置高度: self.tableView.rowHeight = UITableViewAutomaticDimension; //
    设置 rowHeight 默认值

这样 Cell 就可以自适应高度了。
此时,会自适应高度,所以 heightForRowAtIndexPath 方法设置高度就没有效果。
- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath { } 失效。

方法三: 使用第三方框架 UITableView+FDTemplateLayoutCell

使用UITableView+FDTemplateLayoutCell,就算比较复杂的界面,只需要调用 fd_heightForCellWithIdentifier 即可轻松解决。
此框架使用方法非常简单,
1. 首先检查:Cell 中 Y 方向约束设置完整。
3. 然后检查:是否注册 cell, registerClass。
4. 导入头文件:UITableView+FDTemplateLayoutCell.h。
5. 在-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{ }方法中调用 API。

API 设置方法如下:

#import <UITableView+FDTemplateLayoutCell.h>
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return [tableView fd_heightForCellWithIdentifier:@"identifer" cacheByIndexPath:indexPath configuration:^(id cell) {
        // 配置 cell 的数据源,和 "cellForRow" 干的事一致,比如:        
        [cell configureCellWithData:self.model[indexPath.row]];
    }];
}

在设置数据时,若图片为空,则不需要设置图片,及清零图片高度:

- (void)configureCellWithData:(JHmodel *)model {
//设置数据
  _contentLabel.text = [NSString stringWithFormat: @"%@:%@\n\n%@:%@",
                        self.title,
                        model.newsTitle,
                        self.news,
                        model.newcontent,
                        ];
//当图片不为空时,设置图片,更新约束
    if (model.urlImage != nil) {
    [self.urlImageView sd_setImageWithURL:[NSURL URLWithString:model.urlImage]];
    [self.urlImageView mas_updateConstraints:^(MASConstraintMaker *make) {
      make.height.mas_equalTo(180);
      make.bottom.mas_equalTo(self.contentView).offset(-15);
    }];
  } else {
//当图片为空时,不设置图片,更新约束
    [self.urlImageView mas_updateConstraints:^(MASConstraintMaker *make) {
      make.height.mas_equalTo(0);
      make.bottom.mas_equalTo(self.contentView).offset(0);
    }];
  }
}

ViewDemo

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值