Masonry整理

Masonry整理

Masonry是以AutoLayout爲基礎的輕量級佈局框架更加簡化了整個約束系統

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可以不用字面量

  1. 先試一下:一個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);

  1. 兩個view

  2. 例1

1240

如圖

1240

如圖

  [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:

1240

兩個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:

    1240

    例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:

1240

屏幕快照 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:

    1240

    屏幕快照 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:

1240

豎屏

1240

橫屏

    [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

1240

屏幕快照 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);
    }];
鍵盤監聽

如圖:

1240

屏幕快照 2015-12-07 下午8.55.10.png

1240

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

}



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章