*Masonry有哪些属性
@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;
(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_makeConstrains方法的元素必须事先添加到父视图中
mas_equalTo和equalTo区别：前者比后者多了类型转换操作，支持CGSize CGPoint NSNumber UIEdgeinsets。mas_equalTo是equalTo的封装，equalTo适用于基本数据类型，而mas_equaalTo适用于类似UIEdgeInsetsMake 等复杂类型，基本上它可以替换equalTo。
上左为正 下右为负 是因为坐标而来的 视图坐标左上为原点 X向右为正 Y向下为正
举例比较：
Make.left.equalTo(@64)可以这么写才可以 字面量
make.left.mas_equalTo(64);而mas_equalTo可以不用字面量
- 先试一下：一个View居中
// 防止block循环引用
__weak typeof (self)weakSelf = self;
UIView yellow = [UIView new];
yellow.backgroundColor = [UIColor yellowColor];
// 切记添加到父视图中
[self.view addSubview:yellow];
[yellow showPlaceHolder];
/*
设置约束
-
使用mas_MakeConstraints:添加约束
*/
[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
// 1.make就是添加约束的控件
// make.left.equalTo 的意思是左侧和谁相同 .offset则是偏移量 上左[为正]下右[为负]
make.top.equalTo(self.view.mas_top).offset(30);// 和父视图顶部间距30
make.left.equalTo(self.view.mas_left).offset(30);// 和父视图左边间距30
make.bottom.equalTo(self.view.mas_bottom).offset(-30);// 和父视图底部间距30
make.right.equalTo(self.view.mas_right).offset(-30);// 和父视图右边间距30// 2. 2等价于1 edges边缘的意思
make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(30, 30, 30, 30));// 3. 还等价于
make.top.left.bottom.and.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(30, 30, 30, 30));// 4.此处给yellow一个size 且让其居中
make.size.mas_equalTo(CGSizeMake(300, 300));
make.center.equalTo(self.view);
}];
size还可以这么写两者也相同
make.size.mas_equalTo(self.view).offset(-20);
make.size.equalTo(self.view).offset(-20);
居中：
make.centerX.equalTo(self.view.mas_centerX);
make.centerY.equalTo(self.view.mas_centerY);
等同于：
make.center.mas_equalTo(self.view);
- 两个view
- 例1
[green mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(200, 120));// green大小
make.top.mas_equalTo(green.superview).offset(100);// green顶部到它父视图的偏移量
make.bottom.mas_equalTo(yellow.mas_top).offset(-50);// 50如果为正就是green底部到yellow顶部距离为50 为负就是green下边到yellow上边为50
make.centerX.equalTo(green.superview.mas_centerX);// 中心点的X坐标和父视图中心点的X相同 说人话就是在中间
}];
[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(250, 30)); // 给个size
make.centerX.equalTo(green.mas_centerX);// centerX和green一样
}];
make.size.equalTo(green);两个view就相同大小
等同于
make.width.equalTo(green.mas_width);
make.height.equalTo(green.mas_height);
- 例2：
[green mas_makeConstraints:^(MASConstraintMaker *make) {
// 添加大小约束
make.size.mas_equalTo(CGSizeMake(100, 100));
// 添加左上边距约束
make.left.and.top.mas_equalTo(20);
}];
[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
// 大小和上边距约束与green相同
make.size.and.top.equalTo(green);
// 添加右边距约束 上左为正下右为负
make.right.mas_equalTo(-20);
}];
这里的and和with都没有具体操作只是拿来增加程序可读性
-
例3：
例3
[green mas_makeConstraints:^(MASConstraintMaker *make) {
// 左上约束20 右侧约束-20
make.left.and.top.mas_equalTo(20);
// 右边约束为-20
make.right.mas_equalTo(-20);
}];
[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
// 下右约束-20
make.bottom.and.right.mas_equalTo(-20);
// 高度和green相同
make.height.equalTo(green);
// 顶部到green底部距离为20
make.top.equalTo(green.mas_bottom).offset(20);
// 左侧到视图中心的距离为20
make.left.equalTo(weakSelf.view.mas_centerX).offset(20);
}];
make.right.equalTo(weakSelf.view).offset(-20);
等同于
make.right.mas_equalTo(-20);
- 例4:
UIView *gray = [UIView new];
gray.backgroundColor = [UIColor grayColor];
[self.view addSubview:gray];
[gray showPlaceHolder];
[gray mas_makeConstraints:^(MASConstraintMaker *make) {
// 左上下距离父视图都为0
make.left.and.top.and.bottom.mas_equalTo(0);
// 宽度为200
make.width.mas_equalTo(200);
}];
UIView *w = [UIView new];
w.backgroundColor = [UIColor colorWithWhite:0.228 alpha:1.000];
[w showPlaceHolder];
[self.view addSubview:w];
UIView *light = [UIView new];
light.backgroundColor = [UIColor lightGrayColor];
[light showPlaceHolder];
[self.view addSubview:light];
[w mas_makeConstraints:^(MASConstraintMaker *make) {
// w底部距离父视图centerY的距离为10
make.bottom.equalTo(weakSelf.view.mas_centerY).mas_equalTo(-10);
// 左侧距离gray距离为20
make.left.equalTo(gray).offset(20);
// 右侧距离gray距离20
make.right.equalTo(gray).offset(-20);
make.height.mas_equalTo(100);
}];
[light mas_makeConstraints:^(MASConstraintMaker *make) {
// 顶部距离父视图centerY为10
make.top.equalTo(weakSelf.view.mas_centerY).mas_equalTo(10);
// 左右和高度与w相同
make.left.and.right.and.height.equalTo(w);
}];
上下左右边距
make.top.left.bottom.right.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(20, 20, 100, 20));
等价
make.edges.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(20, 20, 100, 20));
-
例5：
屏幕快照 2015-12-07 下午3.04.56.png
[green mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(weakSelf.view.mas_centerY);
make.left.equalTo(weakSelf.view.mas_left).offset(10);
make.right.equalTo(yellow.mas_left).offset(-10);
make.height.mas_equalTo(150);
make.width.equalTo(yellow);
}];
[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(weakSelf.view.mas_centerY);
make.left.equalTo(green.mas_right).offset(10);
make.right.equalTo(weakSelf.view.mas_right).offset(-10);
make.height.mas_equalTo(@150);
make.width.equalTo(green);
}];
- 例6：
[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
//make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(30, 10, 300, 10));
make.top.left.equalTo(@20);
make.right.mas_equalTo(-10);
}];
[w mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(20);
make.bottom.mas_equalTo(weakSelf.view).offset(-20);
make.height.mas_equalTo(yellow);
make.top.mas_equalTo(yellow.mas_bottom).offset(20);
make.width.mas_equalTo(green);
make.right.mas_equalTo(green.mas_left).offset(-20);
}];
[green mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(yellow.mas_bottom).offset(20);
make.left.equalTo(w.mas_right).offset(20);
make.right.equalTo(yellow.mas_right);
make.height.mas_equalTo(or.mas_height);
}];
[or mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(yellow.mas_top).offset(20);
make.left.mas_equalTo(yellow.mas_left).offset(30);
make.width.mas_equalTo(bl.mas_width);
}];
[cy mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(or.mas_bottom).offset(30);
make.left.mas_equalTo(or.mas_left);
make.height.mas_equalTo(or.mas_height);
make.width.mas_equalTo(or.mas_width);
make.bottom.mas_equalTo(yellow).offset(-20);
}];
[bl mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(or.mas_top);
make.left.mas_equalTo(or.mas_right).offset(20);
make.bottom.mas_equalTo(cy.mas_bottom);
make.right.mas_equalTo(weakSelf.view.mas_right).offset(-20);
}];
- ScrollView
UIScrollView *scr = [UIScrollView new];
scr.backgroundColor = [UIColor whiteColor];
[self.view addSubview:scr];
[scr mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];
UIView *container = [UIView new];
[scr addSubview:container];
[container mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scr);
make.width.equalTo(scr);
}];
int count = 20;
UIView *lastView = nil;
for (int i = 0; i <= count; i++) {
UIView *subView = [UIView new];
[container addSubview:subView];
subView.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )saturation:( arc4random() % 128 / 256.0 ) + 0.5 brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:1];
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(container);
make.height.mas_equalTo(@(20 * i));
if (lastView) {
// lastView存在时 以其底部为下一个view的顶部
make.top.mas_equalTo(lastView.mas_bottom);
} else {
// lastView不存在时 以父视图的顶部为基准
make.top.mas_equalTo(container.mas_top);
}
}];
lastView = subView;
}
[container mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(lastView.mas_bottom);
}];
键盘监听
如图：
mas_updateConstraints 利用它来更新约束
初始时约束：
[_textField mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(200, 30));
make.bottom.mas_equalTo(-40);
make.centerX.equalTo(weakSelf.view.mas_centerX);
}];
键盘弹出在消息方法里更新约束：
-(void)keyBoardWillShow:(NSNotification*)noti {
// 获取键盘基本信息（动画时长与键盘高度）
NSDictionary *userInfo = [noti userInfo];
CGRect rect =
[userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
CGFloat keyboardHeight = CGRectGetHeight(rect);
CGFloat keyboardDuration =
[userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
// 修改下边距约束
[_textField mas_updateConstraints:^(MASConstraintMaker *make) {
make.bottom.mas_equalTo(-keyboardHeight);
}];
// 更新约束
[UIView animateWithDuration:keyboardDuration animations:^{
[self.view layoutIfNeeded];
}];
}
键盘收起时在textField代理方法中再次更新约束
-(void)keyboardWillDisappear:(NSNotification *)noti {
// 获取键盘基本信息（动画时长与键盘高度）
NSDictionary *userInfo = [noti userInfo];
CGRect rect =
[userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
// CGFloat keyboardHeight = CGRectGetHeight(rect);
CGFloat keyboardDuration =[userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
[_textField mas_updateConstraints:^(MASConstraintMaker *make) {
make.bottom.mas_equalTo(-40);
}];
[UIView animateWithDuration:keyboardDuration animations:^{
[self.view layoutIfNeeded];
}];
}
作者：Karen_
链接：https://www.jianshu.com/p/04ff7c3b7a4a
來源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。