UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应_郏国上_ios masonry文字宽度自适应

大大的周 02-07 4899

Masonry和SDAutoLayout不同：SDAutoLayout需要上下左右四个方向都显示性的进行约束，虽然当高度和宽度自适应时，可以少一个高度约束，但是也应有对应布局处理设置。因为标签是有顶部和底部空白间隙的，通常高度比字体大小大一些（当字体很大时的粗体差别很大），当设置的高度比标签实际高度小时，标签的顶部和底部被截取。当然它也有好处，就是严格按照布局高度实现ui.而Masonry并非上下左右四个方向都设置约束，一般2到3个不重复方向的约束就可以（没有就采用默认值推导）。就是设置上下左右的约束，它实际的标签也是按照标签的实际显示高度上下留空白，这样就造成和UI有稍微一点高度的偏差。可见他们各有优缺点，一般场景可以混用，带自适应高度的布局场景不能混用。 Masonry的自适应宽度和高度大致可以分为三类情况。第一种情况：控件根据内容进行宽度自适应（就是省略左或右方向的一个约束）： [self.describeTitleLabel mas_makeConstraints:^(MASConstraintMaker make) { make.left.mas_equalTo(COMMON_BIG_EDGE_DISTANCE); // make.width.mas_equalTo(FULL_WIDTH-COMMON_EDGE_DISTANCE2); make.top.mas_equalTo(68+height+8); make.height.mas_equalTo(16.0); }];

当然若你的控件是先加载控件，后填入内容就需要在重置内容后对控件进行重新布局： [self.describeTitleLabel mas_updateConstraints:^(MASConstraintMaker make) { make.left.mas_equalTo(COMMON_BIG_EDGE_DISTANCE); // make.width.mas_equalTo(FULL_WIDTH-COMMON_EDGE_DISTANCE2); make.top.mas_equalTo(68+height+8); make.height.mas_equalTo(16.0); }]; 注意：Masonry是延迟布局生效，不是你刚调用mas_makeConstraints或mas_updateConstraints对控件进行布局后立即填充内容，它的宽度就是刚布局时的宽度。但是若控件已经加载出来，等大约1秒后你再对它赋值，那么你不对它重新布局，那么它显示的就是最开始的宽度。高度自适应也是如此。第二种情况：非表格控件根据内容进行高度自适应（就是省略上或下方向的一个约束）： [content mas_makeConstraints:^(MASConstraintMaker *make) { make.left.mas_equalTo(COMMON_BIG_EDGE_DISTANCE); make.right.mas_equalTo(-COMMON_BIG_EDGE_DISTANCE); make.top.mas_equalTo(68.0); }];

第三种情况：表格控件根据内容进行高度自适应，不但要对控件进行最大预计宽度设置（contentLab.preferredMaxLayoutWidth = SCREEN_WIDTH - BaseSize(43);），还要对表格高度进行自适应（不能有height约束），对表格高度设置为高度自适应的值（UITableViewAutomaticDimension）。表格加载代码：

(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

return UITableViewAutomaticDimension; } 表格控件布局函数部分代码： #import “MessageTableViewCell.h”

@implementation MessageTableViewCell

(void)awakeFromNib { [super awakeFromNib]; // Initialization code }

(void)setSelected:(BOOL)selected animated:(BOOL)animated { [super setSelected:selected animated:animated];

// Configure the view for the selected state }

(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{ self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { [self initCell]; self.selectionStyle = UITableViewCellSelectionStyleNone;

} return self; }

(void)initCell{ UILabel* contentLab = [UILabel labelWithText:@“ttttttttttttttttttttttt” font:SystemFontOfSize(14) textColor:TextBlackColor]; contentLab.preferredMaxLayoutWidth = SCREEN_WIDTH - BaseSize(43); contentLab.numberOfLines = 0; contentLab.textAlignment = 0; [self.contentView addSubview:contentLab]; self.contentLab = contentLab;

[contentLab mas_makeConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(BaseSize(12)).; make.left.mas_equalTo(BaseSize(17)); make.right.mas_equalTo(BaseSize(-26)); make.bottom.mas_equalTo(-BaseSize(23.5));

}]; }

(void)setMsg:(MessageModel *)msg { _msg = msg; self.contentLab.text = msg.Title; }

@end 其中最核心的代码是：

contentLab.preferredMaxLayoutWidth = SCREEN_WIDTH - BaseSize(43); contentLab.preferredMaxLayoutWidth = SCREEN_WIDTH - BaseSize(43); [contentLab mas_makeConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(BaseSize(12)).; make.left.mas_equalTo(BaseSize(17)); make.right.mas_equalTo(BaseSize(-26)); make.bottom.mas_equalTo(-BaseSize(23.5)); }];

注意：若你是立即对表格赋值或赋值后局部更新，需要更新布局使用下面的代码：

- (void)setMsg:(MessageModel *)msg { _msg = msg; self.contentLab.text = msg.Title; [self.contentLab mas_updateConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(BaseSize(12)).; make.left.mas_equalTo(BaseSize(17)); make.right.mas_equalTo(BaseSize(-26)); make.bottom.mas_equalTo(-BaseSize(23.5)); }]; }

另外在UILabel自适应高度的同时，也可以对UILabel显示的最大行数进行限制，代码如下：

[self.productNameLabel setMaxNumberOfLinesToShow:2];

实现自适应高度和宽度见《自适应高度的表格UICollectionView》和《使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应》。