TableViewCell自适应高度三种实现方式

实现cell的自适应布局的前提是要让cell中的子空间的布局要使用autolayout，这篇文章我们会通过Masonry、SDAutoLayout、xib三种方式实现布局的autolayout，再通过Y轴方向的完全约束来实现cell高度自适应。
1.Masonry实现cell自适应：
（1）首先通过Masonry实现cell的布局

• (void)setUpView{
  ...此处布局省略
  [self.contentView addSubview:self.adavterImgV];
  [_adavterImgV mas_makeConstraints:^(MASConstraintMaker *make) {
  make.top.equalTo(headerView.mas_bottom).offset(15);
  make.left.equalTo(headerView).offset(15);
  make.size.mas_equalTo(CGSizeMake(30, 30));
  }];
  [self.contentView addSubview:self.contentImgV];
  [_contentImgV mas_makeConstraints:^(MASConstraintMaker *make) {
  make.top.equalTo(self.nameLabel.mas_bottom).offset(15);
  make.left.equalTo(self.contentView).offset(15);
  make.right.equalTo(self.contentView).offset(-15);
  make.height.equalTo(@200);
  }];

  [self.contentView addSubview:self.contentLabel];
  [_contentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
  make.top.equalTo(self.contentImgV.mas_bottom).offset(15);
  make.left.equalTo(self.contentView).offset(15);
  make.right.equalTo(self.contentView).offset(-15);
  make.bottom.equalTo(self.contentView).offset(-15);
  }];
  }
  //只自适应文本内容

pragma mark -Setter

• (void)setViewModel:(SGITestModel *)viewModel{
  [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
  [self.contentLabel setText:viewModel.content];
  }
  //自适应文本和图片

pragma mark -Setter

• (void)setViewModel:(SGITestModel *)viewModel{
  [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
  [self.contentLabel setText:viewModel.content];
  [self.contentImgV mas_updateConstraints:^(MASConstraintMaker *make) {
  make.height.equalTo(@((SGIScreenWidth-30)/viewModel.ratio));
  }];
  }
  附注：viewModel.ratio为计算出的图片宽高比，这里为了方便省略了计算方式，下面使用的viewModel.ratio同理

（2）通过预设tableview的高度estimatedRowHeight属性以及tableView的rowHeight设置UITableViewAutomaticDimension来实现高度自适应

• (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
  return UITableViewAutomaticDimension;
  }
• (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
  return 100.0f;
  }

核心代码：self.rowHeight = UITableViewAutomaticDimension;
self.estimatedHeight = 44.0f(随便预设高度)

（3）效果如下：

IMG_0158.JPG

2.SDAutoLayout实现cell的自适应

• (void)setUpView{
  ...此处布局省略

  [self.contentView addSubview:self.contentImgV];
  _contentImgV.sd_layout
  .topSpaceToView(self.nameLabel, 15)
  .leftEqualToView(self.adavterImgV)
  .rightEqualToView(self.nameLabel)
  .heightIs(200);

  [self.contentView addSubview:self.contentLabel];
  _contentLabel.sd_layout
  .topSpaceToView(self.contentImgV, 15)
  .leftEqualToView(self.contentImgV)
  .rightEqualToView(self.contentImgV)
  .autoHeightRatio(0);
  [self setupAutoHeightWithBottomView:self.contentLabel bottomMargin:15];

}
//只自适应文本内容

pragma mark -Setter

• (void)setViewModel:(SGITestModel *)viewModel{
  [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
  [self.contentLabel setText:viewModel.content];
  }
  //自适应文本和图片

pragma mark -Setter

• (void)setViewModel:(SGITestModel *)viewModel{
  [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
  [self.contentLabel setText:viewModel.content];
  _contentImgV.sd_resetLayout
  .topSpaceToView(self.nameLabel, 15)
  .leftEqualToView(self.adavterImgV)
  .rightEqualToView(self.nameLabel)
  .autoHeightRatio(viewModel.ratio);
  [self setupAutoHeightWithBottomView:self.contentLabel bottomMargin:15];
  }
  //设置cell的高度
• (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
  // return UITableViewAutomaticDimension;
  return [tableView cellHeightForIndexPath:indexPath model:self.contentArray[indexPath.section] keyPath:@"viewModel" cellClass:[SGITestAutoTableViewCell class] contentViewWidth:SGIScreenWidth] ;
  }

核心代码：[self setupAutoHeightWithBottomView:self.contentLabel bottomMargin:15];
[tableView cellHeightForIndexPath:indexPath model:self.contentArray[indexPath.section] keyPath:@"viewModel" cellClass:[SGITestAutoTableViewCell class] contentViewWidth:SGIScreenWidth] ;

（3）效果图同上

3.xib实现自适应布局
（1）使用xib实现布局

1585905241827.jpg

（2）通过预设tableview的高度estimatedRowHeight属性以及tableView的rowHeight设置UITableViewAutomaticDimension来实现高度自适应

• (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
  return UITableViewAutomaticDimension;
  }
• (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
  return 100.0f;
  }

//自适应文本和图片

pragma mark -Setter

• (void)setViewModel:(SGITestModel *)viewModel{
  [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
  [self.contentLabel setText:viewModel.content];
  self.constrait_height.constant = (SGIScreenWidth -30) *viewModel.ratio;
  }

核心代码：self.rowHeight = UITableViewAutomaticDimension;
self.estimatedHeight = 44.0f(随便预设高度)

（3）效果图同上