中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Masonry整理

發布時間:2020-09-17 10:32:36 來源:網絡 閱讀:511 作者:卓行天下 欄目:開發技術
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

Masonry整理

如圖

Masonry整理

如圖

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

Masonry整理

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

    Masonry整理

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

Masonry整理

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

    Masonry整理

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

Masonry整理

豎屏

Masonry整理

橫屏

    [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

Masonry整理

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

如圖:

Masonry整理

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

Masonry整理

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

}



向AI問一下細節
推薦閱讀:
  1. Sed應用整理
  2. zabbix-整理

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

通榆县| 邵阳县| 昭苏县| 龙岩市| 体育| 双峰县| 徐闻县| 邹平县| 孟村| 临沂市| 元朗区| 东明县| 鲜城| 岱山县| 西乌| 固始县| 彩票| 集安市| 武城县| 镇巴县| 五原县| 新宁县| 罗定市| 渑池县| 老河口市| 屏南县| 德州市| 杨浦区| 永清县| 无锡市| 定远县| 海兴县| 林芝县| 建平县| 鄂伦春自治旗| 炉霍县| 弥勒县| 惠安县| 汉沽区| 莱西市| 额敏县|