介绍
Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X。
相较与NSLayoutConstraints,masonry更加方便快捷，大量减少适配时间
使用
- masonry提供的属性
@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;
这些属性与NSLayoutAttrubute的对照表
与NSLayoutAttribute的对照表
- masonry中修改约束的方法
//添加新的约束，如果存在多条针对同一对象的约束会报错
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//更新约束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//删除之前添加的所有约束，添加新的约束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
- 让view填充superView并距离边界10个像素点
#define WS(weakSelf) __weak __typeof(&*self)weakSelf = self
WS(ws);
UIView *view1 = [UIView new];
view1.backgroundColor = [UIColor grayColor];
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(ws.view).width.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
更简便的写法
make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
注意：在添加约束之前,需要明确view的superView
使用and与with使代码更容易理解的原因：
and与with方法
-
让view居中，更改相对superView的size
UIView *view2 = [UIView new];
view2.backgroundColor = [UIColor blackColor];
[view1 addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(view1);
make.size.equalTo(view1).sizeOffset(CGSizeMake(-100, -100));
}];
同理设置居中的偏移：
make.center.equalTo(superView).sizeOffset(CGSizeMake(-5,-5));
效果图view1灰色，view2黑色 -
让两个宽度为100的View垂直居中且等高, 间隔20
UIView *view3 = [UIView new];
UIView *view4 = [UIView new];
[view2 addSubview:view3];
[view2 addSubview:view4];
view3.backgroundColor = [UIColor orangeColor];
view4.backgroundColor = [UIColor orangeColor];[view3 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(view2); make.top.equalTo(view2).offset(20); make.bottom.equalTo(view4.mas_top).offset(-20); make.height.equalTo(view4); make.width.equalTo(@100); }]; [view4 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(view2); make.bottom.equalTo(view2).offset(-20); make.width.equalTo(view3); }];
效果图
- 在UIScrollView顺序排列一些view并自动计算contentSize
UIScrollView *scrollView = [UIScrollView new];
scrollView.backgroundColor = [UIColor whiteColor];
[sv addSubview:scrollView];
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(5,5,5,5));
}];
UIView *container = [UIView new];
[scrollView addSubview:container];
[container mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scrollView);
make.width.equalTo(scrollView);
}];
int count = 10;
UIView *lastView = nil;
for ( int i = 1 ; i <= count ; ++i ) {
UIView *subv = [UIView new];
[container addSubview:subv];
subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )
saturation:( arc4random() % 128 / 256.0 ) + 0.5
brightness:( arc4random() % 128 / 256.0 ) + 0.5
alpha:1];
[subv mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(container);
make.height.mas_equalTo(@(20*i));
if ( lastView ){
make.top.mas_equalTo(lastView.mas_bottom);
}else{
make.top.mas_equalTo(container.mas_top);
}
}];
lastView = subv;
}
[container mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(lastView.mas_bottom);
}];
头部效果：
尾部效果：
从scrollView的scrollIndicator可以看出 scrollView的内部已如我们所想排列好了
这里的关键就在于container这个view起到了一个中间层的作用 能够自动的计算uiscrollView的contentSize
-
横向或者纵向等间隙的排列一组view
UIView *sv = [UIView new];
sv.backgroundColor = [UIColor blackColor];
[self.view addSubview:sv];
[sv mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(ws.view);
make.size.mas_equalTo(CGSizeMake(300, 300));
}];UIView *view1 = [UIView new]; UIView *view2 = [UIView new]; UIView *view3 = [UIView new]; view1.backgroundColor = [UIColor redColor]; view2.backgroundColor = [UIColor redColor]; view3.backgroundColor = [UIColor redColor]; [sv addSubview:view1]; [sv addSubview:view2]; [sv addSubview:view3]; NSArray *arr = @[view1,view2,view3]; [view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.equalTo(@[view2,view3]); make.size.mas_equalTo(CGSizeMake(50, 30)); }]; [view2 mas_makeConstraints:^(MASConstraintMaker *make) { make.size.mas_equalTo(CGSizeMake(40, 60)); }]; [view3 mas_makeConstraints:^(MASConstraintMaker *make) { make.size.mas_equalTo(CGSizeMake(60, 60)); }]; //创建四个view来填充空白区域 NSMutableArray *spaceViews = [NSMutableArray array]; for (int i = 0; i < arr.count + 1; i++) { UIView *spaceView = [UIView new]; [spaceViews addObject:spaceView]; [sv addSubview:spaceView]; [spaceView mas_makeConstraints:^(MASConstraintMaker *make) { make.height.equalTo(@20); make.top.equalTo(sv.mas_top).offset(30); }]; } UIView *space0 = spaceViews[0]; [space0 mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(sv.mas_left); make.centerY.equalTo(((UIView *)arr[0]).mas_centerY); }]; UIView *lastSpace = space0; for (int i = 0; i < arr.count; i++) { UIView *v = arr[i]; UIView *space = spaceViews[i + 1]; [v mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(lastSpace.mas_right); //make.top.equalTo(sv.mas_top).offset(20); }]; [space mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(v.mas_right); make.centerY.equalTo(v.mas_centerY); make.width.equalTo(lastSpace); }]; lastSpace = space; } [lastSpace mas_makeConstraints:^(MASConstraintMaker *make) { make.right.equalTo(sv.mas_right); }];
这里的技巧是用空白的view填充空白区域
