这个第三方还是比较好用的,当然你也可以使用XIB,但是在有些场景下,Masonry更为好用,比如说此时你创建的视图并不是全局属性,或者是所添加的视图是在某些情况下才会创建,也就是说这个视图是局部变量,而此时用XIB就很牵强了。所以,Masonry这时候就果断的站出来了,他可以直接进行局部变量的布局,而且布局思路和XIB的约束也是有些类似,但是他是纯代码哦,也比较好懂,用的是链式的简单语言。这里要注意的是 语句中的and 和 with 实际上时无意义的,只是便于我们去理解代码的意思。说了这么多,直接来代码给你们解释Zzzz
我也是慢慢的学习,所以这篇文章还会一直补充,希望不要断了。。。。
我就直接上代码了,不解释太多了,代码里面有很多注释,还是比较详细的。
这个代码是直接写在控制器的ViewDidLoad方法里面的
说下我遇到的大坑吧,就是在设置布局的时候,一定要进行添加,其实添加到哪个视图上影响的只是视图的层次关系,并不是他的布局,具体的布局还是要看 make.edges.equalTo(view1) 这句,这里是将布局的相对对象设置成view1了
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
#pragma mark ---- 一个视图在另一个视图上的布局 -----
UIView *view1 = [UIView new];
view1.backgroundColor = [UIColor redColor];
// 要有一个父视图
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
// 将图形设置居中(在self.view)中
make.center.equalTo(self.view);
// 设置尺寸
make.size.mas_equalTo(CGSizeMake(350, 350));
}];
//
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor cyanColor];
// 要有一个父视图,这个只是图层的关系,布局还是和make.edges.equalTo(view1) 对象有关
[view1 addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
// 这里的make 就相当于调用对象view2
// equalTo(对象), 这里指的是相对布局对象
// 注意这里是with 是一种链式的自然语言
// 上左下右
make.edges.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
// 可以看到 edges 其实就是top,left,bottom,right的一个简化 分开写也可以 一句话更省事
// 等价于
make.top.equalTo(view1).with.offset(10);
make.left.equalTo(view1).with.offset(10);
make.bottom.equalTo(view1).with.offset(-10);
make.right.equalTo(view1).with.offset(-10);
// 那么为什么bottom和right里的offset是负数呢? 因为这里计算的是绝对的数值 计算的bottom需要小于view1的底部高度 所以要-10 同理用于right
// 也等价于
//make.top.left.bottom.and.right.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
// - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
// - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
// - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
//mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
//mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
//mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
// 三种函数善加利用 就可以应对各种情况了
#pragma mark ---- 两个视图在另一个视图上的布局,自动调整适应 -----
UIView *view3 = [[UIView alloc] init];
UIView *view4 = [[UIView alloc] init];
view3.backgroundColor = [UIColor yellowColor];
view4.backgroundColor = [UIColor yellowColor];
// 要有一个父视图
[view1 addSubview:view3];
[view1 addSubview:view4];
// 设置距离的变量
int padding = 10;
// 先对view3布局
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
// 这里只是两个视图在同一条水平线上,所以不用center.X
make.centerY.mas_equalTo(view1.mas_centerY);
// 这里是相对布局,不需要设置距离底端和上端的距离,直接设置高度
// make.top.equalTo(self.view.mas_top).offset(padding);
// make.bottom.equalTo(self.view.mas_bottom).with.offset(- padding);
make.left.equalTo(view1.mas_left).with.offset(padding);
make.right.equalTo(view4.mas_left).with.offset(- padding);
// 设置高度的数值
// mas_equalTo 用来设置数值
// equalTo 是直接等于某个对象的数值
make.height.mas_equalTo(150);
// 设置和view4等宽
make.width.equalTo(view4);
}];
[view4 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(view1.mas_centerY);
make.left.equalTo(view3.mas_right).with.offset(padding);
make.right.equalTo(view1.mas_right).with.offset(- padding);
make.height.mas_equalTo(150);
make.width.equalTo(view3);
}];
贴张最后效果图,视图从最下到上一次是view1,view2,view3 +view4
A9CE0A9D-0339-4C83-8510-42FFE94AE962.pngOK 就到这里,我看明天有没有空继续补充吧,不定时补充~~~~
未完待续~~~~~~~~~
网友评论