Masonry------轻量级的布局框架 Masonry------轻量级的布局框架

Masonry是什么？

Masonry是一个轻量级的布局框架，拥有自身的描述性语法，采用更加优雅的链式语法封装了自动布局autolayout，简洁明了，可读性高，并且同时支持iOS和Mac OSXMasonry
Masonry在GitHub

Masonry怎么用?
首先我们看一下官方的示例代码：

[view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(superview).with.insets(padding); }];

Masonry的一些属性与NSLayoutAttribute对照

MASViewAttribute	NSAutoLayout	说明
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	文本基线

举例:
1. 居中显示一个View：

UIView *view1 = [[UIView alloc] init]; view1.backgroundColor = [UIColor redColor]; //2.使用Masonry约束之前，一定要将view加到superView上，否则会报错 [self.view addSubview:view1]; //用masonry函数对你添加的view进行约束 [view1 mas_makeConstraints:^(MASConstraintMaker *make) { // 设置view1居中 make.center.equalTo(self.view); // 设置view2宽高 make.size.mas_equalTo(CGSizeMake(300, 300)); }]; /** *1.mas_makeConstraints 只负责添加新增约束，Autolayout中不能同时存在两条针对于同一对象的约束，否则会报错 *2.mas_makeConstraints 针对上面的情况，会更新在block中出现的约束，确保不会出现两个相同的约束 *3.mas_makeConstraints 会清除之前所有的约束，仅保留最新的约束 */ /** *mas_equal 除了支持NSNumber的数值类型外，就支持CGPoint CGSize UIEdgeInsets */

2.让一个view略小于其superView[边界15];

UIView *view2 = [[UIView alloc] init]; view2.backgroundColor = [UIColor cyanColor]; [self.view addSubview:view2]; [view2 mas_makeConstraints:^(MASConstraintMaker *make) { //1.第一种布局方法 make.top.equalTo(self.view).with.offset(15); make.left.equalTo(self.view).with.offset(15); make.bottom.equalTo(self.view).with.offset(-15); make.right.equalTo(self.view).with.offset(-15); //2.第二种 //make.top.left.bottom.and.right.equalTo(self.view).insets(UIEdgeInsetsMake(15, 15, 15, 15)); //3.第三种 //make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(15, 15, 15, 15)); }];

3.让两个高度为150 的veiw垂直居中并且等宽等间隔排列间隔(10) 宽度自动计算

UIView *view3 = [[UIView alloc] init]; view3.backgroundColor = [UIColor purpleColor]; [self.view addSubview:view3]; UIView *view4 = [[UIView alloc] init]; view4.backgroundColor = [UIColor yellowColor]; [self.view addSubview:view4]; [view3 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(self.view.mas_centerY); make.left.equalTo(self.view.mas_left).with.offset(10); make.right.equalTo(view4.mas_left).with.offset(-10); make.height.mas_equalTo(@150); make.width.equalTo(view4); }]; [view4 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(self.view.mas_centerY); make.left.equalTo(view3.mas_right).with.offset(10); make.right.equalTo(self.view.mas_right).with.offset(-10); make.height.equalTo(view3); make.width.equalTo(view3); }];

使用Masonry过程中可能出现的错误:
一.错误信息统计（width改为with）

reason: 'Attributes should be chained before defining the constraint relation'
崩溃到masonry内部的方法里面：

文章图片
崩溃的提示信息：

文章图片
直接上代码：（这是运行没有问题的代码）

[self.GradientLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.right.equalTo(self.CurrenPriceLabel.mas_right); make.left.equalTo(self.VariationLabel.mas_left).**with**.offset(30); **／／更改的是此处的width变为with，否则会报错** make.**width**.equalTo(@60); **／／此处的width不需要改动** make.height.mas_equalTo(@30); }];

注意：解决方法将width更改为with即可。并不是全部的width都要改变，注意看上面的代码部分。
二.错误信息统计（父子控件之间的关系没有建立好）

reason：couldn't find a common superview for

文章图片

文章图片
解决方法：查－－－好自己做约束的父子控件之间的关系是否建立起来了。

UITextField *nameTextField = [UITextField new]; nameTextField.font = [UIFont systemFontOfSize:14]; nameTextField.placeholder = @"请再次输入密码"; ***//父子控件的建立好关系：self.testView为父控件，nameTextField为子控件*** [self.testView **addSubview**:nameTextField]; ***//开始约束*** [lable mas_makeConstraints:^(MASConstraintMaker *make) { make.left.mas_equalTo(self.testView.mas_left).with.offset(20); make.top.mas_equalTo(self.testView.mas_top).with.mas_offset(0); make.height.mas_equalTo(30); make.width.mas_equalTo(50); }];

【Masonry------轻量级的布局框架】可能出现的错误章节摘于作者 Xcode8