Masonry使用

Masonry 源码：https://github.com/Masonry/Masonry

表：

view.mas_left

NSLayoutAttributeLeft

view.mas_right

NSLayoutAttributeRight

view.mas_top

NSLayoutAttributeTop

view.mas_bottom

NSLayoutAttributeBottom

view.mas_leading

NSLayoutAttributeLeading

view.mas_trailing

NSLayoutAttributeTrailing

view.mas_width

NSLayoutAttributeWidth

view.mas_height

NSLayoutAttributeHeight

view.mas_centerX

NSLayoutAttributeCenterX

view.mas_centerY

NSLayoutAttributeCenterY

view.mas_baseline

NSLayoutAttributeBaseline

make.top.equalTo(superview.mas_top).with.offset(padding.top);

make.edges.equalTo(superview).with.insets(padding);

由以上几句话可以总结公式

make.string1.equalTo(view.string2).with.offset(number); 

string1   为上表

string2   为 mas_  +  string1 

number  有正负 

make.height.mas_equalTo(20);make.size.mas_equalTo(CGSizeMake(50, 100));由以上几句话可以总结公式

make.string.mas_equalTo(number);
string  为上表
number  为正数
二者用mas_equalTo相连接

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);}];

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));

UIView *sv1 = [UIView new];

[sv1 showPlaceHolder];

sv1.backgroundColor = [UIColor redColor];

[sv addSubview:sv1];

[sv1 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

     

    /* 等价于

    make.top.equalTo(sv).with.offset(10);

    make.left.equalTo(sv).with.offset(10);

    make.bottom.equalTo(sv).with.offset(-10);

    make.right.equalTo(sv).with.offset(-10);

    */

     

    /* 也等价于

    make.top.left.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

    */

}];







1. Label用法 

    UILabel * raceNameLabel= [[UILabelalloc]init];

    raceNameLabel.font = [UIFontsystemFontOfSize:self.topViewFont];

    raceNameLabel.text =@"竞赛名称:";

    raceNameLabel.textColor = [UIColorcolorWithHexString:@"#333333"alpha:1];

    raceNameLabel.translatesAutoresizingMaskIntoConstraints =NO;

    [self.topViewaddSubview:raceNameLabel];

    [raceNameLabel mas_makeConstraints:^(MASConstraintMaker *make) {

        make.leading.equalTo(self.topView.mas_leading).offset(15);

        make.top.equalTo(self.topView.mas_top).offset(self.topViewTop);

    }];

2. UIImageView用法 

    UIImageView* top1ImageView = [UIImageViewnew];

    [top1ImageView setImage:[UIImageimageNamed:@"active01"]];

    [self.middleViewaddSubview:top1ImageView];

    [top1ImageView mas_makeConstraints:^(MASConstraintMaker *make) {

        

        make.centerX.equalTo(self.top1Btn.mas_centerX).offset(0);

        make.centerY.equalTo(self.top1Btn.mas_centerY).offset(self.middleViewOffset);

        make.size.mas_equalTo(CGSizeMake(self.middleViewImageWidth,self.middleViewImageWidth));

    }];

3. UIButton用法 

    UIButton* planBtn = [UIButtonnew] ;

    planBtn.translatesAutoresizingMaskIntoConstraints =NO;

    [planBtn setBackgroundImage:[UIImageimageNamed:@"function2"]forState:UIControlStateNormal];

    [self.middleViewaddSubview:planBtn];

    [planBtn addTarget:selfaction:@selector(planAction:)forControlEvents:UIControlEventTouchUpInside];

    [planBtn mas_makeConstraints:^(MASConstraintMaker *make) {

        make.leading.equalTo(estimateBtn.mas_trailing).offset(self.middleViewSpace);//左右间距

        make.top.equalTo(estimateBtn.mas_top).offset(0);

        make.bottom.equalTo(estimateBtn.mas_bottom).offset(0);

        make.width.equalTo(estimateBtn.mas_width);

    }];

    planBtn.layer.cornerRadius =2;

    planBtn.clipsToBounds =YES;

size用法

make.size.mas_equalTo(CGSizeMake(24,20));

宽高用法：

make.height.mas_equalTo(20);

make.width.equalTo(estimateBtn.mas_width);

make.height.equalTo(estimateBtn.mas_height);

上下对齐

make.top.equalTo(estimateBtn.mas_top).offset(0);

make.bottom.equalTo(estimateBtn.mas_bottom).offset(0);

左右对齐

make.leading.equalTo(self.middleView.mas_leading).offset(self.middleViewLeading);

make.trailing.equalTo(estimateBtn.mas_trailing).offset(0);

中心对齐

make.centerX.equalTo(funcBtn1.mas_centerX);

make.centerY.equalTo(funcBtn1.mas_centerY);

边缘对齐

make.edges.mas_equalTo(self.footView);

比例用法：使用只能是设置同一个控件

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

例子：

[bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {  

make.top.bottom.mas_equalTo(bottomView);  

make.center.mas_equalTo(bottomView);  

// 设置高/宽为3:1  

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);  

make.width.height.mas_equalTo(bottomView).priorityLow();  

make.width.height.lessThanOrEqualTo(bottomView);  

}];

lessThanOrEqualTo 用法

make.width.height.lessThanOrEqualTo(bottomView);