Masonry是一款轻量级的布局框架,采用方便的链式语法,可以更方便的帮助我们使用纯代码布局
下载地址:https://github.com/SnapKit/Masonry
导入方式:#import "Masonry.h"
约束的三种方法
//添加新约束
- (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
//更新约束,会覆盖之前的约束
- (NSArray *)mas_updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
//完全移除旧约束,添加新约束
- (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
约束的基本属性
@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;
@property (nonatomic, strong, readonly) MASConstraint *centerY;
//文本基线
@property (nonatomic, strong, readonly) MASConstraint *baseline;
约束的特殊属性
//(top, left, bottom, right)
@property (nonatomic, strong, readonly) MASConstraint *edges;
//(width, height)
@property (nonatomic, strong, readonly) MASConstraint *size;
//(centerX, centerY)
@property (nonatomic, strong, readonly) MASConstraint *center;
注意点:
1.使用Masonry
不需要设置控件的translatesAutoresizingMaskIntoConstraints
属性为NO
,mas_makeConstraints
和mas_updateConstraints
以及mas_remakeConstraints
内部已经帮我们设置了;
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block {
self.translatesAutoresizingMaskIntoConstraints = NO;
MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
block(constraintMaker);
return [constraintMaker install];
}
2.mas_makeConstraints
和mas_updateConstraints
以及mas_remakeConstraints
的block
是局部引用,block
里用到了 self
,那 block
会保持一个 self
的引用,但是 self
并没有直接或者间接持有 block
,所以不会造成循环引用。因此__weak typeof (self) weakSelf = self
是没必要的
3.添加约束一定要放addSubview
之后,否则程序会崩溃
基本使用
UIView *blueView = [[UIView alloc]init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
//设置blueView的中心点的x等于self.view的中心点的x
make.centerX.equalTo(self.view);
//设置blueView的顶部等于self.view的顶部,同时偏移30
make.top.equalTo(self.view).offset(30);
//设置宽高都为90
make.size.mas_equalTo(CGSizeMake(90, 90));
}];
UIView *blackView = [[UIView alloc]init];
blackView.backgroundColor = [UIColor blackColor];
[self.view addSubview:blackView];
[blackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(blueView.mas_bottom).offset(20);
make.right.equalTo(blueView.mas_left).offset(20);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
UIView *greenView = [[UIView alloc]init];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
[greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(200, 50));
make.center.equalTo(self.view);
}];
equalTo和mas_equalTo的区别
先观察源码:
#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
mas_equalTo
会对参数进行一个MASBoxValue()
操作,可以支持的类型是:NSNumber、 CGPoint、CGSize、UIEdgeInsets
/**
* Sets the constraint relation to NSLayoutRelationEqual
* returns a block which accepts one of the following:
* MASViewAttribute, UIView, NSValue, NSArray
* see readme for more details.
*/
- (MASConstraint * (^)(id attr))equalTo;
equalTo
并没有MASBoxValue()
操作,源码的注释上说了equalTo
支持的类型是:MASViewAttribute, UIView, NSValue, NSArray
为了方便编码的2个宏
1.#define MAS_SHORTHAND
:可以省略'mas_'前缀
2.#define MAS_SHORTHAND_GLOBALS
:自动将结构体包装成 NSValue
,而无需再使用 mas_equalTo
,其源码如下:
#ifdef MAS_SHORTHAND_GLOBALS
#define equalTo(...) mas_equalTo(__VA_ARGS__)