Masonry的使用

Masonry,是对Auto Layout进行分装的第三方框架,对应的swift版本为Snapkit,Snpkit的简单使用.下面来介绍Masnory的简单使用

---

Masnory的简单使用:

下面来看一个简单的例子:

- (UILabel *)label {
    if (!_label) {
        _label = [UILabel new];
        [self.view addSubview: _label];
        [_label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.left.mas_equalTo(0); 
            make.centerY.mas_equalTo(self.view);
            make.width.height.mas_greaterThanOrEqualTo(0);
        }];
    }
    return _label;
}

注:

• 非常重要:进行布局的时候,必需是在[addSubview]以后
• mas_greaterThanOrEqualTo: 大于等于,上面的例子表示,这个label的宽度,高度时自适应的

Masonry进阶:(相对某个view进行布局),看下面的例子:

- (UILabel *)leftLb {
    if (!_leftLb) {
        _leftLb = [UILabel new];
        _leftLb.font = [UIFont systemFontOfSize:18];
        _leftLb.backgroundColor = [UIColor redColor];
        [self.view addSubview:_leftLb];
        [_leftLb mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(0);
            make.height.mas_equalTo(20);
            make.centerY.mas_equalTo(self.view);
        }];
    }
    return _leftLb;
}
- (UILabel *)rightLB {
    if (!_rightLB) {
        _rightLB = [UILabel new];
        _rightLB.font = [UIFont systemFontOfSize:18];
        _rightLB.backgroundColor = [UIColor blueColor];
        [self.view addSubview:_rightLB];
        [_rightLB mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(self.leftLb.mas_right);
            make.right.mas_equalTo(0);
            make.centerY.mas_equalTo(self.view);
        }];
    }
    return _rightLB;
}

• 效果如下图

相对布局

• 但是,我们发现了什么问题?(左边的label被拉伸了是不是);所以我门做一个修改

- (UILabel *)leftLb {
    if (!_leftLb) {
        _leftLb = [UILabel new];
        _leftLb.font = [UIFont systemFontOfSize:18];
        _leftLb.backgroundColor = [UIColor redColor];
        [self.view addSubview:_leftLb];
        [_leftLb mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(0);
            make.height.mas_equalTo(20);
            make.centerY.mas_equalTo(self.view);
        }];
        [_leftLb setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
    }
    return _leftLb;
}

• 我们再来看一下效果(发现我们设置了一个属性setContentHuggingPriority:这个属性代表的被拉伸的权限,越高的话代表越不容易被拉伸, UILayoutConstraintAxisHorizontal:代表的水平方向)

左边不拉伸

• 下面我们再来做一些修改:

- (UILabel *)leftLb {
    if (!_leftLb) {
        _leftLb = [UILabel new];
        _leftLb.font = [UIFont systemFontOfSize:18];
        _leftLb.backgroundColor = [UIColor redColor];
        [self.view addSubview:_leftLb];
        [_leftLb mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(0);
            make.right.mas_lessThanOrEqualTo(self.rightLB.mas_left);
            make.height.mas_equalTo(20);
            make.centerY.mas_equalTo(self.view);
        }];
        [_leftLb setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
    }
    return _leftLb;
}
- (UILabel *)rightLB {
    if (!_rightLB) {
        _rightLB = [UILabel new];
        _rightLB.font = [UIFont systemFontOfSize:18];
        _rightLB.backgroundColor = [UIColor blueColor];
        [self.view addSubview:_rightLB];
        [_rightLB mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_greaterThanOrEqualTo(self.leftLb.mas_right);
            make.right.mas_equalTo(0);
            make.centerY.mas_equalTo(self.view);
        }];
    }
    return _rightLB;
}

• 看一下效果:(我们可以看到是不是左边的label被压缩了)

左边被压缩

• 如果我们有这种需求,我们需要优先显示全左边的,右边的显示不完全的时候显示...的话,我们改怎么办?所以,我们再来修改一下:

- (UILabel *)leftLb {
    if (!_leftLb) {
        _leftLb = [UILabel new];
        _leftLb.font = [UIFont systemFontOfSize:18];
        _leftLb.backgroundColor = [UIColor redColor];
        [self.view addSubview:_leftLb];
        [_leftLb mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(0);
            make.right.mas_lessThanOrEqualTo(self.rightLB.mas_left);
            make.height.mas_equalTo(20);
            make.centerY.mas_equalTo(self.view);
        }];
        [_leftLb setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
        [_leftLb setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
    }
    return _leftLb;
}

• 看一下效果:(可以看到我们新加了一个属性setContentCompressionResistancePriority:代表的是被压缩的权限,越高越不容易被压缩)

左边不压缩

• 注意:其实setContentHuggingPriority还是setContentCompressionResistancePriority方法,只要设置的值比其他的高,就会优先高的,可以直接设置num,如:1000,700.但是记住:ContentHuggingPriorit默认的是250,ContentCompressionResistancePriority默认的750

题外话,Masonry对iPhoneX的处理(不被底部线条遮挡住),比如:

- (UILabel *)bottomLB {
    if (!_bottomLB) {
        _bottomLB = [UILabel new];
        _bottomLB.font = [UIFont systemFontOfSize:18];
        _bottomLB.backgroundColor = [UIColor darkGrayColor];
        _bottomLB.textColor = [UIColor whiteColor];
        _bottomLB.textAlignment = NSTextAlignmentCenter;
        [self.view addSubview:_bottomLB];
        [_bottomLB mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.bottom.mas_equalTo(0);
            make.height.mas_equalTo(50);
        }];
    }
    return _bottomLB;
}

• 效果图如下:(我们可以看到,左边iPhoneX上面,被底部线条挡住了,影响使用,因为底部触摸会出现返回手机主页的功能,右边的其他型号手机则正常的)

iPhoneX底部

• 我们改如何做呢?我们做一下修改如下:

- (UILabel *)bottomLB {
    if (!_bottomLB) {
        _bottomLB = [UILabel new];
        _bottomLB.font = [UIFont systemFontOfSize:18];
        _bottomLB.backgroundColor = [UIColor darkGrayColor];
        _bottomLB.textColor = [UIColor whiteColor];
        _bottomLB.textAlignment = NSTextAlignmentCenter;
        [self.view addSubview:_bottomLB];
        [_bottomLB mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.mas_equalTo(0);
            make.height.mas_equalTo(50);
            make.bottom.mas_equalTo(self.view.mas_bottomMargin);
//            if (@available(iOS 11.0, *)) {
//                make.bottom.mas_equalTo(self.view.mas_safeAreaLayoutGuideBottom);
//            } else {
//                // Fallback on earlier versions
//                make.bottom.mas_equalTo(self.view);
//            }
        }];
    }
    return _bottomLB;
}

• 效果如下:(是不是正常了,不影响使用.上面的2种方法都可行的,)

iPhoneX底部适配