SnapKit/Masonry的使用简介

系统管理员 2022-08-19 15:13 170阅读 0赞

// 原创作者的 github地址

https://github.com/SnapKit/Masonry.git

//最重要的放前面!!!!!!!!!!

#### 1. References ####

你可以坚持到特定约束的参考通过分配约束的结果使表达一个局部变量或类属性。您也可以通过将它们存储起来在数组引用多个约束。

以下为 最原始的自动布局,使用起来相对较麻烦,在OC中,不需要关闭系统的自动布局属性.

// in public/private interface
    @property (nonatomic, strong) MASConstraint *topConstraint;
    
    ...
    
    // when making constraints
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
        make.left.equalTo(superview.mas_left).with.offset(padding.left);
    }];
    
    ...
    // then later you can call
    [self.topConstraint uninstall];

#### 2. mas\_updatetconstraints ####

另外，如果你只更新约束的恒定值，你可以使用mas\_makeConstraints的便捷方法马斯updateConstraints代替

// this is Apple's recommended place for adding/updating constraints
    // this method can get called multiple times in response to setNeedsUpdateConstraints
    // which can be called by UIKit internally or in your code if you need to trigger an update to your constraints
    - (void)updateConstraints {
        [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
            make.center.equalTo(self);
            make.width.equalTo(@(self.buttonSize.width)).priorityLow();
            make.height.equalTo(@(self.buttonSize.height)).priorityLow();
            make.width.lessThanOrEqualTo(self);
            make.height.lessThanOrEqualTo(self);
        }];
    
        //according to apple super should be called at end of method
        [super updateConstraints];
    }

### 3. mas\_remakeConstraints ###

mas\_makeConstraints类似于mas\_updateConstraints，但不是更新的常量值，它会再次安装前移除所有的限制。这使您可以提供不同的约束，而无需保持周围引用那些要删除。

- (void)changeButtonPosition {
        [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.size.equalTo(self.buttonSize);
    
            if (topLeft) {
                make.top.and.left.offset(10);
            } else {
                make.bottom.and.right.offset(-10);
            }
        }];
    }

swift需关闭

iconImageView.translatesAutoresizingMaskIntoConstraints = false;

OC中直接满足,则不无要设置.

UIView *superview = self;
    
    UIView *view1 = [[UIView alloc] init];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor greenColor];
    [superview addSubview:view1];
    
    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
    
    [superview addConstraints:@[
    
        //view1 constraints
        [NSLayoutConstraint constraintWithItem:view1
                                     attribute:NSLayoutAttributeTop
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:superview
                                     attribute:NSLayoutAttributeTop
                                    multiplier:1.0
                                      constant:padding.top],
    
        [NSLayoutConstraint constraintWithItem:view1
                                     attribute:NSLayoutAttributeLeft
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:superview
                                     attribute:NSLayoutAttributeLeft
                                    multiplier:1.0
                                      constant:padding.left],
    
        [NSLayoutConstraint constraintWithItem:view1
                                     attribute:NSLayoutAttributeBottom
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:superview
                                     attribute:NSLayoutAttributeBottom
                                    multiplier:1.0
                                      constant:-padding.bottom],
    
        [NSLayoutConstraint constraintWithItem:view1
                                     attribute:NSLayoutAttributeRight
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:superview
                                     attribute:NSLayoutAttributeRight
                                    multiplier:1
                                      constant:-padding.right],
    
     ]];

1.采用Masonry-> Prepare to meet your Maker!

创建简便的约束.

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
    
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
        make.left.equalTo(superview.mas_left).with.offset(padding.left);
        make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
        make.right.equalTo(superview.mas_right).with.offset(-padding.right);
    }];

设置内间距

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(superview).with.insets(padding);
    }];

属性参照对表

<table style="border-collapse:collapse; border-spacing:0px; margin-top:0px; margin-bottom:16px; display:block; width:888px; overflow:auto; word-break:normal; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'; font-size:16px; line-height:25px"> 
 <thead style=""> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <th style="padding:6px 13px; border:1px solid rgb(221,221,221)">MASViewAttribute</th> 
   <th style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttribute</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_left</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeLeft</td> 
  </tr> 
  <tr style="background-color:rgb(248,248,248); border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_right</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeRight</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_top</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeTop</td> 
  </tr> 
  <tr style="background-color:rgb(248,248,248); border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_bottom</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeBottom</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_leading</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeLeading</td> 
  </tr> 
  <tr style="background-color:rgb(248,248,248); border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_trailing</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeTrailing</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_width</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeWidth</td> 
  </tr> 
  <tr style="background-color:rgb(248,248,248); border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_height</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeHeight</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_centerX</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeCenterX</td> 
  </tr> 
  <tr style="background-color:rgb(248,248,248); border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_centerY</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeCenterY</td> 
  </tr> 
  <tr style="border-top-width:1px; border-top-style:solid; border-top-color:rgb(204,204,204)"> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">view.mas_baseline</td> 
   <td style="padding:6px 13px; border:1px solid rgb(221,221,221)">NSLayoutAttributeBaseline</td> 
  </tr> 
 </tbody> 
</table>

//如果你想设置一个控件的左间距等于另一个控件的左间距.

//these two constraints are exactly the same
    make.left.greaterThanOrEqualTo(label);
    make.left.greaterThanOrEqualTo(label.mas_left);

//设置 间距,或差距值采用 double类型 @xx;

//width >= 200 && width <= 400
    make.width.greaterThanOrEqualTo(@200);
    make.width.lessThanOrEqualTo(@400)

//部分属性可以直接使用

make.top.mas_equalTo(42);
    make.height.mas_equalTo(20);
    make.size.mas_equalTo(CGSizeMake(50, 100));
    make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));
    make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));

//也可以使用数组进行赋值

make.height.equalTo(@[view1.mas_height, view2.mas_height]);
    make.height.equalTo(@[view1, view2]);
    make.left.equalTo(@[view1, @100, view3.right]);

#### edges ####

// make top, left, bottom, right equal view2
    make.edges.equalTo(view2);
    
    // make top = superview.top + 5, left = superview.left + 10,
    //      bottom = superview.bottom - 15, right = superview.right - 20
    make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

#### size ####

// make width and height greater than or equal to titleLabel
    make.size.greaterThanOrEqualTo(titleLabel)
    
    // make width = superview.width + 100, height = superview.height - 50
    make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

#### center ####

// make centerX and centerY = button1
    make.center.equalTo(button1)
    
    // make centerX = superview.centerX - 5, centerY = superview.centerY + 10
    make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

//你可以连续使用视图属性增加可读性：

// All edges but the top should equal those of the superview
    make.left.right.and.bottom.equalTo(superview);
    make.top.equalTo(otherView);