美文网首页
Autolayout

Autolayout

作者: 一位不愿透露姓名的王先生_ | 来源:发表于2019-08-05 16:12 被阅读0次

<h3 id=ConstraintPriority>约束优先级问题</h3>

<h4 id=UseMasonry>使用Masonry</h4>

一行两个Label,距离屏幕左右边距各15,测试不同文字内容长度时Label的显示情况,以及通过设置优先级后Label的显示情况来透彻理解约束优先级问题。

  • ContentHuggingPriority表示当前的Label的内容不想被拉伸;
  • 默认HuggingPriority == 250
  • 值越大越不被拉伸(最大1000)
  • ContentCompressionResistancePriority表示当前的Label的内容不想被收缩;
  • 默认CompressionResistancePriority == 750
  • 值越大越不被收缩(最大1000)
@interface ViewController ()

@property (nonatomic, strong) UILabel *leftLabel;
@property (nonatomic, strong) UILabel *rightLabel;

@end
#pragma mark - Getters and Setters
- (UILabel *)leftLabel {
    if (_leftLabel == nil) {
        _leftLabel = [[UILabel alloc] init];
        _leftLabel.text = @"左边";
        _leftLabel.textColor = [UIColor redColor];
        _leftLabel.backgroundColor = [UIColor lightGrayColor];
    }
    return _leftLabel;
}

- (UILabel *)rightLabel {
    if (_rightLabel == nil) {
        _rightLabel = [[UILabel alloc] init];
        _rightLabel.text = @"右边";
        _rightLabel.textColor = [UIColor blueColor];
        _rightLabel.backgroundColor = [UIColor lightGrayColor];
    }
    return _rightLabel;
}
#pragma mark - Life Cycle
- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupUI];
}

#pragma mark - SetupUI
- (void)setupUI {
    
    [self.view addSubview:self.leftLabel];
    [self.view addSubview:self.rightLabel];
    
    [self.leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(16);
        make.top.equalTo(self.view).offset(50);
    }];
    [self.rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.view).offset(-16);
        make.centerY.equalTo(self.leftLabel);
    }];
}

<h5>文字内容足够少、居左右两侧显示</h5>

按照上面默认的即可。

<h5>文字内容足够少、但需要一方拉伸</h5>

[self.leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view).offset(16);
    make.top.equalTo(self.view).offset(50);
    make.right.equalTo(self.rightLabel.mas_left).offset(-10);
}];
[self.rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.view).offset(-16);
    make.centerY.equalTo(self.leftLabel);
}];
[self.leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view).offset(16);
    make.top.equalTo(self.view).offset(50);
}];
[self.rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.view).offset(-16);
    make.centerY.equalTo(self.leftLabel);
    make.left.equalTo(self.leftLabel.mas_right).offset(10);
}];

或者按照如下方式设置

/**
 * 设置左侧 Label 不被拉伸(即右边的被拉伸)
 * 默认情况下:HuggingPriority == 250;
 * 就要设置 leftLabel.HuggingPriority > 250
 * 或者     rightLabel.HuggingPriority < 250
 * UILayoutPriorityRequired == 1000;
 * 这里只要是 HuggingPriority > 250 即可,写成 251 也是同样的效果;
 */
[self.leftLabel setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
//    UILayoutPriorityFittingSizeLevel == 50;
//    [self.rightLabel setContentHuggingPriority:UILayoutPriorityFittingSizeLevel forAxis:UILayoutConstraintAxisHorizontal];

[self.leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view).offset(16);
    make.top.equalTo(self.view).offset(50);
    make.right.equalTo(self.rightLabel.mas_left).offset(-10);
}];
[self.rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.view).offset(-16);
    make.centerY.equalTo(self.leftLabel);
    make.left.equalTo(self.leftLabel.mas_right).offset(10);
}];

<h5>文字内容足够多、右侧被压缩</h5>

只要设置leftLabelrightrightLabelmas_left间距即可。需要谁不被压缩,就设置谁距离另外一个被压缩的的间距即可。

如果左右相互之间的间距都设置的话,那么默认右侧Label被压缩。

[self.leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view).offset(16);
    make.top.equalTo(self.view).offset(50);
    make.right.equalTo(self.rightLabel.mas_left).offset(-10);
}];
[self.rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.view).offset(-16);
    make.centerY.equalTo(self.leftLabel);
}];

<h5>文字内容足够多、左侧被压缩</h5>

设置rightLabelleftleftLabelmas_right间距即可。需要谁不被压缩,就设置谁距离另外一个被压缩的的间距即可。

[self.leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view).offset(16);
    make.top.equalTo(self.view).offset(50);
}];
[self.rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.view).offset(-16);
    make.centerY.equalTo(self.leftLabel);
    make.left.equalTo(self.leftLabel.mas_right).offset(10);
}];

或者通过ContentCompressionResistancePriority设置

/**
 * 设置右侧 Label 不被压缩(即左侧的被压缩)
 * 默认情况下:ContentCompressionResistancePriority == 750;
 * 就要设置 rightLabel.ContentCompressionResistancePriority > 750
 * 或者     leftLabel.ContentCompressionResistancePriority < 750
 * UILayoutPriorityRequired == 1000;
 * 这里只要是 ContentCompressionResistancePriority > 750 即可,写成 751 也是同样的效果;
 */
[self.rightLabel setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
//    UILayoutPriorityDefaultLow == 250;
[self.leftLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

[self.leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view).offset(16);
    make.top.equalTo(self.view).offset(50);
    make.right.equalTo(self.rightLabel.mas_left).offset(-10);
}];
[self.rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.view).offset(-16);
    make.centerY.equalTo(self.leftLabel);
    make.left.equalTo(self.leftLabel.mas_right).offset(10);
}];

相关文章

  • 9.4 AutoLayout使用

    AutoLayout使用 AutoLayout使用.png

  • iOS - AutoLayout -2 AutoLayout

    # iOS - AutoLayout -2 AutoLayout 上篇文章我们了解了AutoLayout 的布局方...

  • ScrollView 与 Autolayout

    ScrollView 与 Autolayout ScrollView 与 Autolayout

  • # iOS - AutoLayout -1

    iOS - AutoLayout -1 1、AutoLayout 自动布局(AutoLayout)是iOS6引入的...

  • iOS布局

    布局方式 AutoLayout,AutoresizingMask AutoLayout NSLayoutConst...

  • AutoLayout

    AutoLayout autolayout的概念 Autolayout是一种“自动布局”技术,专门用来布局UI界面...

  • 9.6AutoLayout约束基础

    AutoLayout约束基础 AutoLayout约束基础1.png AutoLayout约束基础2.png Au...

  • UI基础4

    自动布局 autoresizing:autolayout:size classes + autolayout:si...

  • AutoLayout

    AutoLayout深入浅出一[前传] AutoLayout深入浅出二[基本使用] AutoLayout深入浅出三...

  • autoLayout 和 autoresizing

    autolayout 和 autoresizing 不能够共存,使用autoLayout必须关闭aoturesizing

网友评论

      本文标题:Autolayout

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