Masonry适配——（3）UILable如何设置多行显示

最新推荐文章于 2022-11-04 11:18:06 发布

原创最新推荐文章于 2022-11-04 11:18:06 发布 · 1.3w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

iOS 适配专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在Masonry中设置UILabel的多行显示。内容包括两种情况：一是通过preferredMaxLayoutWidth、setContentHuggingPriority:forAxis:和numberOfLines属性实现自适应多行显示；二是计算文本高度后设置高度约束，可能面临显示不全的问题。详细代码示例展示了Masonry设置label多行显示的具体步骤。

https://github.com/potato512/SYDemo_Masonry

UILabel在使用过程中，一个重要的特性是可以进行多行显示，或者是自定义显示行数。同时呢，在设置多行显示的过程中，还可以计算出label所需要的高度。

但不管是使用frame，还是使用masonry进行设置，都需要设置显示行数属性，即属性"numberOfLines"。

当在使用frame设置时，可以很好的计算其高度，而在使用masonry时，既可以设置高度约束进行多行显示，也可以不设置高度约束进行多行自适应显示。

那masonry时具体应该怎么进行设置呢？多行显示是又怎么设置呢？

有两种情况供参考。

情况1：设置属性后，然后根据文本自动多行显示，无需设置标签高度约束

1 属性preferredMaxLayoutWidth，如：label.preferredMaxLayoutWidth = (WidthScreen - 10.0 * 2);

2 方法setContentHuggingPriority:forAxis:，如：[label setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];

3 属性numberOfLines，如：label.numberOfLines = 0;

4 自适应label多行显示时，无需设置label高度，即无需写以下代码：make.height.mas_equalTo(???);

情况2：设置多行属性，然后计算文本高度，再设置高度约束（不足：可能导致文本显示不全）

1 属性numberOfLines，如：label.numberOfLines = 0;

2 计算高度height，如：CGFloat height = [label4.text boundingRectWithSize:CGSizeMake((WidthScreen - 2 * 10.0), MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:label4.font} context:nil].size.height;

3 设置标签高度约束，如：make.height.mas_equalTo(height);

使用masonry设置label显示的效果如下图所示：

情况1（自适应多行全部显示）情况2（计算高度多行显示，偶尔显示不全）

具体见代码：

NSString *text = @"Masonry是一个轻量级的布局框架与更好的包装AutoLayout语法。Masonry有它自己的布局方式，描述NSLayoutConstraints使布局代码更简洁易读。Masonry支持iOS和Mac OS X。Masonry github 地址:https://github.com/SnapKit/Masonry";
UILabel *label4 = [[UILabel alloc] initWithFrame:CGRectZero];
[self.view addSubview:label4];
label4.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.3];
label4.text = text;

// 多行显示时设置
// 情况1
label4.preferredMaxLayoutWidth = (WidthScreen - 10.0 * 2);
[label4 setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];
label4.numberOfLines = 0;
[label4 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(10.0);
        make.right.mas_equalTo(-10.0);
        make.top.mas_equalTo(currentView.mas_bottom).offset(10.0);
        
        // 自适应label多行显示时，无需设置label高度
        // make.height.mas_equalTo(40.0);
}];

// 情况2（不足：可能导致文本显示不全）
label4.numberOfLines = 0;
CGSize size = [label4.text boundingRectWithSize:CGSizeMake((WidthScreen - 2 * 10.0), MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:label4.font} context:nil].size;
CGFloat heightText = size.height;
[label4 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(10.0);
        make.right.mas_equalTo(-10.0);
        make.top.mas_equalTo(currentView.mas_bottom).offset(10.0);
   
        // 设置实际文本高度约束
        make.height.mas_equalTo(heightText);
}];

注意：使用masonry进行label的多行显示设置时，主要是涉及以下三个参数的设置

1、@property(nonatomic)CGFloat preferredMaxLayoutWidth

2、- (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis

3、@property(nonatomic)NSInter numberOfLines