iOS-使用代碼約束佈局（Masonry）

　　1、引子

　　學完了可視化編程的Xib和Storyboard，LZ對它們的感覺就是的就是UI控件建立直接拖拽，尺寸適配加約束，Storyboard的頁面跳轉邏輯清晰可見，比起代碼佈局節省了不少的工做量。可是LZ相信仍是不少人喜歡用純代碼來編寫一個程序的（LZ就是一個，用代碼寫出來東西的成就感很足！），因此今天在這裏給喜好純代碼編程的程序猿們介紹一下純代碼約束佈局的工具——Masonry。

　　2、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];
}

　　3、代碼示例

#import "RootViewController.h"
// 引入頭文件
#import "Masonry.h"
@interface RootViewController ()

@end

@implementation RootViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
#pragma mark label
    
    // 添加約束，不須要設置frame
    UILabel *label = [UILabel new];
    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);
        
    }];
#pragma mark label1
    UILabel *label1 = [UILabel new];
    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);
        
    }];
    
#pragma mark label2
    UILabel *label2 = [UILabel new];
    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);
        
    }];
#pragma mark label3
    UILabel *label3 = [UILabel new];
    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

　　在這裏只是給你們舉幾個簡單的例子（效果圖）：