以前使用過(guò)masonry做頁(yè)面布局，長(zhǎng)時(shí)間不用锨咙，有些使用方法就有些遺忘了，所以今天就簡(jiǎn)單的復(fù)習(xí)一下

Masonry 源碼：https://github.com/SnapKit/Masonry

一追逮、masonry的屬性和系統(tǒng)屬性對(duì)應(yīng)關(guān)系

二酪刀、基本使用

1.添加約束

mas_makeConstraints: 只負(fù)責(zé)添加約束 使用元素必須已經(jīng)添加到父視圖上
mas_updateConstraints: 更新在block中出現(xiàn)的約束 不會(huì)導(dǎo)致出現(xiàn)兩個(gè)相同約束的情況
mas_remakeConstraints: 清除之前所有的約束只保留新的約束

下面是常用的使用方法

//分別設(shè)置各個(gè)相對(duì)邊距（superview為view的父類視圖，下同）
make.left.mas_equalTo(superView.mas_left).mas_offset(10);
make.right.mas_equalTo(superView.mas_right).mas_offset(-10);
make.top.mas_equalTo(superView.mas_top).mas_offset(10);
make.bottom.mas_equalTo(superView.mas_bottom).offset(-10);

//直接使用left大于等于每個(gè)值
make.left.mas_greaterThanOrEqualTo(10);

//設(shè)置寬和高
make.width.mas_equalTo(60);
make.height.mas_equalTo(60);

//.設(shè)置center和寬高比
make.center.mas_equalTo(superView);
make.width.mas_equalTo(superView).multipliedBy(1.00/3);
make.height.mas_equalTo(superView).multipliedBy(0.25);

//.關(guān)于約束優(yōu)先級(jí),此處要注意約束沖突的問題钮孵，統(tǒng)一約束優(yōu)先級(jí)大的生效
make.left.mas_equalTo(100);
make.left.mas_equalTo(view.superview.mas_left).offset(10);
make.left.mas_equalTo(20).priority(700);
make.left.mas_equalTo(40).priorityHigh();
make.left.mas_equalTo(60).priorityMedium();
make.left.mas_equalTo(80).priorityLow();

//.如果你想讓view的（x坐標(biāo)）左邊大于等于label的左邊骂倘，以下兩個(gè)約束的寫法效果一樣
 make.left.greaterThanOrEqualTo(label);
 make.left.greaterThanOrEqualTo(label.mas_left);

• 上左為正，下右為負(fù): 是因?yàn)樽鴺?biāo)而來(lái)的 視圖坐標(biāo)左上為原點(diǎn) X向右為正 Y向下為正
• priorityLow()：設(shè)置約束優(yōu)先級(jí)（0-1000）
  注：默認(rèn)通過(guò)mas_make添加的約束不設(shè)置優(yōu)先級(jí)時(shí)巴席，默認(rèn)都是最高（1000）
• #define MAS_SHORTHAND_GLOBALS：使用全局宏定義(需要放在.pch文件中)历涝，可以使equalTo- 等效于mas_equalTo(要在#import masonry.h 之前)
• #define MAS_SHORTHAND：使用全局宏定義(需要放在.pch文件中), 可以在調(diào)用masonry方法的時(shí)候不使用mas_前綴(要在#import masonry.h 之前)

2.mas_equalTo和equalTo區(qū)別

#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
#define equalTo(...) mas_equalTo(__VA_ARGS__)

前者比后者多了類型轉(zhuǎn)換操作，支持CGSize CGPoint NSNumber UIEdgeinsets漾唉。
mas_equalTo是equalTo的封裝荧库，equalTo適用于基本數(shù)據(jù)類型，而mas_equalTo適用于類似UIEdgeInsetsMake 等復(fù)雜類型赵刑，基本上它可以替換equalTo分衫。

make.left.equalTo(@10) 需要使用字面量
make.left.mas_equalTo(10) 不需要使用字面量

3.同時(shí)創(chuàng)建多個(gè)約束

Masonry提供了一些便利的方法供我們同時(shí)創(chuàng)建多個(gè)不同的約束，他們被稱為MASCompositeConstraints般此，如：

edges

// 使一個(gè)view的top, left, bottom, right 等于view2的
make.edges.equalTo(view2)蚪战；

//相對(duì)于superviewde上左下右邊距分別為5牵现，10，15邀桑，20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size

// 使得寬度和高度大于等于 titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

// 相對(duì)于superview寬度大100瞎疼，高度小50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

center

//中心與button1對(duì)齊
make.center.equalTo(button1)

//水平方向中心相對(duì)向左偏移5，豎直方向中心向下偏移10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

你可以在約束鏈里添加相應(yīng)的view來(lái)增加代碼的可讀性:
// 除了top概漱，所有的邊界與superview對(duì)齊
make.left.right.and.bottom.equalTo(superview);

make.top.equalTo(otherView);

4.mas_topLayoutGuide 和 mas_bottomLayoutGuide

// self是一個(gè)控制器
// 兩種效果不同
make.top.equalTo(self.view);// 這樣寫效果是 topView 與 狀態(tài)欄的y值相等
make.top.equalTo(self.mas_topLayoutGuide);

// 此時(shí)兩種效果相同
make.bottom.equalTo(self.mas_bottomLayoutGuide);
make.bottom.equalTo(self.view);

5.requiresConstraintBasedLayout

如果你把一個(gè)View的所有的約束建立在updateconstraints丑慎，
你可能永遠(yuǎn)不會(huì)得到updateconstraints的約束。
若要解決此問題瓤摧，請(qǐng)重寫requiresConstraintBasedLayout返回YES竿裂，
如果視圖窗口需要使用基于約束的布局

+ (BOOL)requiresConstraintBasedLayout
{
    return YES;
}

6. multipliedBy和dividedBy

multipliedBy屬性：表示約束值為約束對(duì)象的乘因數(shù)
dividedBy屬性：表示約束值為約束對(duì)象的除因數(shù)

可用于設(shè)置view的寬高比
使用multipliedBy必須是對(duì)同一個(gè)控件本身

[self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
 // 寬高比1.0/3.0     
    make.width.equalTo(self.topInnerView.mas_height).multipliedBy(3);
// 寬高比3.0/1.0       
    make.width.equalTo(self.topInnerView.mas_height).dividedBy(3);
    make.width.and.height.lessThanOrEqualTo(self.topView);
    make.width.and.height.equalTo(self.topView).with.priorityLow();
    make.center.equalTo(self.topView);
}];

7. 動(dòng)態(tài)修改視圖約束:

// 創(chuàng)建視圖約束
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
      //self.animatableConstraint = make.edges.equalTo(superview).insets(paddingInsets).priorityLow();
      self.animatableConstraint = make.edges.equalTo(superview).insets(paddingInsets);
]];

// 更改約束 （另一處方法中）
UIEdgeInsets paddingInsets = UIEdgeInsetsMake(padding, padding, padding, padding);
self.animatableConstraint.insets = paddingInsets；
[UIView animateWithDuration:1.0 animations:^{
       [self.view layoutIfNeeded];
}];

8. debug模式：

// 對(duì)某個(gè)view添加key值
greenView.mas_key = @"greenView";
// 或者如下順序
MASAttachKeys(greenView, redView, blueView, superview);
// 同樣的對(duì)每條約束亦可以添加key
make.height.greaterThanOrEqualTo(@5000).key(@"ConstantConstraint");

eg:
便于定位具體哪個(gè)約束

    [greenBtn mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(paddingInsets);
        make.width.equalTo(@200).key(@"greenBtn__ConstantConstraint");
    }];

打诱彰帧：

9. preferredMaxLayoutWidth: 多行l(wèi)abel的約束問題

// 已經(jīng)確認(rèn)好了位置
// 在layoutSubviews中確認(rèn)label的preferredMaxLayoutWidth值
-(void)layoutSubviews {
    [super layoutSubviews];
    // 你必須在 [super layoutSubviews] 調(diào)用之后腻异，longLabel的frame有值之后設(shè)置preferredMaxLayoutWidth
    self.longLabel.preferredMaxLayoutWidth = self.frame.size.width-100;
    // 設(shè)置preferredLayoutWidth后，需要重新布局
    [super layoutSubviews];
}

10. scrollView使用約束的問題：

原理是通過(guò)一個(gè)contentView來(lái)約束scrollView的contentSize大小这揣，也就是說(shuō)以子控件的約束條件悔常，來(lái)控制父視圖的大小

// 1\. 控制scrollView大小（顯示區(qū)域）
[self.scrollView makeConstraints:^(MASConstraintMaker *make) {
     make.edges.equalTo(self.view);
}];
// 2\. 添加一個(gè)contentView到scrollView给赞，并且添加好約束條件
[contentView makeConstraints:^(MASConstraintMaker *make) {
     make.edges.equalTo(self.scrollView);
     // 注意到此處的寬度約束條件机打，這個(gè)寬度的約束條件是比添加項(xiàng)
     make.width.equalTo(self.scrollView);
}];
// 3\. 對(duì)contentView的子控件做好約束，達(dá)到可以控制contentView的大小

11. 2個(gè)或2個(gè)以上的控件等間隔排序

注釋：

/**
 *  多個(gè)控件固定間隔的等間隔排列片迅，變化的是控件的長(zhǎng)度或者寬度值
 *
 *  @param axisType        軸線方向
 *  @param fixedSpacing    間隔大小
 *  @param leadSpacing     頭部間隔
 *  @param tailSpacing     尾部間隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType 
                    withFixedSpacing:(CGFloat)fixedSpacing l
                          eadSpacing:(CGFloat)leadSpacing 
                         tailSpacing:(CGFloat)tailSpacing;

/**
 *  多個(gè)固定大小的控件的等間隔排列,變化的是間隔的空隙
 *
 *  @param axisType        軸線方向
 *  @param fixedItemLength 每個(gè)控件的固定長(zhǎng)度或者寬度值
 *  @param leadSpacing     頭部間隔
 *  @param tailSpacing     尾部間隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType 
                 withFixedItemLength:(CGFloat)fixedItemLength 
                         leadSpacing:(CGFloat)leadSpacing 
                         tailSpacing:(CGFloat)tailSpacing;

eg: masonry官方Demo

//  創(chuàng)建水平排列圖標(biāo) 
//  arr: 中放置了2個(gè)或連個(gè)以上的初始化后的控件
//  type: 0~3残邀，四種舉例
    switch (type) {
        case 0:
            [arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
            [arr makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(@60);
                make.height.equalTo(@60);
            }];
            break;
        case 1:
            [arr mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
            [arr makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(@0);
                make.width.equalTo(@60);
            }];
            break;
        case 2:
            [arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:30 leadSpacing:200 tailSpacing:30];
            [arr makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(@60);
                make.height.equalTo(@60);
            }];
            break;
        case 3:
            [arr mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength:30 leadSpacing:30 tailSpacing:200];
            [arr makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(@0);
                make.width.equalTo(@60);
            }];
            break;

        default:
            break;

    }

12.如果想要約束變換之后實(shí)現(xiàn)動(dòng)畫效果，則需要執(zhí)行如下操作

// 通知需要更新約束柑蛇，但是不立即執(zhí)行
[self setNeedsUpdateConstraints];
// 立即更新約束芥挣，以執(zhí)行動(dòng)態(tài)變換
// update constraints now so we can animate the change
[self updateConstraintsIfNeeded];
// 執(zhí)行動(dòng)畫效果, 設(shè)置動(dòng)畫時(shí)間
[UIView animateWithDuration:0.4 animations:^{
   [self layoutIfNeeded];
}];

參考：

Masonry使用歸納總結(jié)