开源项目 Masonry 旨在让自动布局(Auto Layout)的代码更简洁、可读性更强。
Masonry ,“一个轻量级的布局框架,采用更优雅的语法封装自动布局”,不需要使用 XIB 和 Storyboard. 它的创造者Jonas Budelmann 论证了尽管自动布局很强大,但它很快就变得冗长而不可读。
Masonry是一种领域特定语言(DSL),为自动布局的所有功能提供便捷的方法,包括建立和修改约束、存取属性、设置优先级以及调试支持。
1. What's wrong with NSLayoutConstraints ?
NSLayoutConstraints 的繁琐之处,代码如下:
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 constraintsntWithItem: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. Prepare to meet your Maker !
MASConstraintMaker 的简洁之处,代码如下:
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
make.left.equalTo(superview.mas_left).with.offset(padding.left);
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];
或者更简洁:
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(superview).with.insets(padding);
}];
3. Not all things are created equal
并非所有的约束都用 equal 创建的,例如:
.equalTo 相当于 NSLayoutRelationEqual
.lessThanOrEqualTo 相当于 NSLayoutRelationLessThanOrEqual
.greaterThanOrEqualTo 相当于 NSLayoutRelationGreaterThanOrEqual
3.1 MASViewAttribute
常用属性:
@property (nonatomic, strong, readonly) MASConstraint *left; // 左侧
@property (nonatomic, strong, readonly) MASConstraint *top; // 顶部
@property (nonatomic, strong, readonly) MASConstraint *right; // 右侧
@property (nonatomic, strong, readonly) MASConstraint *bottom; // 底部
@property (nonatomic, strong, readonly) MASConstraint *leading; // 首部
@property (nonatomic, strong, readonly) MASConstraint *trailing; // 尾部
@property (nonatomic, strong, readonly) MASConstraint *width; // 宽
@property (nonatomic, strong, readonly) MASConstraint *height; // 高
@property (nonatomic, strong, readonly) MASConstraint *centerX; // 中心点x
@property (nonatomic, strong, readonly) MASConstraint *centerY; // 中心点y
@property (nonatomic, strong, readonly) MASConstraint *baseline; // 文本基线
3.2 UIView/NSView
如果你想要 view.left 大于或等于 label.left, 下面两个约束都可以实现:
//these two constraints are exactly the same
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);
3.3 NSNumber
自动布局允许宽高设置为常量。如果你想给一个视图的宽度设置最小值和最大值,可以传递数字,如下:
//width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(@200);
make.width.lessThanOrEqualTo(@400)
但是,自动布局不允许 left, right, centerY 等属性变量设置常量。因此,若给这类属性传 NSNumber 类型的参数,Masonry 会返回父视图相关的约束,例如:
//creates view.left = view.superview.left + 10
make.left.lessThanOrEqualTo(@10)
除了用 NSNumber, 也可以用基元 (primitives) 和结构体来创建常量,例如:
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));
3.4 NSArray
也可以用上述类型任意组合成的数组,例如:
make.height.equalTo(@[view1.mas_height, view2.mas_height]);
make.height.equalTo(@[view1, view2]);
make.left.equalTo(@[view1, @100, view3.right]);
4. Learn to prioritize
划分优先级。
.priority: 指定具体的优先级。
.priorityHigh 相当于 UILayoutPriorityDefaultHigh
.priorityMedium 介于高和低之间。
.priorityLow 相当于 UILayoutPriorityDefaultLow
优先级可以附加到一个约束链的最后,例如:
make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
make.top.equalTo(label.mas_top).with.priority(600);
5. Composition, composition, composition
Masonry 提供了几个很方便的方法可以同时创建多个约束,这就是 MASCompositeConstraints.
5.1 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))
5.2 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))
5.3 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))
PS: 还有一部分内容未涉及到,这里只写了本人平时用到的,详情可查看原文。
GitHub 原文链接: https://github.com/SnapKit/Masonry
参考链接:
1. Masonry简单使用
2. Masonry与iOS自动布局
3. Masonry介绍与使用实践:快速上手Autolayout