Masonry的使用
2018-06-01 本文已影响5041人
StoneWing
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底部适配
