Masonry使用指南

原文地址：mp.weixin.qq.com/s?__biz=Mzg…

Masonry是一個輕量級的佈局框架。經過鏈式調用的方式來描述佈局，是排版代碼更加簡潔易讀。masonry支持iOS和Mac OS X。

爲何不使用NSLayoutConstraints呢?

在底層，自動佈局是一種強大且靈活的佈局試圖的方式。可是，經過代碼建立約束是冗長，且不具備描述性。看下面的例子：

由這個簡單的例子能夠看出，使用NSLayoutConstraints會使代碼冗餘且不易讀。另外一個選擇是使用VFL，它一點兒不冗餘，然而ASCII類型語法有其自身的缺陷，而且也難以刻畫，如：NSLayoutConstraint constraintsWithVisualFormat:返回一個數組。

準備認識一下Maker吧！

使用MASConstraintMaker實現和上面例子同樣的約束：

或者更短：

masonry會自動添加約束到合適的視圖，也會爲你調用view1.translatesAutoresizingMaskIntoConstraints = NO。

開始Masonry學習吧！

• equalTo：同NSLayoutRelationEqual
• lessThanOrEqualTo：同NSLayoutRelationLessThanOrEqual
• greaterThanOrEqualTo：NSLayoutRelationGreaterThanOrEqual

這三個約束等式接受一個參數，能夠是下面的任一個：

一、MASViewAttribute

MASViewAttribute	NSLayoutAttribute
view.mas_left	NSLayoutAttributeLeft
view.mas_right	NSLayoutAttributeRight
view.mas_top	NSLayoutAttributeTop
view.mas_bottom	NSLayoutAttributeBottom
view.mas_leading	NSLayoutAttributeLeading
view.mas_trailing	NSLayoutAttributeTrailing
view.mas_width	NSLayoutAttributeWidth
view.mas_height	NSLayoutAttributeHeight
view.mas_centerX	NSLayoutAttributeCenterX
view.mas_centerY	NSLayoutAttributeCenterY
view.mas_baseline	NSLayoutAttributeBaseLine

二、UIView/NSView

若是view.left大於等於label.left,則實現以下：

三、NSNumber 自動佈局容許寬、高設置爲常量值。若是設置視圖的寬度介於指定範圍，實現以下：

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

然而自動佈局不容許爲對齊屬性（如：left、right、centerY等）設置常量值。所以，若是爲這個對象傳遞一個NSNumber對象，Masonry會自動將其轉換成相對於父視圖的約束關係：

除了使用NSNumber外，你還可使用基本類型，結構體等來構建約束，如：

四、NSArray 數組是以前任意類型的混合體

優先級

.priority：容許你指定一個確切的優先級。
.priorityHigh：同UILayoutPriorityDefaultHigh。
.priorityMedium：介於高和低之間的優先級。
.priorityLow：同UILayoutPriorityDefaultLow。
複製代碼

優先級能夠追加到約束鏈的末尾，如：

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();

make.top.equalTo(label.mas_top).with.priority(600);
複製代碼

組合約束

Masonry提供了一些便利的方法，容許你在同一時間建立多個約束。這經過MASCompositeConstraints來實現。

• edges

// make top, left, bottom, right equal view2
make.edges.equalTo(view2);

// 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))

複製代碼

• size

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

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

• center

// make centerX and centerY = button1
make.center.equalTo(button1)

// make centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))
複製代碼

爲了提升可讀性，你能夠將視圖的屬性連接起來：

// All edges but the top should equal those of the superview
make.left.right.and.bottom.equalTo(superview);
make.top.equalTo(otherView);
複製代碼

堅持下去

有時候你須要修改現有的約束，以便激活或刪除／修改約束。在Masonry中，有幾個不不一樣的方法來更新約束：

一、引用

經過將約束表達式的結果賦給局部變量或類屬性，能夠保留特定約束的引用。還能夠經過將它們存儲在數組中引用多個約束。

// in public/private interface
@property (nonatomic, strong) MASConstraint *topConstraint;

...

// when making constraints
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
}];

...
// then later you can call
[self.topConstraint uninstall];
複製代碼

二、mas_updateConstraints

若是你只是更新的約束可使用便捷方法mas_updateconstraints來代替mas_makeconstraints，如：

// this is Apple's recommended place for adding/updating constraints // this method can get called multiple times in response to setNeedsUpdateConstraints // which can be called by UIKit internally or in your code if you need to trigger an update to your constraints - (void)updateConstraints { [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) { make.center.equalTo(self); make.width.equalTo(@(self.buttonSize.width)).priorityLow(); make.height.equalTo(@(self.buttonSize.height)).priorityLow(); make.width.lessThanOrEqualTo(self); make.height.lessThanOrEqualTo(self); }]; //according to apple super should be called at end of method [super updateConstraints]; } 複製代碼

三、mas_remakeConstraints

mas_updateConstraints對於更新一系列約束是有用的，可是除了更新常量以外都會讓然精疲力盡。這樣mas_remakeConstraints就出現了。

mas_remakeConstraints和mas_updateConstraint是類似的，可是不像mas_updateConstraint更新常量值，而是移除全部的約束而後在重裝一遍。這容許您提供不一樣的約束，而沒必要保留對要移除約束的引用。

- (void)changeButtonPosition {
    [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.buttonSize);

        if (topLeft) {
        	make.top.and.left.offset(10);
        } else {
        	make.bottom.and.right.offset(-10);
        }
    }];
}
複製代碼

應該在哪兒建立約束？

@implementation DIYCustomView

- (id)init {
    self = [super init];
    if (!self) return nil;

    // --- Create your views here ---
    self.button = [[UIButton alloc] init];

    return self;
}

// tell UIKit that you are using AutoLayout
+ (BOOL)requiresConstraintBasedLayout {
    return YES;
}

// this is Apple's recommended place for adding/updating constraints - (void)updateConstraints { // --- remake/update constraints here [self.button remakeConstraints:^(MASConstraintMaker *make) { make.width.equalTo(@(self.buttonSize.width)); make.height.equalTo(@(self.buttonSize.height)); }]; //according to apple super should be called at end of method [super updateConstraints]; } - (void)didTapButton:(UIButton *)button { // --- Do your changes ie change variables that affect your layout etc --- self.buttonSize = CGSize(200, 200); // tell constraints they need updating [self setNeedsUpdateConstraints]; } @end 複製代碼

---

掃一掃關注公衆號，獲取更多iOS相關內容：