iOS Masonry布局 - UILabel

368 阅读2分钟

1. UILabel自适应宽高

UILabel使用Masonry布局时如果不添加宽高约束,视图会根据内容自适应宽高。

示例:

    UILabel *label = [[UILabel alloc] init];
    label.mas_key = @"redViewKey";
    label.numberOfLines = 0;
    label.backgroundColor = [UIColor redColor];
    [self.view addSubview:label];

    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.right.lessThanOrEqualTo(self.view.mas_right).offset(-20.f);
    }];
    label.text = @"redViewredView";

备注:建议设置视图的最大宽度,避免文字过多时超出屏幕。

2. YYLabel自适应宽高

YYLabel实现自适应宽高时还需设置 preferredMaxLayoutWidth 属性值,该属性的作用为设置YYLabel的最大宽度。

如上例需增加代码:

label.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 40.f;

备注:UILabel对象偶尔也需要设置preferredMaxLayoutWidth属性才能自适应高度。

3. 抗拉伸和抗压缩

项目中常会遇到同一行展示两条不同的信息需求,此时需要设置两个label的边缘约束来解决信息的文字长度不确定引起的文字覆盖问题,还需根据内容的重要程度等因素的不同来确保信息的优先展示。

系统已经为我们提供了方法通过设置label的抗拉伸及抗压缩的优先级来实现该需求。

- (UILayoutPriority)contentHuggingPriorityForAxis:(UILayoutConstraintAxis)axis API_AVAILABLE(ios(6.0));
- (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis API_AVAILABLE(ios(6.0));

- (UILayoutPriority)contentCompressionResistancePriorityForAxis:(UILayoutConstraintAxis)axis API_AVAILABLE(ios(6.0));
- (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis API_AVAILABLE(ios(6.0));
3.1 contentHuggingPriority

抗拉伸,优先级越高,越不容易被拉伸,默认是250。

    [titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(130.f);
        make.left.equalTo(self.view.mas_left).offset(20.f);
        make.right.equalTo(nameLabel.mas_left).offset(-5.f);
    }];
    [nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(titleLabel.mas_bottom);
        make.right.equalTo(self.view.mas_right).offset(-20.f);
    }];
    titleLabel.text = @"Masonry布局";
    nameLabel.text = @"FieryDragon";

image.png

设置抗拉伸优先级:

    //抗拉伸
    [titleLabel setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
    [nameLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];

image.png

如图所示:由于nameLabel的优先级低于titleLabel,所以nameLabel被优先拉伸。

3.2 contentCompressionResistancePriority

抗压缩,优先级越高,越不容易被压缩,默认是750。

    titleLabel.text = @"Masonry布局 - UILabel抗拉伸和抗压缩";
    nameLabel.text = @"FieryDragon";

image.png

设置抗压缩优先级:

    //抗压缩
    [titleLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [nameLabel setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];

image.png

如图所示:由于titleLabel的抗压缩优先级低于nameLabel,所以titleLabel被优先压缩。

4. 使用

一般遇到一行两个label时,需要同时设置两个label的抗拉伸和抗压缩。

示例:确保nameLabel内容展示全部。

    //抗拉伸
    [titleLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [nameLabel setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
    
    //抗压缩
    [titleLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [nameLabel setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];