您好,登錄后才能下訂單哦!
Masonry三方下載
本文參考:
地址1
地址2
地址3
地址4
*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;Masonry
(NSArray )mas_makeConstraints:(void(^)(MASConstraintMaker ))block;
(NSArray )mas_updateConstraints:(void(^)(MASConstraintMaker ))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).width.insets(UIEdgeInsetsMake(30, 30, 30, 30)); // 3. 還等價于 make.top.left.bottom.and.right.equalTo(self.view).width.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:
兩個view
[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:
屏幕快照 2015-12-07 上午9.42.41.png
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).width.insets(UIEdgeInsetsMake(20, 20, 100, 20));
等價make.edges.equalTo(weakSelf.view).width.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).width.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
屏幕快照 2015-12-07 下午7.33.20.png
UIScrollView *scr = [UIScrollView new]; scr.backgroundColor = [UIColor whiteColor]; [self.view addSubview:scr]; [scr mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view).width.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); }];
如圖:
屏幕快照 2015-12-07 下午8.55.10.png
屏幕快照 2015-12-07 下午8.55.22.png
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]; }]; }
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。