介紹
Masonry是一個輕量級的布局框架 擁有自己的描述語法 采用更優(yōu)雅的鏈式語法封裝自動布局 簡潔明了 并具有高可讀性 而且同時支持 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));
}];
同理設(shè)置居中的偏移：
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的內(nèi)部已如我們所想排列好了
這里的關(guān)鍵就在于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)); }]; //創(chuàng)建四個view來填充空白區(qū)域 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填充空白區(qū)域
