有些无用说明删除
Masonry 一直在维护中, ** 我们致力于修复bug和吸收众多开发者的建议 . 如果项目是用Swift语言写的建议使用 **SnapKit** .**
Masonry是一个轻量级的布局框架. Masonry 用可链条式描述自动布局代码,这样使你的布局更加简洁,增强可读性了.Masonry 适用 iOS 和 Mac OS X.
您可以通过下载安装Masonry iOS Examples项目,打开workspace,运行项目,查看使用效果.
苹果原生布局NSLayoutConstraints有什么缺点?
Auto Layout是强大的和灵活,然而通过创建代码创建约束对象进行自动布局的话,项目中代码量十分大( 冗长 )且不好描述.我们可以通过一个例子对比一下.eg:创建一个View,使它的四周与父控件的四周边框相距10像素.
UIView *superview = self.view;
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;//去掉AutoResizing
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],
]];
提高代码可读性,我们使用Masnory
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding.top); //with是连词
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);
}];
使用Masnory必须将子控件添加到父控件之后,才能再布局.有些布局约束Masnory会自动参考父控件对应参数.
Masonry 自动设置子控件的translatesAutoresizingMaskIntoConstraints = NO;
关系代码块
equalTo 等价于 NSLayoutRelationEqual //等于
lessThanOrEqualTo 等价于 NSLayoutRelationLessThanOrEqual//小于等于
greaterThanOrEqualTo 等价于 NSLayoutRelationGreaterThanOrEqual//大于等于
这三个约束可以使用下面任何一个参数:
1. MASViewAttribute
eg:make.centerX.lessThanOrEqualTo(view2.mas_left);
| 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
eg:是一个view的left大于label的left
//下面两种实现方式:
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);
3. NSNumber
eg:使view的高度是一个固定值,宽度有最小值,最大值:
//width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(@200);
make.width.lessThanOrEqualTo(@400);
eg:自带布局中有些属性必须有参照view才能设置(center/left),使用Masonry后,若没有设置参照View,自动参照父控件superView.参照值不能直接是int/float/double时,使用NSNumber类型.
//使view.left = view.superview.left + 10;
make.left.lessThanOrEqualTo(@10);
//不使用NSNumber,使用int/float/double类型.
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));
Masnory 默认情况下,前缀带有'mas_'的具有'数据类型自动转变功能'.如果您想前缀有'mas_'与没有前缀的 功能相同,在导入Masonry之前定义宏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]);
学会分清主次(优先级)
设置优先级,指定哪个约束最重要,
priorityHigh等价于 UILayoutPriorityDefaultHigh // 优先级高priorityMedium//介于高低之间,,中间级priorityLow等价于 UILayoutPriorityDefaultLow // 优先级低
设置优先级必须在约束链的最后书写:eg:
make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
make.top.equalTo(label.mas_top).with.priority(600);
组合使用
edges
// make top, left, bottom, right equal view2make.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
//使 centerX 和 centerY = button1
make.center.equalTo(button1)
//使 centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))
//You can chain view attributes for increased readability:
// All edges but the top should equal those of the superview
make.left.right.and.bottom.equalTo(superview);
make.top.equalTo(otherView);
Hold on for dear life
动画/删除/替换
1. 设置约束
局部约束可以保存,多个临时约束也可以保存到数组中
//声明一个约束
@property (nonatomic, strong) MASConstraint *topConstraint;
...
//创建约束时
[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);
}];
...
//之后调用卸载
[self.topConstraint uninstall];
2.更新约束
使用 mas_updateconstraints 更新约束,更改mas_makeConstraints设置的约束
//苹果原生文档说:
//如果你想更新约束,可以 通过 调用 setNeedsUpdateConstraints 来更新mas_updateConstraints 里的约束.
-(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);
}];
//苹果文档要求:在方法结束之前调用父类方法
[super updateConstraints];
}
3. 删除约束(删除原有的所有约束,重新设置约束)
使用 mas_remakeConstraints 删除约束.
mas_remakeConstraints 功能:删除原来的约束,将mas_remakeConstraints的约束设置为控件的新约束.
-(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);
}
}];
}
**Masonry iOS Examples **项目中有上面三个方法的详细使用示例.
什么时候创建约束?
@implementation DIYCustomView
- (id)init
{
self = [super init];
if (!self) return nil;
// --- 在这创建控件 ---
self.button = [[UIButton alloc] init];
return self;
}
//告诉系统使用AutoLayout技术
-(BOOL)requiresConstraintBasedLayout
{
return YES;
}
// 设置,添加,更新约束(苹果推荐设置布局的地方)
-(void)updateConstraints
{
// --- remake/update constraints here
[self.button remakeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@(self.buttonSize.width));
make.height.equalTo(@(self.buttonSize.height));
}];
// 根据苹果的建议应该在方法结束时调用
[super updateConstraints];
}
-(void)didTapButton:(UIButton *)button {
// --- 在这里可随意更改控件约束,frame也可以, ---
self.buttonSize = CGSize(200, 200);
// 告诉系统需要更新的约束
[self setNeedsUpdateConstraints];
}
@end