一、導(dǎo)入 Masonry 框架

1. 使用 Cocoapods 來(lái)導(dǎo)入框架，在使用到該框架的文件中添加主頭文件: import <Masonry/Masonry.h>，可以參考這篇文章來(lái)配置使用 Cocoapods : Cocoapods的安裝和使用
2. 使用直接拖拽的方式拉入框架文件夾，在使用到該框架的文件中添加主頭文件：#import "Masonry.h"
   。

二、Masonry 約束添加步驟

1. 自定義 UIview。
2. 將自定義的 UIview 添加到父視圖上。
3. 添加約束。

三、Masonry的使用

• 重點(diǎn)

1. mas_equalTo和equalTo區(qū)別：前者比后者多了類(lèi)型轉(zhuǎn)換操作，支持CGSize CGPoint NSNumber UIEdgeinsets。mas_equalTo是equalTo的封裝，equalTo適用于基本數(shù)據(jù)類(lèi)型，而mas_equaalTo適用于類(lèi)似UIEdgeInsetsMake等復(fù)雜類(lèi)型，基本上它可以替換equalTo。
2. 上左為正，下右為負(fù)，其原理由坐標(biāo)而來(lái)。以視圖坐標(biāo)左上為原點(diǎn)，X向右為正，Y向下為正，反則為負(fù)。

• 基本使用1.

UIView *SView = [UIView new];
SView.backgroundColor = [UIColor cyanColor];
// 在做自動(dòng)布局之前,一定要先將view添加到superview上.
[self.view addSubview:SView];
// 將所需的約束添加到block中.
[SView mas_makeConstraints:^(MASConstraintMaker *make) {
    // 將 sv 居中于 self.view.
    make.center.equalTo(self.view);
    // 將 sv 的 size 設(shè)置成(300,300).
    make.size.mas_equalTo(CGSizeMake(200,200));
}];

/// 我們現(xiàn)在創(chuàng)建一個(gè) view(v) 略小于其 superView(SView), 邊距為10px.
UIView *v = [UIView new];
v.backgroundColor = [UIColor orangeColor];
[SView addSubview:v];
[v mas_makeConstraints:^(MASConstraintMaker *make) {
    
    /// 以下寫(xiě)法都是等價(jià)的.
    
    // 寫(xiě)法1. (加 with 只是增加代碼的可讀性,不加也無(wú)影響).
    make.edges.equalTo(SView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    
    // 寫(xiě)法2. (同理,加 and 只是增加代碼的可讀性).
    // make.top.left.bottom.and.right.equalTo(SView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    
    // 寫(xiě)法3.
    /*
     make.center.equalTo(self);
     make.edges.mas_offset(UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f));
     */
    
    // 寫(xiě)法4.
    /*
     make.top.equalTo(SView).with.offset(10);
     make.left.equalTo(SView).with.offset(10);
     make.bottom.equalTo(SView).with.offset(-10);
     make.right.equalTo(SView).with.offset(-10);
     */
    
}];
//    - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//    - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//    - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
/*
 mas_makeConstraints 只負(fù)責(zé)新增約束 Autolayout不能同時(shí)存在兩條針對(duì)于同一對(duì)象的約束 否則會(huì)報(bào)錯(cuò)
 mas_updateConstraints 針對(duì)上面的情況 會(huì)更新在block中出現(xiàn)的約束 不會(huì)導(dǎo)致出現(xiàn)兩個(gè)相同約束的情況
 mas_remakeConstraints 則會(huì)清除之前的所有約束 僅保留最新的約束
 三種函數(shù)善加利用 就可以應(yīng)對(duì)各種情況了
 */

效果展示.

基本使用1.png

• 基本使用2.

UIView * thirdCellView = [[UIView alloc] init];
thirdCellView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:thirdCellView];

UIView *line = [[UIView alloc] init];
line.backgroundColor = [UIColor grayColor];

UIView *line2 = [[UIView alloc] init];
line2.backgroundColor = [UIColor grayColor];

UIButton *firstButton = [UIButton buttonWithType:UIButtonTypeCustom];
[firstButton setImage:[UIImage imageNamed:@"星星"] forState:UIControlStateNormal];
[firstButton setTitle:@" first" forState:UIControlStateNormal];
[firstButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[firstButton.titleLabel setFont:[UIFont systemFontOfSize:13]];
[thirdCellView addSubview:firstButton];
[thirdCellView addSubview:line];

UIButton *secondButton = [UIButton buttonWithType:UIButtonTypeCustom];
[secondButton setImage:[UIImage imageNamed:@"星星"] forState:UIControlStateNormal];
[secondButton setTitle:@" second" forState:UIControlStateNormal];
[secondButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[secondButton.titleLabel setFont:[UIFont systemFontOfSize:13]];
[thirdCellView addSubview:secondButton];
[thirdCellView addSubview:line2];

UIButton *thirdButton = [UIButton buttonWithType:UIButtonTypeCustom];
[thirdButton setImage:[UIImage imageNamed:@"星星"] forState:UIControlStateNormal];
[thirdButton setTitle:@" third" forState:UIControlStateNormal];
[thirdButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[thirdButton.titleLabel setFont:[UIFont systemFontOfSize:13]];
[thirdCellView addSubview:thirdButton];

[thirdCellView mas_makeConstraints:^(MASConstraintMaker *make) {
    //居中于 self.view
    make.center.equalTo(self.view);
    //將size設(shè)置成(屏幕寬,60)
    make.size.mas_equalTo(CGSizeMake(self.view.bounds.size.width, 60));
}];

[firstButton mas_makeConstraints:^(MASConstraintMaker *make) {
    // firstButton 的頂部位置等于 thirdCellView 的頂部位置.
    make.top.equalTo(thirdCellView);
    // firstButton 居中于 thirdCellView 的中間Y（通俗點(diǎn)理解是 firstButton 的高度的中間位置等于 thirdCellView 的高度的中間位置）.
    make.centerY.equalTo(thirdCellView);
    // firstButton 的寬度是 thirdCellView 寬度的0.3倍.（3分之1）
    make.width.equalTo(thirdCellView).multipliedBy(0.333f);
}];
[line mas_makeConstraints:^(MASConstraintMaker *make) {
    // line 的左邊位置等于 firstButton 的右邊位置，并設(shè)置距離-0.5px（也就是 line 的左邊 距離 firstButton 的右邊 0.5px）.
    make.left.equalTo(firstButton.mas_right).offset(-0.5f);
    // line 的頂部位置等于 thirdCellView 的頂部位置，并設(shè)置距離12px.
    make.top.equalTo(thirdCellView).offset(12);
    // line 的底部位置等于 thirdCellView 的底部位置，并設(shè)置距離-12px（也就是 line 的底部 距離 thirdCellView 的底部 12px）.
    make.bottom.equalTo(thirdCellView).offset(-12);
    // lind 的寬度為0.5px.
    make.width.mas_equalTo(0.5f);
}];
[secondButton mas_makeConstraints:^(MASConstraintMaker *make) {
    // secondButton 的左邊位置等于 firstButton 的右邊位置.
    make.left.equalTo(firstButton.mas_right);
    // secondButton 的頂部位置等于 thirdCellView 的頂部位置.
    make.top.equalTo(thirdCellView);
    // secondButton 的中間 Y 等于 thirdCellView 的.
    make.centerY.equalTo(thirdCellView);
    // secondButton 的寬度等于 firstButton 的.
    make.width.mas_equalTo(firstButton);
}];
[line2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(secondButton.mas_right).offset(-0.5f);
    make.top.equalTo(thirdCellView).offset(12);
    make.bottom.equalTo(thirdCellView).offset(-12);
    make.width.mas_equalTo(0.5f);
}];
[thirdButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(secondButton.mas_right);
    make.top.equalTo(thirdCellView);
    make.centerY.equalTo(thirdCellView);
    make.width.mas_equalTo(firstButton);
}];

效果展示.

基本使用2.png