Masonry的寫法總結

前言

---

對於Masonry的一些基本使用，相信有點基礎的iOS開發同窗確定或多或少都知道，本文旨在介紹具體設置約束屬性的各類姿式，適合用過Masonry的同窗閱讀。

舒適提示：Masonry老手能夠忽略本文。

經常使用宏定義

---

Masonry使用鏈式方式編程，有定義一些宏來方便開發，以下：

#define offset(...) mas_offset(__VA_ARGS__)
#define equalTo(...) mas_equalTo(__VA_ARGS__)
#define greaterThanOrEqualTo(...) mas_greaterThanOrEqualTo(__VA_ARGS__)
#define lessThanOrEqualTo(...) mas_lessThanOrEqualTo(__VA_ARGS__)
複製代碼

如：

// make.left 如下兩種寫法等價
make.left.equalTo(superView.mas_left).offset(10);
make.left.mas_equalTo(superView.mas_left).mas_offset(10);
複製代碼

約束屬性的關係

---

約束屬性有三種關係，分別是等於，大於，小於。

• 等於（equivalent to NSLayoutRelationEqual）

//.equalTo
// view.width = 60
make.width.mas_equalTo(60);
複製代碼

• 小於（equivalent to NSLayoutRelationLessThanOrEqual）

//.lessThanOrEqualTo
// view.width <= 120
make.width.lessThanOrEqualTo(120);
複製代碼

• 大於（equivalent to NSLayoutRelationGreaterThanOrEqual）

//.greaterThanOrEqualTo 
// view.width >= 60
make.width.lessThanOrEqualTo(60);
複製代碼

常見寫法

---

對於自動佈局咱們只須要設置好view的position，包括X軸和Y軸上的位置，以及view的長寬便可。

Masonry除了設置單個約束之外，還提供了不少方便的複合約束設置方式。如下分別介紹單個約束屬性設置方式和複合約束設置方式。

長度和寬度

// make width = 60
make.width.mas_equalTo(60);

// make height = 60
make.height.mas_equalTo(60);

// make height = 60, width = 60
make.size.equalTo(CGSizeMake(60, 60));

// make view1.height = view2.height view1.width = view2.width
make.size.mas_equalTo(view2)

// make width and height greater than or equal to view2
make.size.greaterThanOrEqualTo(view2)

// make width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))
複製代碼

邊距對齊（位置設置）

make.left.mas_equalTo(superView.mas_left).mas_offset(10);
make.left.mas_greaterThanOrEqualTo(10);
複製代碼

約束的鏈式寫法中，不包含其餘相對的view時，默認爲其superview view.left 等於 label.lefet，如下三種寫法等價：

make.left.mas_equalTo(100); 
make.left.mas_equalTo(view.superview.mas_left).offset(10);
make.left.mas_equalTo(view.superview).offset(10);
複製代碼

view.left 大於等於 label.lefet，如下兩種寫法等同：

make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);
複製代碼

上下左右四個邊緣等於父視圖的邊緣，也就是top, left, bottom, right equal view2，如下三種寫法等同（複合約束寫法）：

make.edges.equalTo(superview);
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(0, 0, 0, 0))
make.left.right.and.bottom.equalTo(superview);

PS：若是top, left, bottom, right的邊距各自不一樣：
// make top = superview.top + 5, left = superview.left + 10,
// bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

複製代碼

中心對齊（位置設置）

X軸上中心和superview的X軸上中心對齊。

make.centerX.equalTo(superview.mas_centerX).offet(0)
make.centerX.equalTo(superview.mas_centerX) 
make.centerX.equalTo(superview)

複製代碼

X軸和Y軸中心對齊

make.center.equalTo(superview)
make.center.equalTo(superview).centerOffset(CGPointMake(0, 0))


PS：若是X軸和Y軸上的中心對齊各自不一樣：
// make centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))
複製代碼

約束數字值

Masonry容許將寬度和高度設置爲常量值。若是要將視圖設置一個最小和最大寬度時，能夠在block中同時設定：

//width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(@200);
make.width.lessThanOrEqualTo(@400)
複製代碼

Masonry不容許把邊距屬性（left，top，right，bottom，centerX，centerY）的約束設置爲常量值，若是設置了，會默認這些屬性是相對父視圖設置的。

//creates view.left = view.superview.left + 10
make.left.equalTo(@10)

//creates view.left = view.superview.left + 10
make.left.lessThanOrEqualTo(@10)

// 或者使用mas_equalTo這種時：
make.top.mas_equalTo(42);
make.height.mas_equalTo(20);
make.size.mas_equalTo(CGSizeMake(50, 100));
make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));
make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));
複製代碼

優先級

自定義優先級

// .priority allows you to specify an exact priority  
make.top.equalTo(label.mas_left).with.priority(600);
複製代碼

高優先級

// .priorityHigh equivalent to **UILayoutPriorityDefaultHigh**  
make.left.equalTo(label.mas_left).with.priorityHigh();
複製代碼

中等優先級

// .priorityMedium is half way between high and low  
make.left.equalTo(label.mas_left).with.priorityMedium();
複製代碼

低優先級

// .priorityLow equivalent to **UILayoutPriorityDefaultLow**
make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
複製代碼

參考文章

Masonry