實現(xiàn)cell的自適應(yīng)布局的前提是要讓cell中的子空間的布局要使用autolayout,這篇文章我們會通過Masonry阿蝶、SDAutoLayout柬甥、xib三種方式實現(xiàn)布局的autolayout,再通過Y軸方向的完全約束來實現(xiàn)cell高度自適應(yīng)苛蒲。
1.Masonry實現(xiàn)cell自適應(yīng):
(1)首先通過Masonry實現(xiàn)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);
}];
}
//只自適應(yīng)文本內(nèi)容
pragma mark -Setter
- (void)setViewModel:(SGITestModel *)viewModel{
[self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
[self.contentLabel setText:viewModel.content];
}
//自適應(yīng)文本和圖片
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)通過預(yù)設(shè)tableview的高度estimatedRowHeight屬性以及tableView的rowHeight設(shè)置UITableViewAutomaticDimension來實現(xiàn)高度自適應(yīng)
- (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(隨便預(yù)設(shè)高度)
(3)效果如下:
2.SDAutoLayout實現(xiàn)cell的自適應(yīng)
-
(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];
}
//只自適應(yīng)文本內(nèi)容
pragma mark -Setter
- (void)setViewModel:(SGITestModel *)viewModel{
[self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
[self.contentLabel setText:viewModel.content];
}
//自適應(yīng)文本和圖片
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];
}
//設(shè)置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實現(xiàn)自適應(yīng)布局
(1)使用xib實現(xiàn)布局
(2)通過預(yù)設(shè)tableview的高度estimatedRowHeight屬性以及tableView的rowHeight設(shè)置UITableViewAutomaticDimension來實現(xiàn)高度自適應(yīng)
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return UITableViewAutomaticDimension;
} - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 100.0f;
}
//自適應(yīng)文本和圖片
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(隨便預(yù)設(shè)高度)
(3)效果圖同上