Masonry使用

*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 只負(fù)責(zé)添加約束 AutoLayout不能同時存在兩條針對同一對象的約束否則會報(bào)錯
mas_updateConstraints 針對上面的情況 會更新在block中出現(xiàn)的約束 不會導(dǎo)致出現(xiàn)兩個相同約束的情況
mas_remakeConstraints 清除之前所有的約束只保留新的約束
重點(diǎn)：
使用mas_makeConstrains方法的元素必須事先添加到父視圖中

  • mas_equalTo和equalTo區(qū)別：前者比后者多了類型轉(zhuǎn)換操作，支持CGSize CGPoint NSNumber UIEdgeinsets。mas_equalTo是equalTo的封裝，equalTo適用于基本數(shù)據(jù)類型，而mas_equaalTo適用于類似UIEdgeInsetsMake 等復(fù)雜類型，基本上它可以替換equalTo。

  • 上左為正 下右為負(fù) 是因?yàn)樽鴺?biāo)而來的 視圖坐標(biāo)左上為原點(diǎn) X向右為正 Y向下為正

舉例比較：
Make.left.equalTo(@64) 可以這么寫才可以 字面量
make.left.mas_equalTo(64); 而mas_equalTo可以不用字面量

  1. 先試一下：一個View居中

// 防止block循環(huán)引用
__weak typeof (self)weakSelf = self;

UIView yellow = [UIView new];
yellow.backgroundColor = [UIColor yellowColor];
// 切記添加到父視圖中
[self.view addSubview:yellow];
[yellow showPlaceHolder];
/*

  • 設(shè)置約束

  • 使用mas_MakeConstraints:添加約束
    */
    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
    // 1.make就是添加約束的控件
    // make.left.equalTo 的意思是左側(cè)和誰相同 .offset則是偏移量 上左[為正]下右[為負(fù)]
    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);

  1. 兩個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底部到y(tǒng)ellow頂部距離為50 為負(fù)就是green下邊到y(tǒng)ellow上邊為50
make.centerX.equalTo(green.superview.mas_centerX);// 中心點(diǎn)的X坐標(biāo)和父視圖中心點(diǎn)的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);
// 添加右邊距約束 上左為正下右為負(fù)
make.right.mas_equalTo(-20);
}];
這里的and和with都沒有具體操作只是拿來增加程序可讀性

  • 例3：


    例3

    [green mas_makeConstraints:^(MASConstraintMaker *make) {
    // 左上約束20 右側(cè)約束-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);
// 左側(cè)到視圖中心的距離為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);
// 左側(cè)距離gray距離為20
make.left.equalTo(gray).offset(20);
// 右側(cè)距離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
屏幕快照 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).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不存在時 以父視圖的頂部為基準(zhǔn)
make.top.mas_equalTo(container.mas_top);
}
}];
lastView = subView;
}

[container mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(lastView.mas_bottom);
}];

鍵盤監(jiān)聽

如圖：

屏幕快照 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];
}];
}

作者：Karen_
鏈接：http://www.itdecent.cn/p/04ff7c3b7a4a
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • （一）Masonry介紹 Masonry是一個輕量級的布局框架 擁有自己的描述語法 采用更優(yōu)雅的鏈?zhǔn)秸Z法封裝自動布...
    木易林1閱讀 2,576評論 0贊 3
  • Masonry是一個輕量級的布局框架，擁有自己的描述語法，采用更優(yōu)雅的鏈?zhǔn)秸Z法封裝自動布局，簡潔明了并具有高可讀性...
    3dcc6cf93bb5閱讀 1,934評論 0贊 1
  • 轉(zhuǎn)載：https://www.cnblogs.com/liutingIOS/p/5406858.html 一、Ma...
    JasonYuan123閱讀 1,494評論 0贊 1
  • [置頂]iOS - Masonry使用中的一些整理 標(biāo)簽：iOS資源大全iOS常用方法iOS學(xué)習(xí)資料Masonry...
    DreamMakerSky閱讀 3,268評論 0贊 4
  • iOS_autoLayout_Masonry 概述 Masonry是一個輕量級的布局框架與更好的包裝AutoLay...
    指尖的跳動閱讀 1,319評論 1贊 4

友情鏈接更多精彩內(nèi)容