Masonry學習

常用方法

設定view的位置

- (void)initViews{

UIView *view = [UIView new];
[self.view addSubview:view];

[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(view.superview).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

/* 等價於
make.top.equalTo(sv).with.offset(10);
make.left.equalTo(sv).with.offset(10);
make.bottom.equalTo(sv).with.offset(-10);
make.right.equalTo(sv).with.offset(-10);
*/

/* 也等價於
make.top.left.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
*/
}];
}
設定view的size

make.size.mas_equalTo(CGSizeMake(40, 40));
更新刪除view的約束

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

/*
mas_makeConstraints 只負責新增約束 Autolayout不能同時存在兩條針對於同一物件的約束否則會報錯
mas_updateConstraints 針對上面的情況會更新在block中出現的約束不會導致出現兩個相同約束的情況
mas_remakeConstraints 則會清除之前的所有約束僅保留最新的約束

三種函式善加利用就可以應對各種情況了
*/
mas_equalTo()和equalTo()的區別

mas_equalTo支援的型別更多

#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
#define mas_greaterThanOrEqualTo(...) greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
#define mas_lessThanOrEqualTo(...) lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))

#define mas_offset(...) valueOffset(MASBoxValue((__VA_ARGS__)))
一個view

居中

///* 居中
make.size.mas_equalTo(CGSizeMake(100, 60));

make.centerY.equalTo(view.superview.mas_centerY);
make.centerX.equalTo(view.superview.mas_centerX);

// */
多個view

大小相同

make.width.equalTo(v1.mas_width);
make.height.equalTo(v1.mas_height);
首尾相連

//與v2上下間距為10
make.bottom.mas_equalTo(v2.mas_top).offset(-10);
//與v1左右間距為10
make.left.equalTo(v1.mas_right).offset(10);
同一垂直中線

//與v1的x中心點在同一直線
make.centerX.equalTo(v1.mas_centerX);
示例

- (void)towView{

UIView *v1 = [UIView new];
v1.backgroundColor = [UIColor redColor];
[self.view addSubview:v1];

UIView *v2 = [UIView new];
v2.backgroundColor = [UIColor blackColor];
[self.view addSubview:v2];

[v1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(200, 120));
make.top.mas_equalTo(v1.superview).offset(74);
//與v2上下間距為10
make.bottom.mas_equalTo(v2.mas_top).offset(-10);
make.centerX.equalTo(v1.superview.mas_centerX);
}];

[v2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(250, 30));

make.centerX.equalTo(v1.mas_centerX);
/*和v1的寬高相等
make.width.equalTo(v1.mas_width);
make.height.equalTo(v1.mas_height);
//*/
make.top.mas_equalTo(v1.mas_bottom).offset(10);
make.bottom.mas_equalTo(v2.superview).offset(-10);
}];
}

九宮格排序

- (void)squaredUp{
NSMutableArray *array = [NSMutableArray array];
for (int i = 0; i<14; i++) {
[array addObject:[NSString stringWithFormat:@"%d",i]];
}

__block UIView *lastV = nil;
int list = 4;
int gap = 10;

for (int i = 0; i<array.count; i++) {

UILabel *label = [UILabel new];
label.text = array[i];
[self.view addSubview:label];
label.textAlignment = NSTextAlignmentCenter;
label.backgroundColor = [UIColor magentaColor];
[label sizeToFit];

[label mas_makeConstraints:^(MASConstraintMaker *make) {
if (lastV) {
make.width.equalTo(lastV.mas_width);
}else
make.size.mas_equalTo(CGSizeMake((self.view.frame.size.width - gap*(list + 1))/list, 20));

if (i%list == 0) {
make.left.equalTo(label.superview).offset(gap);
}
else{
make.left.equalTo(lastV.mas_right).offset(gap);
}
if (i%list == (list -1)) {
make.right.equalTo(label.superview).offset(-gap);
}
int top = 64+(i/list+1)*gap+(i/list*label.frame.size.height);
make.top.equalTo(label.superview).offset(top);

lastV = label;
}];
}
}

Masonry學習

相關文章