UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应

简介: UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应

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实现控件根据内容进行宽度自适应和高度自适应》

目录
相关文章
|
前端开发 开发者 容器
CSS 自适应内容宽度的输入框
CSS 自适应内容宽度的输入框
CSS 自适应内容宽度的输入框
|
4月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
2022 1
|
4月前
|
JavaScript
ELEMENT-PLUES如何设计二级高亮样式,文字如何呈现高亮效果,如果字体出现不对齐的情况,侧边栏icon如何调位置,目录如何折叠,如何延迟动画播放,如何添加阴影,如何添加logo,在行内样式写宽
ELEMENT-PLUES如何设计二级高亮样式,文字如何呈现高亮效果,如果字体出现不对齐的情况,侧边栏icon如何调位置,目录如何折叠,如何延迟动画播放,如何添加阴影,如何添加logo,在行内样式写宽
|
5月前
|
前端开发 容器
CSS实现三列布局(左右固定宽度,中间自适应)
CSS实现三列布局(左右固定宽度,中间自适应)
|
6月前
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
98 2
|
6月前
表格高度根据内容自适应的瀑布流
表格高度根据内容自适应的瀑布流
50 1
|
6月前
自适应高度的表格UICollectionView
自适应高度的表格UICollectionView
62 0
|
UED 容器
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局
80 0
|
JavaScript
textarea 动态宽高(根据内容动态撑开宽高)
textarea 动态宽高(根据内容动态撑开宽高)
406 0
|
前端开发
CSS高级技巧——鼠标样式,轮廓,文本域防拖拽,vertical-align 垂直对齐,文字溢出问题
CSS高级技巧——鼠标样式,轮廓,文本域防拖拽,vertical-align 垂直对齐,文字溢出问题
229 0
CSS高级技巧——鼠标样式,轮廓,文本域防拖拽,vertical-align 垂直对齐,文字溢出问题