Masonry实现多个Label横排显示效果

一、前言

我们在开发中经常会用到Masonry来实现自动布局，有时候实现两个Label横向排列时，如果设置了右侧label距离right的间距，则会出现不连续的情况，为此我们需要用下面两个参数来处理显示情况

• contentHuggingPriority 抗拉伸
• contentCompressionResistancePriority 抗压缩

二、效果展示（常规情况）

• 常规展示效果，代码如下

    UILabel *leftLabel = [[UILabel alloc] init];
    leftLabel.backgroundColor = [UIColor redColor];
    leftLabel.text = @"左侧文字";
    leftLabel.textColor = [UIColor whiteColor];
    [self.view addSubview:leftLabel];
    
    UILabel *rightLabel = [[UILabel alloc] init];
    rightLabel.backgroundColor = [UIColor blueColor];
    rightLabel.text = @"右侧文字";
    rightLabel.textColor = [UIColor whiteColor];
    [self.view addSubview:rightLabel];
    
    [leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(10);
        make.top.offset(100);
    }];
    
    [rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(leftLabel.mas_right).offset(10);
        make.right.offset(-10);
        make.centerY.mas_equalTo(leftLabel);
    }];

常规样式

• 更改文字长度后的效果

leftLabel.text = @"左侧文字一二三四五六七八九十";
rightLabel.text = @"右侧文字一二三四五六七八九十";

长度过长

• 总结：由上可见，默认情况下，1、在宽度够的情况下，左侧被拉伸，2、在宽度不够的情况下，右侧被压缩

三、设置后的效果（抗压缩、抗拉伸）

1、setContentHuggingPriority 抗拉伸，这个值越低，就会在宽度多余的情况下，被拉伸，默认250
2、setContentCompressionResistancePriority 抗压缩，这个值越低，就会在宽度不够的情况下，被压缩，默认是750

• 第一种情况，文字短，宽度够用的情况，如果想让右侧label显示满可以按如下设置

leftLabel.text = @"左侧文字";
rightLabel.text = @"右侧文字";
// 设置抗拉伸属性，left的值大于right的值，这个值越低，就会在宽度多余的情况下，被拉伸
[leftLabel setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
[rightLabel setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

image.png

• 第二种情况，文字长，宽度不够用的情况下，如果想压缩左侧left，可以按如下设置

leftLabel.text = @"左侧文字一二三四五六七八九十";
rightLabel.text = @"右侧文字一二三四五六七八九十";
// 设置抗压缩属性，left的值小于right的值，这个值越低，就会在宽度不够的情况下，被压缩
[leftLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
[rightLabel setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];

image.png

四、延展

• 如果想要预留一定的width，可以使用mas_greaterThanOrEqualTo，这样就会有一个最小的宽度，针对第二种情况，如果left想预留一个最小的宽度，而不是被一直压缩，效果如下

[leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       make.left.offset(10);
      // 最小的宽度
       make.width.mas_greaterThanOrEqualTo(@(150));
       make.top.offset(100);
 }];
[rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       make.left.mas_equalTo(leftLabel.mas_right).offset(10);
       make.right.offset(-10);
       make.centerY.mas_equalTo(leftLabel);
}];

image.png

• 如果想设置一个最大宽度，可以设置mas_lessThanOrEqualTo，针对第二种情况，右侧设置最大宽度为150，可以按如下设置

[leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       make.left.offset(10);
       make.top.offset(100);
}];
    
[rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       make.left.mas_equalTo(leftLabel.mas_right).offset(10);
       make.right.offset(-10);
       make.centerY.mas_equalTo(leftLabel);
       // 最大的宽度
       make.width.mas_lessThanOrEqualTo(@(150));
 }];

image.png