美文网首页iOS UI
iOS Masonry布局(二) - UILabel

iOS Masonry布局(二) - UILabel

作者: FieryDragon | 来源:发表于2020-02-09 21:28 被阅读0次
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";
redViewredView.png
label.text = @"redViewredViewredViewredViewredViewredViewredViewredView";
redViewredViewredViewredViewredViewredViewredViewredView.png

如图所示:随着文字内容的改变,视图的宽高也会动态改变。

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

YYLabel自适应宽高

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

如上例需增加代码:

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

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

抗拉伸和抗压缩

项目中常会遇到同一行展示两条不同的信息需求,此时需要设置两个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));
  • 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";
默认拉伸.png

设置抗拉伸优先级:

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

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

  • contentCompressionResistancePriority
    抗压缩,优先级越高,越不容易被压缩,默认是750。
    titleLabel.text = @"Masonry布局 - UILabel抗拉伸和抗压缩";
    nameLabel.text = @"FieryDragon";
默认压缩.png

设置抗压缩优先级:

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

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

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

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

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

相关文章

  • iOS Masonry布局(二) - UILabel

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

  • 适配

    Masonry iOS自动布局框架-Masonry详解

  • iOS 常用布局方式之Masonry

    级别: ★☆☆☆☆标签:「iOS Masonry」「iOS 自动布局」「Masonry」作者: Xs·H审校: ...

  • App架构方方面面

    布局 揭秘 iOS 布局 Masonry源码解析 自动布局&绝对布局autolayoutautolayout 动画...

  • Third Party

    A:推荐使用 B:修改使用 C:参考使用 自动布局Masonry(A)iOS自动布局框架-Masonry详解SDA...

  • Masonry

    Masonry Masonry常用的属性和方法 例: UILabel* lable = [[UILabel all...

  • UITableView autolayout的tableHead

    使用masonry给tableHeadView 添加各种子View,并做好布局 对子View中多行的UILabel...

  • masonry 源码解读

    ios 手写布局的几种方式 Frame AutoLayout VFL Masonry ios 布局的几种方式 1....

  • Masonry分析

    iOS 源代码分析----Masonry Masonry是OC自动布局的框架,简化了AutoLayout的写法。 ...

  • swift中Masonry的布局

    iOS SnapKit自动布局使用详解(Swift版Masonry) 对于自动布局: 我们在 StoryBoard...

网友评论

    本文标题:iOS Masonry布局(二) - UILabel

    本文链接:https://www.haomeiwen.com/subject/fguathtx.html