iOS-使用代码约束布局（Masonry）

一、引子

学完了可视化编程的Xib和Storyboard，LZ对它们的感受就是的就是UI控件创建直接拖拽，尺寸适配加约束，Storyboard的页面跳转逻辑清晰可见，比起代码布局节省了很多的工作量。但是LZ相信还是很多人喜欢用纯代码来编写一个程序的（LZ就是一个，用代码写出来东西的成就感很足！），所以今天在这里给喜爱纯代码编程的程序猿们介绍一下纯代码约束布局的工具——Masonry。

二、Masonry介绍

Masonry源码下载地址：https://github.com/SoleMY/Masonry

Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X。

Masonry支持的属性：

///左侧

@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;

// 在Masonry的源码中我们可以看到他们对应的NSLayoutAttribute的属性对应如下

- (MASConstraint *)left {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeLeft];

}

- (MASConstraint *)top {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeTop];

}

- (MASConstraint *)right {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeRight];

}

- (MASConstraint *)bottom {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeBottom];

}

- (MASConstraint *)leading {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeLeading];

}

- (MASConstraint *)trailing {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeTrailing];

}

- (MASConstraint *)width {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeWidth];

}

- (MASConstraint *)height {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeHeight];

}

- (MASConstraint *)centerX {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterX];

}

- (MASConstraint *)centerY {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterY];

}

- (MASConstraint *)baseline {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeBaseline];

}

iOS8之后Masonry新出了几个属性：

///距离边框的距离，等同于选中Storyboard的Constrain to margins后加约束

@property (nonatomic, strong,readonly) MASConstraint *leftMargin;

@property (nonatomic, strong,readonly) MASConstraint *rightMargin;

@property (nonatomic, strong,readonly) MASConstraint *topMargin;

@property (nonatomic, strong,readonly) MASConstraint *bottomMargin;

@property (nonatomic, strong,readonly) MASConstraint *leadingMargin;

@property (nonatomic, strong,readonly) MASConstraint *trailingMargin;

@property (nonatomic, strong,readonly) MASConstraint *centerXWithinMargins;

@property (nonatomic, strong,readonly) MASConstraint *centerYWithinMargins;

- (MASConstraint *)leftMargin {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeLeftMargin];

}

- (MASConstraint *)rightMargin {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeRightMargin];

}

- (MASConstraint *)topMargin {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeTopMargin];

}

- (MASConstraint *)bottomMargin {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeBottomMargin];

}

- (MASConstraint *)leadingMargin {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeLeadingMargin];

}

- (MASConstraint *)trailingMargin {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeTrailingMargin];

}

- (MASConstraint *)centerXWithinMargins {

return[self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterXWithinMargins];

}

三、代码示例

#import"RootViewController.h"

// 引入头文件

#import"Masonry.h"

@interfaceRootViewController ()

@end

@implementationRootViewController

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view.

#pragmamark label

// 添加约束，不需要设置frame

UILabel *label = [UILabelnew];

label.backgroundColor = [UIColor redColor];

// 添加父视图，视图添加完成后才能进行布局

[self.view addSubview:label];

// 布局实现label方法

[label mas_makeConstraints:^(MASConstraintMaker *make) {

// 距离上边50

// make：相当于你要布局的视图

// equalTo（参照视图对象），如果参照视图是self.view,可以不设置参照视图的属性

// offset（距离数值）

make.top.equalTo(self.view).offset(50);

// 距离左边100

make.left.equalTo(self.view).offset(100);

// 距离右边100

make.right.equalTo(self.view).offset(-100);

// 距离下边500

make.bottom.equalTo(self.view).offset(-500);

}];

#pragmamark label1

UILabel *label1 = [UILabelnew];

label1.backgroundColor = [UIColor greenColor];

[self.view addSubview:label1];

// 布局实现label1方法

// 先布局参照视图，否则约束容易丢失

[label1 mas_makeConstraints:^(MASConstraintMaker *make) {

// equalTo（自定义视图），需要设置视图的属性

// 如果数值为0，可以不写offset（）

make.top.equalTo(label.mas_bottom).offset(50);

make.leading.equalTo(label.mas_leading);

make.trailing.equalTo(label.mas_trailing);

// 高度60

// mas_equalTo(数值)

make.height.mas_equalTo(60);

}];

#pragmamark label2

UILabel *label2 = [UILabelnew];

label2.backgroundColor = [UIColor grayColor];

[self.view addSubview:label2];

// 设置距离参照视图的内边距 （上左下右）

UIEdgeInsets padding = UIEdgeInsetsMake(400,100,100,100);

// 布局实现label2方法

// 先布局参照视图，否则约束容易丢失

[label2 mas_makeConstraints:^(MASConstraintMaker *make) {

// 设置约束视图的边界距离self.view的边界值

make.edges.equalTo(self.view).insets(padding);

//make.top.equalTo(self.view).offset(400);

//make.left.equalTo(self.view).offset(100);

//make.right.equalTo(self.view).offset(-100);

//

//make.bottom.equalTo(self.view).offset(-100);

}];

#pragmamark label3

UILabel *label3 = [UILabelnew];

label3.backgroundColor = [UIColor orangeColor];

[self.view addSubview:label3];

[label3 mas_makeConstraints:^(MASConstraintMaker *make) {

// 设置中心点一致

make.center.equalTo(label2);

// 设置大小

// make.width = label2.width - 40

// make.heigth = label2.height - 60

make.size.equalTo(label2).sizeOffset(CGSizeMake(-40, -60));

}];

}

@end

在这里只是给大家举几个简单的例子（效果图）：