Masonry 使用复习总结
title: Masonry 使用复习总结
date: 2015-08-23 11:07:53
categories: IOS
tags: Masonry
小小程序猿
我的博客：http://daycoding.com
为了解决ios 原生写约束太痛苦这个问题
github：Masonry
安装
使用Pod组织安装masonry
platform :ios, '6.0'
pod 'Masonry'
注意
- 如果配合xib使用需要将“Use Auto Layout”和“Use Size Classes”这两个选项去掉，要不然控制台会报错
- 要先添加view，在添加约束
- 最好在约束中设置控件大小
经常用到的约束
设置控件宽高
UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
//要先添加view 之后才能添加约束
[red mas_makeConstraints:^(MASConstraintMaker *make) {
// make.size.mas_equalTo(CGSizeMake(100, 100));
//如果使用eqaulto时，设置数值前需要加@
//mas_equalTo则不用
make.height.equalTo(@100);
make.width.mas_equalTo(100);
}];
运行结果：
等同于其他控件宽高
```
UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
[red mas_makeConstraints:MASConstraintMaker *make {
// make.size.mas_equalTo(CGSizeMake(100, 100));
//如果使用eqaulto时，设置数值前需要加@
//mas_equalTo则不用
make.height.equalTo(@100);
make.width.mas_equalTo(100);
}];
UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {
// make.size.equalTo(red);
// 等价于
make.width.equalTo(red);
make.height.equalTo(red);
//这个用来设置距离红方块的距离
make.left.equalTo(red.mas_right).offset(10);
}];
```
结果：
设置边距margin
top和left的边距设置
UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
[red mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(@100);
make.width.mas_equalTo(100);
}];
UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(red);
make.height.equalTo(red);
make.left.equalTo(red.mas_right).offset(100);
make.top.equalTo(red.mas_bottom).offset(100);
}];
运行结果：
右方和下方的边距设置
```
UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:MASConstraintMaker *make {
make.height.equalTo(@100);
make.width.mas_equalTo(100);
make.right.equalTo(self.view.mas_right).offset(-50);
make.bottom.equalTo(self.view.mas_bottom).offset(-20);
}];
运行结果：
**注意：在设置边距的时候上、左边距的值是正数，右、下的边距值是负数**
### 设置左右对齐
UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
[red mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(@100);
make.width.mas_equalTo(200);
make.left.equalTo(self.view.mas_left).offset(30);
}];
UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(@100);
make.width.mas_equalTo(100);
//让蓝方块在红方块下方
make.top.equalTo(red.mas_bottom).offset(10);
//设置左对齐
make.left.equalTo(red.mas_left);
}];
运行结果：
 
###撑满剩余空间###
UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
[red mas_makeConstraints:MASConstraintMaker *make {
make.height.equalTo(@50);
make.width.mas_equalTo(50);
make.left.equalTo(self.view.mas_left).offset(10);
make.top.equalTo(self.view.mas_top).offset(20);
}];
UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(red);
make.centerY.equalTo(red.mas_centerY);
make.left.equalTo(red.mas_right).offset(10);
make.right.equalTo(self.view.mas_right).offset(-10);
}];
结果：
