首先看下Masonry和PureLayout的区别:
Masonry | PureLayout | |
---|---|---|
重量级,需学习成本 | 轻量级,语法更偏向Objective-C | |
添加约束 | mas_makeConstraints 使用了 block 模块 | 没有 block |
更新约束 | mas_updateConstraints 保证不会导致出现两个相同约束的情况 | 开发者控制 |
删除约束 | mas_remakeConstraints ,没有针对 IOS 8 使用 Active 属性 | 针对 IOS 8 使用 Active 属性 |
Massonry的用法:
lable = [UILabel new];
[self.view addSubview:lable];
#prama mark 左右边距20 距离顶部20 高度40的Label
[lable mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(@20);
make.right.equalTo(@(-20));
make.top.equalTo(@20);
make.height.equalTo(@40);
}];
lable.backgroundColor = [UIColor redColor];
lable.textAlignment = NSTextAlignmentCenter;
lable.text = @"masonry测试Label";
#prama mark 顶部距离label底部20 左右边距20 高度40的TextField
UITextField* textField = [UITextField new];
[self.view addSubview:textField];
[textField mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(lable.mas_bottom).with.offset(20);
make.left.equalTo(@20);
make.right.equalTo(@(-20));
make.height.equalTo(@40);
}];
textField.backgroundColor = [UIColor redColor];
textField.placeholder = @"masonry测试textField";
textField.textAlignment = NSTextAlignmentCenter;
#prama mark 顶部距离textfield底部20 左右边距20 等宽、等高(40) 间距20的2个button
button1 =[UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:button1];
button2 =[UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:button2];
[button1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(textField.mas_bottom).with.offset(20);
make.left.equalTo(@20);
make.height.equalTo(@40);
make.width.equalTo(button2.mas_width);
make.right.equalTo(button2.mas_left).with.offset(-20);
}];
[button2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(button1.mas_top);
make.right.equalTo(@(-20));
make.height.equalTo(button1.mas_height);
}];
[button1 setTitle:@"button1" forState:UIControlStateNormal];
[button1 setBackgroundColor:[UIColor redColor]];
[button1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
button1.selected = NO;
[button1 addTarget:self action:@selector(changeSmall:) forControlEvents:UIControlEventTouchUpInside];
[button2 setTitle:@"button2" forState:UIControlStateNormal];
[button2 setBackgroundColor:[UIColor redColor]];
[button2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
#prama mark 顶部距离button底部20 相对于self.view X方向居中 宽300 高100的imageView
imageView =[UIImageView new];
imageView.backgroundColor = [UIColor redColor];
[self.view addSubview:imageView];
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(button1.mas_bottom).with.offset(20);
make.centerX.equalTo(self.view);
make.height.equalTo(@100);
make.width.equalTo(@300);
}];
再来看看PureLayout的用法
self.label = [[UILabel alloc] init];
self.label.backgroundColor = [UIColor redColor];
self.textField = [[UITextField alloc] init];
self.textField.backgroundColor = [UIColor redColor];
self.button1 = [UIButton buttonWithType:UIButtonTypeCustom];
self.button1.backgroundColor = [UIColor redColor];
self.button2 = [UIButton buttonWithType:UIButtonTypeCustom];
self.button2.backgroundColor = [UIColor redColor];
self.imageView = [[UIImageView alloc] init];
self.imageView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.label];
[self.view addSubview:self.textField];
[self.view addSubview:self.button1];
[self.view addSubview:self.button2];
[self.view addSubview:self.imageView];
[self.label autoPinEdge:ALEdgeLeft toEdge:ALEdgeLeft ofView:self.view withOffset:20.0f];
[self.label autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.view withOffset:-20.0f];
[self.label autoPinEdge:ALEdgeTop toEdge:ALEdgeTop ofView:self.view withOffset:20.0f];
[self.label autoSetDimension:ALDimensionHeight toSize:40.0f];
[self.textField autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.label withOffset:20.0f];
[self.textField autoPinEdge:ALEdgeLeft toEdge:ALEdgeLeft ofView:self.view withOffset:20.0f];
[self.textField autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.view withOffset:-20.0f];
[self.textField autoSetDimension:ALDimensionHeight toSize:40.0f];
[self.button1 autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.textField withOffset:20.0f];
[self.button1 autoPinEdge:ALEdgeLeft toEdge:ALEdgeLeft ofView:self.view withOffset:20.0f];
[self.button1 autoSetDimension:ALDimensionHeight toSize:40.0f];
[self.button1 autoMatchDimension:ALDimensionWidth toDimension:ALDimensionWidth ofView:self.button2];
[self.button2 autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.textField withOffset:20.0f];
[self.button2 autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.view withOffset:-20.0f];
[self.button2 autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.button1 withOffset:20.0f];
[self.button2 autoMatchDimension:ALDimensionHeight toDimension:ALDimensionHeight ofView:self.button1];
[self.imageView autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.button1 withOffset:20.0f];
[self.imageView autoSetDimension:ALDimensionWidth toSize:300.0f];
[self.imageView autoSetDimension:ALDimensionHeight toSize:100.0f];
[self.imageView autoAlignAxisToSuperviewAxis:ALAxisVertical];
效果图如下: