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）效果图同上
