前言
MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期； 在iphone1 ~ iphone3gs时代，window的size固定为(320, 480)， 我们只需要简单计算一下相对位置就好了。 在iphone4 ~ iphone4s时代，苹果推出了retina屏，但是给了码农们非常大的福利：window的size不变。 在iphone5 ~ iphone5s时代，window的size变了(320, 568) 这时autoresizingMask派上了用场，简单的适配一下即可。 此时没用autolayout是由于要适配iOS5。 在iphone6+时代，window的width也发生了变化(相对5和5s的屏幕比例没有变化)， 终于是时候抛弃autoresizingMask改用auto layout了，此时，不用支持iOS5了，相对于屏幕适配的多样性来说autoresizingMask也已经过时了)。 那如何快速的上手autolayout呢？在我刚接触iOS的时候，还在用系统的自动布局，但是系统自动布局过于繁琐，如下创建一个黑色视图，距离屏幕上方20像素，左、右以及下方距离屏幕各10个像素，代码如下： - (void)viewDidLoad { [super viewDidLoad]; UIView *view = [[UIView alloc] init]; // 系统自动布局必需将 translatesAutoresizingMaskIntoConstraints 属性置为 NO view.translatesAutoresizingMaskIntoConstraints = NO; view.backgroundColor = [UIColor blackColor]; [self.view addSubview:view]; // 添加约束 // 水平约束 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[view]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view)]]; // 垂直约束 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[view]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view)]]; } 后来查阅资料，意外中发现了Masonry三方布局框架，使得布局更加简单易用，这将是我分享Masonry三方布局的目的，望有幸与各位大神共同探讨。
介绍
Masonry是一个轻量级的布局框架，拥有自己的描述语法，采用优雅的链式语法封装自动布局，简洁明了，可读性高，而且同时支持iOS和Max OS X。 Masonry是一个用代码写iOS或OS界面的库，可以代替Auto layout。 Masonry布局，无需将属性translatesAutoresizingMaskIntoConstraints置为NO，因为Masonry已经帮我们执行了这一步。
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; /**< 中心点X */ @property (nonatomic, strong, readonly) MASConstraint *centerY; /**< 中心点Y */ @property (nonatomic, strong, readonly) MASConstraint *baseline; /**< 文本基线 */Masonry 安装
手动安装
github地址：https://github.com/SnapKit/Masonry 安装后导入头文件：#import "Masonry.h"
cocoapods安装 pod ‘Masonry’, ‘~> 0.6.2’ 安装后导入头文件：#import <Masonry.h>
Masonry 实用详解
mas_makeConstraints是给view添加约束，约束有几种，分别是边距，宽，高，左上右下距离，基准线。添加过约束后可以有修正，修正有offset（位移）修正和multipliedBy（倍率）修正。 语法一般是make.equalTo or make.greaterThanOrEqualTo or make.lessThanOrEqualTo + 倍数和位移修正。
Masonry 的基本使用
- (void)viewDidLoad { [super viewDidLoad]; // 使用 Masonry 布局，基本可以抛弃 CGRectMake 了，直接初始化即可。 UIView *view = [[UIView alloc] init]; view.backgroundColor = [UIColor darkGrayColor]; // 在做布局之前，一定要先将 view 添加到 superview 上，否则会报错。 [self.view addSubview:view]; // mas_makeConstraints 就是 Masonry 的 autolayout 添加函数，将所需的约束添加到block中就行。 [view mas_makeConstraints:^(MASConstraintMaker *make) { // 设置居中 make.center.equalTo(self.view); // 设置宽度为200 make.width.equalTo(@200); // 设置高度为200 make.height.mas_equalTo(200); }]; } Masonry 的注意项 1、使用mas_makeConstraints方法的元素必须事先添加到父元素的中，例如：[self.view addSubview:view]; 2、mas_equalTo和equalTo区别：mas_equalTo比equalTo多了类型转换操作，一般来说，大多数时候两个方法都是通用的，但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理，使用equalTo。特别是多个属性时，必须使用equalTo，例如：make.left.and.right.equalTo(self.view);。 3、注意方法with和and，这两个方法其实没有做任何操作，方法只是返回对象本身，这个方法的左右完全是为了方法写的时候的可读性 ，如下两行代码是完全一样的，但是明显加了and方法的语句可读 性更高点。 make.left.and.right.equalTo(self.view); make.left.right.equalTo(self.view);Masonry 使用 视图略小于其父视图 加载一个上边距为20，下、左、右边距为10的黑色视图。 代码展示：
- (void)viewDidLoad { [super viewDidLoad]; UIView *blackView = [[UIView alloc] init]; blackView = [UIColor blackColor]; [self.view addSubview:blackView]; [blackView mas_makeConstraints:^(MASConstraintMaker *make) { // 方法1： // make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(20, 10, 10, 10)); // 方法2： // make.top.left.bottom.and.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(20, 10, 10, 10)); // 方法3： // 设置其左侧和父视图偏移10个像素 make.left.equalTo(self.view).with.offset(10); // 设置其右侧和父视图偏移10个像素 make.right.equalTo(self.view).with.offset(-10); // 设置其顶部和父视图偏移20个像素 make.top.equalTo(self.view).with.offset(20); // 设置其尾部和父视图偏移10个像素 make.bottom.equalTo(self.view).with.offset(-10); }]; }现在屏幕上已经显示一个黑色视图、距离屏幕上方20个像素，左、右、下方各10个像素了。 视图居中
代码展示：
- (void)viewDidLoad { [super viewDidLoad]; // 黑色视图 UIView *blackView = [[UIView alloc] init]; blackView.backgroundColor = [UIColor blackColor]; [self.view addSubview:blackView]; [blackView mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(20, 10, 10, 10)); }]; // 棕色视图 UIView *brownView = [[UIView alloc] init]; brownView.backgroundColor = [UIColor brownColor]; [blackView addSubview:brownView]; [brownView mas_makeConstraints:^(MASConstraintMaker *make) { // 设置其中心点为父视图的中心点 make.center.mas_equalTo(blackView); // 设置其宽度为父视图的宽度 make.width.mas_equalTo(blackView); // 设置其高度为300 make.height.mas_equalTo(300); }]; } 效果展示：现在，一个宽度与黑色视图等宽，高度为300，并且在黑色视图正中间的棕色视图已经显示出来了。 并排布局 在棕色视图中并排显示红色视图、紫色视图，红色视图左侧距离父视图20像素，紫色视图右侧距离父视图20像素，紫色视图与红色视图等高，等宽。 代码展示：
- (void)viewDidLoad { [super viewDidLoad]; // 黑色视图 UIView *blackView = [[UIView alloc] init]; blackView.backgroundColor = [UIColor blackColor]; [self.view addSubview:blackView]; [blackView mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(20, 10, 10, 10)); }]; // 棕色视图 UIView *brownView = [[UIView alloc] init]; brownView.backgroundColor = [UIColor brownColor]; [blackView addSubview:brownView]; [brownView mas_makeConstraints:^(MASConstraintMaker *make) { // 设置其中心点为父视图的中心点 make.center.mas_equalTo(blackView); // 设置其宽度为父视图的宽度 make.width.mas_equalTo(blackView); // 设置其高度为300 make.height.mas_equalTo(300); }]; // 红色视图 UIView *redView = [[UIView alloc] init]; redView.backgroundColor = [UIColor redColor]; [brownView addSubview:redView]; // 紫色视图 UIView *purpleView = [[UIView alloc] init]; purpleView.backgroundColor = [UIColor purpleColor]; [brownView addSubview:purpleView]; // 布局红色视图、紫色视图 [redView mas_makeConstraints:^(MASConstraintMaker *make) { // 设置其位于父视图的Y轴的中心位置 make.centerY.mas_equalTo(brownView); // 设置其左侧与父视图偏移20像素 make.left.mas_equalTo(brownView).offset(20); // 设置其高度为260 make.height.mas_equalTo(260); // 设置其宽度与紫色视图等宽 make.width.mas_equalTo(purpleView); }]; [purpleView mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(brownView.mas_centerY); make.left.equalTo(redView.mas_right).with.offset(20); make.right.equalTo(brownView.mas_right).with.offset(-20); make.height.mas_equalTo(redView); make.width.equalTo(redView); }]; } 多个视图间隔相同 注意下面设置宽度的时候是传递的数组，这样才能让多个视图进行等距离显示。 代码展示： - (void)viewDidLoad { [super viewDidLoad]; // 初始化视图 UIView *view1 = [[UIView alloc] init]; view1.backgroundColor = [UIColor redColor]; [self.view addSubview:view1]; UIView *view2 = [[UIView alloc] init]; view2.backgroundColor = [UIColor yellowColor]; [self.view addSubview:view2]; UIView *view3 = [[UIView alloc] init]; view3.backgroundColor = [UIColor greenColor]; [self.view addSubview:view3]; // 布局视图 [view1 mas_makeConstraints:^(MASConstraintMaker *make) { // 设置中心点 make.centerY.mas_equalTo(self.view); // 设置左侧距离父视图10像素 make.left.equalTo(self.view).offset(10); // 设置右侧距离和view2的左侧相距10像素 make.right.equalTo(view2.mas_left).offset(-10); // 设置高度 make.height.mas_equalTo(200); // 设置宽度和view2以及view3相等 make.width.equalTo(@[view2, view3]); }]; [view2 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(self.view); make.height.mas_equalTo(view1); make.width.equalTo(@[view1, view3]); }]; [view3 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(self.view); make.left.equalTo(view2.mas_right).offset(10); make.right.equalTo(self.view).offset(-10); make.height.mas_equalTo(view1); make.width.equalTo(@[view1, view2]); }]; }
转载参考
http://blog.csdn.net/hierarch_lee/article/details/48295459
