【iOS】Masonry学习

前言

Masonry是一个轻量级的布局框架。通过链式调用的方式来描述布局，是排版代码更加简洁易读。masonry支持iOS和Mac OS X。相比原生的NSLayoutConstraint，提高了使用容易度和代码的可阅读程度。Masonry使用了链式语法，

NSLayoutConstraint

使用原生的NSLayoutConstraint进行布局时，十分冗杂麻烦，这里给出一个例子进行演示。

- (void)viewDidLoad {[super viewDidLoad];self.view.backgroundColor = [UIColor whiteColor];UIView* iview = [[UIView alloc] init];iview.backgroundColor = [UIColor redColor];iview.translatesAutoresizingMaskIntoConstraints = NO;[self.view addSubview:iview];[self.view addConstraints:@[[NSLayoutConstraint constraintWithItem:iview attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:0.5 constant:40],[NSLayoutConstraint constraintWithItem:iview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:40],[NSLayoutConstraint constraintWithItem:iview attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-40],[NSLayoutConstraint constraintWithItem:iview attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-40],]];}

在这个例子中使用了+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c这个方法，下面讲解一下这个方法的使用。

+ (instancetype)constraintWithItem:(id)view1 //指定了第一个视图,也就是要应用约束的视图。
attribute:(NSLayoutAttribute)attr1 //指定了要应用于第一个视图的属性,比如 NSLayoutAttributeLeft、NSLayoutAttributeTop 等。
relatedBy:(NSLayoutRelation)relation //指定了约束的关系,可以是 NSLayoutRelationEqual、NSLayoutRelationGreatherThanOrEqual 或 NSLayoutRelationLessThanOrEqual。
toItem:(nullable id)view2 //指定了第二个视图,也就是第一个视图要相对于哪个视图进行约束。如果为 nil，则表示约束是相对于父视图进行的。
attribute:(NSLayoutAttribute)attr2 //指定了第二个视图的属性,用于与第一个视图的属性进行约束。
multiplier:(CGFloat)multiplier //指定了第一个视图的属性和第二个视图的属性之间的乘数关系。例如,如果设置为 2.0，则表示第一个视图的属性是第二个视图的属性的 2 倍。（不太理解这个的意思）
constant:(CGFloat)c//指定了常量偏移量,用于调整约束的位置或大小

由上面这个例子可以看出，在使用传统的api约束时十分麻烦，故而学习使用Masorny进行约束，简化步骤。

Masonry学习

下面先给出一个对照的表格，后期可以使用进行参考。

MASViewAttribute	NSLayoutAttribute
view.mas_left	NSLayoutAttributeLeft
view.mas_right	NSLayoutAttributeRight
view.mas_top	NSLayoutAttributeTop
view.mas_bottom	NSLayoutAttributeBottom
view.mas_leading	NSLayoutAttributeLeading
view.mas_trailing	NSLayoutAttributeTrailing
view.mas_width	NSLayoutAttributeWidth
view.mas_height	NSLayoutAttributeHeight
view.mas_centerX	NSLayoutAttributeCenterX
view.mas_centerY	NSLayoutAttributeCenterY
view.mas_baseline	NSLayoutAttributeBaseLine

使用MASConstraintMaker实现和上面例子一样的约束：

    _view1 = [[UIView alloc] init];_view1.backgroundColor = [UIColor greenColor];[self.view addSubview:_view1];[_view1 mas_makeConstraints:^(MASConstraintMaker *make) {            make.left.mas_equalTo(40);make.top.mas_equalTo(40);make.bottom.mas_equalTo(-40);make.right.mas_equalTo(-40);}];

不难看出，代码量减少了很多，masonry会自动添加约束到合适的视图，也会为你调用view1.translatesAutoresizingMaskIntoConstraints = NO。

mas_equalTo和equalTo

首先可以确定的是这两者是等价的，其中mas_equalTo支持的类型，除了NSNumber支持的那些数值类型之外 就只支持CGPoint、CGSize、UIEdgeInsets，而equalTo支持的类型为id。

make.right.mas_equalTo(-40)
make.right.equalTo(@-40);

实际使用中两者的效果是相同的。可以参考这篇博客Mansory之一 ：mas_equalTo和equalTo区别与使用。

Masonry的优先级

priority：允许你指定一个确切的优先级。
priorityHigh：同UILayoutPriorityDefaultHigh。
priorityMedium：介于高和低之间的优先级。
priorityLow：同UILayoutPriorityDefaultLow。
优先级可以追加到约束链的末尾，下面给出一个例子：

make.bottom.mas_equalTo(-40).with.priorityHigh();
make.right.mas_equalTo(-40).with.priorityLow();

Masorny的其他写法

[_view1 mas_makeConstraints:^(MASConstraintMaker *make) {  make.left.mas_equalTo(self.view).mas_offset(40);make.top.mas_equalTo(self.view).mas_offset(40);make.bottom.mas_equalTo(self.view).mas_offset(-40);make.right.mas_equalTo(self.view).mas_offset(-40);}];

在这种写法中，先指定了相对于约束的视图，而后对现在的视图进行约束。在使用前文中使用的写法时，要注意先对视图添加到父视图中，系统会自动对父视图进行约束视图，否则会出现报错，由于没有父视图。

Masonry的使用练习

这里举出了一个由父视图位置移动而影响子视图的例子，通过点击按钮更新view1的位置，从而由他对按钮的约束来影响按钮的位置。

-(void) press {if(_btn.selected == NO) {[_view1 mas_updateConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(self.view).mas_offset(40);make.top.mas_equalTo(self.view).mas_offset(100);make.bottom.mas_equalTo(self.view).mas_offset(-40);make.right.mas_equalTo(self.view).mas_offset(-40);}];_btn.selected = YES;} else {[_view1 mas_updateConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(self.view).mas_offset(40);make.top.mas_equalTo(self.view).mas_offset(40);make.bottom.mas_equalTo(self.view).mas_offset(-40);make.right.mas_equalTo(self.view).mas_offset(-40);}];_btn.selected = NO;}
}

这里对Masonry进行更新约束，可以看看这两篇博客Masonry学习之更新约束、【iOS】Masonry如何动态更新约束的优先级（priority）这里我还没有完全理解，后期理解了再进行补充。

参考博客：
Masonry使用指南