Masonry-使用纯代码进行iOS的自动布局
2017-02-18 本文已影响326人
charlotte2018
背景：现在项目里除了用xib就是纯代码了，纯代码布局的三方框架Masonry很方便，所以今天就学习它。
首先我们要下载Masonry源码。源码地址如下：
https://github.com/Masonry/Masonry
首先在Masonry中能够添加autolayout约束有三个函数
//第一次加约束
- (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
//更新约束
- (NSArray *)mas_updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
//重新加约束
- (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
用mas_equalTo还是用equalTo，请看下面的宏定义，mas_equalTo传入的值都会用 MASBoxValue包装下 ，为了方便不用考虑什么时候包装，就可以直接用mas_equalTo，省脑子😄。
#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
demo1
UIView *redview = [[UIView alloc]init];
redview.backgroundColor = [UIColor redColor];
[self.view addSubview:redview];
// [redview mas_makeConstraints:^(MASConstraintMaker *make) {
// make.left.mas_equalTo(100);
// make.top.mas_equalTo(100);
// make.right.mas_equalTo(-100);
// make.bottom.mas_equalTo(-100);
// }];
// [redview mas_makeConstraints:^(MASConstraintMaker *make) {
// make.left.mas_equalTo(self.view).offset(100);
// make.right.mas_equalTo(self.view).offset(-100);
// make.top.mas_equalTo(self.view).offset(100);
// make.bottom.mas_equalTo(self.view).offset(-100);
// }];
[redview mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(UIEdgeInsetsMake(100, 100, 100, 100));
}];
QQ20170218-221955@2x.png
demo2
UIView *redview = [[UIView alloc]init];
redview.backgroundColor = [UIColor redColor];
[self.view addSubview:redview];
[redview mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(self.view);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
QQ20170218-223522@2x.png
demo3
UIView *redView = [UIView new];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(200, 200));
make.center.mas_equalTo(self.view);
}];
UIView *greenView = [UIView new];
greenView.backgroundColor = [UIColor greenColor];
[redView addSubview:greenView];
UIView *blueView = [UIView new];
blueView.backgroundColor = [UIColor blueColor];
[redView addSubview:blueView];
[greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
make.top.mas_equalTo(20);
make.bottom.mas_equalTo(-20);
make.right.mas_equalTo(blueView.mas_left).offset(-10);
make.width.mas_equalTo(blueView.mas_width);
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(20);
make.right.mas_equalTo(-10);
make.bottom.mas_equalTo(-20);
make.width.mas_equalTo(greenView.mas_width);
}];
QQ20170218-230713@2x.png
不止可以表达相等关系
mas_greaterThanOrEqualTo == 大于或者等于
mas_lessThanOrEqualTo == 小于或者等于
demo4
UILabel *lab = [UILabel new];
lab.text = @"呵呵呵呵呵呵呵呵呵呵呵呵";
[self.view addSubview:lab];
[lab mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
make.top.mas_equalTo(200);
// make.width.mas_lessThanOrEqualTo(200);
//multipliedBy是倍数关系，宽度为父视图的一半。
make.width.mas_equalTo(self.view).multipliedBy(0.5);
}];
QQ20170218-233825@2x.png
edges 边界
//使 top, left, bottom, right等于 view2
make.edges.equalTo(view2);
//使 top = superview.top + 5, left = superview.left + 10,
// bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))
size 尺寸
// 使宽度和高度大于或等于 titleLabel
make.size.greaterThanOrEqualTo(titleLabel)
//使 width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))
center 中心
//使 centerX和 centerY = button1
make.center.equalTo(button1)
//使 centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))
mas_updateConstraints更新约束,如改变某根约束或者是添加新的约束（不会移除已经存在的约束即使新旧约束间相互冲突 )，如果改变了某根约束后要实现动画效果，看下面代码，调用layoutIfNeeded方法即可。
- (void)viewDidLoad {
[super viewDidLoad];
UIView *redView = [UIView new];
redView.backgroundColor = [UIColor redColor];
self.redview = redView;
[self.view addSubview:redView];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(200, 200));
make.left.mas_equalTo(10);
make.top.mas_equalTo(100);
}];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self.redview mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(100);
}];
[UIView animateWithDuration:1 animations:^{
[self.view layoutIfNeeded];
}];
}
