Masonry是一個輕量級的布局框架,采用更好的語法封裝自動布局,它有自己的布局DSL。簡潔明了並具有高可讀性 而且同時支持 iOS 和 Max OS X。
NSLayoutConstraints的缺點
NSLayoutConstraints是一個強大且靈活的自動布局架構,可是通過代碼創建的約束是十分冗余,下面我們通過一段代碼來實現你想要一個視圖鋪滿它的父視圖。但是邊距為10
UIView *superview = self; UIView *view1 = [[UIView alloc] init]; view1.translatesAutoresizingMaskIntoConstraints = NO; view1.backgroundColor = [UIColor greenColor]; [superview addSubview:view1]; UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); [superview addConstraints:@[ //view1 constraints [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:padding.top], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeLeft multiplier:1.0 constant:padding.left], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-padding.bottom], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right], ]];
即使一個簡單的例子所需的代碼都相當冗長,當你有超過 2 或 3 視圖時變得不可讀,另一種選擇是使用可視化格式語言 (VFL),有點不太冗長。然而,ASCII 類型語法上有它自己的陷阱並且作為 NSLayoutConstraint constraintsWithVisualFormat: 添加動畫效果 返回一個數組也有點難。
Masonry的優點
下面是使用MASConstraintMaker創建同樣的約束
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[self.subview mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view.mas_top).with.offset(padding.top);
make.left.equalTo(self.view.mas_left).with.offset(padding.left);
make.bottom.equalTo(self.view.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(self.view.mas_right).with.offset(-padding.right);
}];
更短代碼實現
[self.subview mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).with.insets(padding);
}];
此外還需注意使用NSLayoutConstraints時調用了[superview addConstraints:... ] 方法,在Masonry庫中是自動向當前視圖添加約束的,我們也可以通過self.subview.translatesAutoresizingMaskIntoConstraints = NO來手動設置。
並不是所有創建都一樣
.equalTo 等價於 NSLayoutRelationEqual
.lessThanOrEqualTo 等價於 NSLayoutRelationLessThanOrEqual
.greaterThanOrEqualTo 等價於 NSLayoutRelationGreaterThanOrEqual
這些三個等式約束可以是下列任一操作作為一個參數
1. 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 |
2. UIView/NSView
如果你想要view.left大於或等於label.left可以
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);
3. NSNumber
自動布局允許寬度和高度設置為常量值。如果你想要將視圖具有最小值和最大寬度設置你可以
//width >= 200 && width <= 400 make.width.greaterThanOrEqualTo(@200); make.width.lessThanOrEqualTo(@400)
然而自動布局不允許對齊屬性如左對齊、 右對齊,centerY等將設置為常量值
//creates view.left = view.superview.left + 10 make.left.lessThanOrEqualTo(@10)
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));
您可以使用基元和結構打造你的約束替代 NSNumber。默認情況下,支持自動裝箱的宏均以 mas_ 作為前綴。沒有前綴的版本均可通過導入之前定義 MAS_SHORTHAND_GLOBALS。
4. NSArray
make.height.equalTo(@[view1.mas_height, view2.mas_height]); make.height.equalTo(@[view1, view2]); make.left.equalTo(@[view1, @100, view3.right]);
優先原則
.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))
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);