前言
我作为一个即使用Frame、xib、Storyboard开发的一个开发，最后选择Masnary来布局，来说明一下原因：
Frame布局比较繁琐，要计算坐标，并且不好维护
xib、Storyboard开发布局可能速度比较快，但是添加的拘束很多，维护起来不好维护。并且团队之间维护一个storyboard会引发冲突，打不开Storyboard了，变成一段源码。
Manary布局速度比frame速度快,可能相较于storyboard速度慢一点。不过代码规范都是一样，团队人员流动的话，也不影响维护Manary。
使用Masnary注意事项
在开发中注意的事项，不熟悉Manary肯定要走不少坑，下面我说一下注意事项：
- 使用mas_makeConstraints方法的元素必须事先添加到父元素中.(刚开始开发的话一定要注意，不然那会引发崩溃的)
[self.view addSubview:label];
//使用label前要加到self.view中
[label mas_makeConstraints:^(MASConstraintMaker *make) {
}];
storyBoard中拉出来的控件，想要用Masonry的话要先把这个view的AutoLayout选项去掉，否则会造成约束冲突
使用Masonry的时候不用设置translatesAutoresizingMaskIntoConstraints属性为NO;
masequalTo 和 equalTo 区别：masequalTo 比equalTo多了类型转换操作。
注意到方法with和and,这连个方法其实没有做任何操作，方法只是返回对象本身，这个方法的作用是为了提高可读性make.left.and.right.equalTo(self.view)和make.left.right.equalTo(self.view);是完全一样的，但是明显的加了and方法的语句可读性更好点。
left、right 和leftMargin、rightMargin 是不一样的，带margin的他默认会有layoutMargin,值为8。(建议尽量少用leftMargin，rightMargin) 。
常用布局方法
布局常用的是哪个方法：
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- 负责新增约束，不能同时存在两条针对于同一对象的约束 否则会报错。
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- 更新在block中出现的约束，不会导致出现两个相同约束的情况
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
- 就会先把之前的所有约束清楚，在重新添加约束，仅保留最新的约束。
对数组里的每个view进行布局
/**
* distribute with fixed spacing
*
* @param axisType 横排还是竖排
* @param fixedSpacing 两个控件间隔
* @param leadSpacing 第一个控件与边缘的间隔
* @param tailSpacing 最后一个控件与边缘的间隔
*/
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
withFixedSpacing:(CGFloat)fixedSpacing
leadSpacing:(CGFloat)leadSpacing
tailSpacing:(CGFloat)tailSpacing;
下面通过代码来实现一下，到底是什么效果：
//通过for循环遍历添加view到数组中
NSMutableArray *viewArr = [[NSMutableArray alloc] init];
for (int i = 0; i < 3 ; i++) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];
[viewArr addObject:view];
}
//水平方向的
[viewArr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:20 tailSpacing:20];
//水平方向，不用设置宽度，这个方法会自动算
//数组里面所有的view都是高度60，距离top为60
[viewArr mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@60);
make.height.equalTo(@60);
}];
运行结果：
masnary_1.png
如果想让宽高的比例都是1比1，使用multipliedBy这个方法来实现。还有就是宽是自动算的，怎么获取宽来，所有不能在mas_distributeViewsAlongAxis 这个方法来设置。应该在每个view里面去设置宽高比。代码如下：
NSMutableArray *viewArr = [[NSMutableArray alloc] init];
for (int i = 0; i < 3 ; i++) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
//这个时候设置宽高比，这样的话，水平方向，
//width是通过布局计算的。height也随着width变化
make.height.equalTo(view.mas_width).multipliedBy(1);
}];
[viewArr addObject:view];
}
//水平方向的
[viewArr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:20 tailSpacing:20];
[viewArr mas_makeConstraints:^(MASConstraintMaker *make) {
//上面已经设置高度，不需要继续设置
//make.top.equalTo(@60);
//水平方向可以设置垂直居中
make.centerY.equalTo(self.view);
}];
执行代码结果：
masnary_2.png
//垂直方向
[viewArr mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:20 leadSpacing:60 tailSpacing:60];
[viewArr mas_makeConstraints:^(MASConstraintMaker *make) {
//垂直方向可以设置水平居中
make.centerX.equalTo(self.view);
make.width.equalTo(@60);
}];
masnary_3.png
/**
* distribute with fixed item size
*
* @param axisType 横排还是竖排(水平设置是宽，垂直设置是高)
* @param fixedItemLength 控件的宽或高
* @param leadSpacing 第一个控件与边缘的间隔
* @param tailSpacing 最后一个控件与边缘的间隔
*/
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
withFixedItemLength:(CGFloat)fixedItemLength
leadSpacing:(CGFloat)leadSpacing
tailSpacing:(CGFloat)tailSpacing;
这个效果和上面的区别就是直接，水平方向的话就设置了宽，各个控件之间的间距是等间距的，是通过设置fixedItemLength来得出的。代码如下：
//设置水平方向的,ItemLength设置的宽
[viewArr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:100 leadSpacing:30 tailSpacing:30];
[viewArr mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(self.view);
}];
执行结果如图：
masnary_4.png
结果是通过你设置的ItemLength来计算的间距，并且间距是等间距的。
常用的属性
@property (nonatomic, strong, readonly) MASConstraint *left;
@property (nonatomic, strong, readonly) MASConstraint *top;
@property (nonatomic, strong, readonly) MASConstraint *right;
@property (nonatomic, strong, readonly) MASConstraint *bottom;
@property (nonatomic, strong, readonly) MASConstraint *leading;
@property (nonatomic, strong, readonly) MASConstraint *trailing;
@property (nonatomic, strong, readonly) MASConstraint *width;
@property (nonatomic, strong, readonly) MASConstraint *height;
@property (nonatomic, strong, readonly) MASConstraint *centerX;
@property (nonatomic, strong, readonly) MASConstraint *centerY;
@property (nonatomic, strong, readonly) MASConstraint *baseline;
特殊讲解其他常用几个属性
比例属性 multipliedBy
1.可以设置宽高比，其他的一些比例。
//设置view的height是width的一半
make.height.equalTo(view.mas_width).multipliedBy(0.5);
通过代码来实践一下，
UIView *view1 = [UIView new];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@(60));
make.left.equalTo(@(40));
make.width.equalTo(@(100));
make.height.equalTo(@(100));
}];
UIView *view2 = [UIView new];
view2.backgroundColor = [UIColor blueColor];
[self.view addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
//设置view2的 上是view14倍 左宽高 都是 view1的2倍
make.top.equalTo(view1.mas_top).multipliedBy(4);
make.left.equalTo(view1.mas_left).multipliedBy(2);
make.width.equalTo(view1.mas_width).multipliedBy(2);
make.height.equalTo(view1.mas_width).multipliedBy(2);
}];
运行结果如图：
masnary_5.png
lessThanOrEqualTo
- mas_lessThanOrEqualTo 与 lessThanOrEqualTo约束效果一样，只不过mas_lessThanOrEqualTo多了类型转换操作(转换成NSNumber类型)
- 字面意思是少于或等于某个值
- 主要用于UILabel文本变化，不超过某个宽度或者高度
有个需求就是：当label宽度是可变的，但是不能超过某个值，在某个值得范围内，随着文本的变化可变。
UILabel *label = [UILabel new];
label.backgroundColor = [UIColor redColor];
[self.view addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@(120));
make.left.equalTo(@(60));
make.height.equalTo(@(30));
make.width.lessThanOrEqualTo(@(150));
}];
添加完约束以后,给label赋文本值:
label.text = @"hello";
执行结果如图:
masnary_6.png
如果文本长度再长一点:
label.text = @"hello world";
执行结果如图:
masnary_7.png
那就文本在长一点,在看看结果
label.text = @"hello world hello world";
直接结果如下图:
masnary_8.png
直接结果,当文本的宽度大于150的时候就是150,没有显示全.说明label宽度小于等于150.
具体实现如下代码:
UILabel *label = [UILabel new];
label.backgroundColor = [UIColor redColor];
//多行的话,要设置numberOfLines为0
label.numberOfLines = 0;
[self.view addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@(120));
make.left.equalTo(@(60));
//宽度设定了,
make.width.equalTo(@(200));
//高度不大于make.height.lessThanOrEqualTo(@(150));
}];
添加完约束,文本的高度是不是随着文本变化而变化.如下:
label.text = @"hello world hello world hello world";
执行结果如下:
masnary_9.png
文本输入在多一点,如下:
label.text = @"hello world hello world hello world
hello world hello world hello";
执行结果如图:
masnary_10.png
文本输入在多一点,超出高度限定的150,如下:
label.text = @"hello world hello world hello world
hello world hello world hello world
hello world hello world hello world
hello world hello world hello world
hello world hello world hello world";
执行结果如下图:
masnary_11.png
当文本的高度超出150的话,用...来省略.
greaterThanOrEqualTo
- mas_greaterThanOrEqualTo 与 greaterThanOrEqualTo约束效果一样，只不过mas_lessTha mas_greaterThanOrEqualTo nOrEqualTo多了类型转换操作(转换成NSNumber类型)
- 字面意思是大于或等于某个值
- 主要用于UILabel文本变化，大于等于某个宽度或者高度
这个greaterThanOrEqualTo和lessThanOrEqualTo正好先想法,要大于等于某个值,再次我不举例子,大家自己可以去实践实践.
结尾
Masnary的一些基础的方法我没怎么讲，我讲的都是一样特殊的方法，大家刚开始用可能没有想到的。用着比较方便的，还有更多的约束方法，期待大家自行就去研究。
