iOS Masonry使用

GitHub ： https://github.com/Masonry/Masonry

一、Masonry简介

Masonry是一个轻量级的布局框架，它拥有自己的描述语法（采用更优雅的链式语法封装）来自动布局，具有很好可读性且同时支持iOS和Max OS X等。

二、Masonry的基本使用方法

    [控件 mas_makeConstraints:^(MASConstraintMaker *make) {
        //这个方法只会添加新的约束
    }];

    [控件 mas_remakeConstraints:^(MASConstraintMaker *make) {
        //这个方法会将以前的约束全部删除，添加新的约束
    }];

    [控件 mas_updateConstraints:^(MASConstraintMaker *make) {
        //这个方法将会覆盖以前的某些特定的约束
    }];

三、约束的基本属性

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

四、约束的特殊属性

//(top, left, bottom, right)

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

//(width, height)

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

//(centerX, centerY)

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

五、基本使用

1、Demo

UIView *blueView = [[UIView alloc]init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    //设置blueView的中心点的x等于self.view的中心点的x
    make.centerX.equalTo(self.view);
     //设置blueView的顶部等于self.view的顶部，同时偏移30
    make.top.equalTo(self.view).offset(30);
    //设置宽高都为90
    make.size.mas_equalTo(CGSizeMake(90, 90));
 }];

2、宽高100*100 居中显示

    [控件 mas_makeConstraints:^(MASConstraintMaker *make) {
        //在block中利用make对象创建新的约束
        //尺寸约束
        make.size.mas_equalTo(CGSizeMake(100, 100));
        //位置约束
        make.center.mas_equalTo(self.view);
        //相当于下面这两句
        //self.view.mas_centerX这句话可以直接写self.view
        make.centerX.mas_equalTo(self.view.mas_centerX);
        make.centerY.mas_equalTo(self.view.mas_centerY);
    }];

3、宽高100*100，粘着父控件右下角，间距都是20

第一种方法

    [控件 mas_makeConstraints:^(MASConstraintMaker *make) {
        //宽度（下面的两句相同的效果）
        make.width.equalTo(@100);
        make.width.mas_equalTo(100);
        //高度（下面的两句相同的效果）
        make.height.equalTo(@100);
        make.height.mas_equalTo(100);
        //右边
        make.right.equalTo(self.view.mas_right).offset(-20);
        //底部
        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
    }];

第二种方法

    [控件 mas_makeConstraints:^(MASConstraintMaker *make) {
        //宽度和高度(and with返回的都是self，为了增加可读性）
        //make.width.and.height.mas_equalTo(100);
        //make.width.and.height.equalTo(@100);
        //make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(100, 100)]);
        //make.size.mas_equalTo(CGSizeMake(100, 100));
        make.size.mas_equalTo(100);
        //右边
        make.right.equalTo(self.view.mas_right).offset(-20);
        //底部
        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
    }];

4、multipliedBy乘以等方法

    [控件 mas_makeConstraints:^(MASConstraintMaker *make) {
        //是父控件的一半
        make.size.mas_equalTo(self.view).multipliedBy(0.5);
        make.right.equalTo(self.view.mas_right).offset(-20);
        //底部
        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
    }];

5、各边间距相同

    //各边间距都是50
    [控件 mas_makeConstraints:^(MASConstraintMaker *make) {
        //第一种方法
        make.left.mas_equalTo(self.view.mas_left).offset(50);
        make.right.mas_equalTo(self.view.mas_right).offset(-50);
        make.top.mas_equalTo(self.view.mas_top).offset(50);
        make.bottom.mas_equalTo(self.view.mas_bottom).offset(-50);

        //第二种方法
        make.left.top.mas_equalTo(self.view).offset(50);
        make.right.bottom.mas_equalTo(self.view).offset(-50);

        //第三种方法
        make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
    }];

6、去掉mas_

//加入这个宏，可以省略所有 mas_ （除了mas_equalTo）
#define MAS_SHORTHAND

//加入这个宏，那么mas_equalTo就和equalTo一样的了
#define MAS_SHORTHAND_GLOBALS

//上面的两个宏一定要在这句之前
#import "Masonry.h"

    //这样写了之后，代码就变成这样了
    [控件 makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.left).offset(50);
        make.right.equalTo(self.view.right).offset(-50);
        make.top.equalTo(self.view.top).offset(50);
        make.bottom.equalTo(self.view.bottom).offset(-50);
    }];