0%

UILabel 自适应宽高并设置最大宽度,并主导父 view 的约束

前言

聊天页面的场景,UILabel 自适应宽高且有最大宽度,底部是一个 UIImageView 并且父 view 不能被 UIImageView 充满,要以 UILabel 为准。

效果

先上要求和最后的效果图

要求

结果

处理方法

  1. containerView add subView @[label, imageView]

  2. 设置 label 的约束,一定要设置最大宽度 preferredMaxLayoutWidth

    1
    2
    3
    4
    5
    6
    7
    self.messageLabel.preferredMaxLayoutWidth = 170;//很重要!!!
    [self.messageLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(@8);
    make.right.equalTo(@-13);
    make.top.equalTo(@5);
    make.bottom.equalTo(@-5);
    }];
  3. 设置 imageView 相对于 label 的约束,一定要设置 ContentCompressionResistance

    1
    2
    3
    4
    5
    6
    7
    8
    [self.chatBgIm mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.messageLabel.mas_left).offset(-8);
    make.top.equalTo(self.messageLabel).offset(-5);
    make.right.equalTo(self.messageLabel).offset(13);
    make.bottom.equalTo(self.messageLabel).offset(5);
    }];

    [_chatBgIm setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
  4. 设置 containerView 的约束,左边大于等于 0

    1
    2
    3
    4
    5
    6
    [self.chatBgView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.nameLabel.mas_bottom).offset(4);
    make.left.greaterThanOrEqualTo(@0);
    make.right.equalTo(self.avatarIm.mas_left).offset(-10);
    make.bottom.equalTo(@-10);
    }];
  5. Cmd + R