ios 自动布局库masonry的技巧分享1

masonry是对苹果原生的自动布局进行了封装,用block的方式让代码清楚明了。githuab地址:https://github.com/SnapKit/Masonry

我也是第一次写博客,写这篇博客目的让大家快速掌握masonry的精髓和技巧,快速学习并上手,少走弯路。

要点：

1.首先没有用自动布局的时候，用frame来设置控件如何显示，我们知道要让一个控件显示,我们是不是要设置UI控件的位置和大小才能正确的显示，所以自动布局也是这个思路的，

2.自动布局通过增加约束，和相互的约束来控制UI控件的显示。其实我们可以想苹果自动布局是通过约束转换成对应的frame来显示的，刚刚说了一个UI控件要正确的显示要设置位置和大小。

3.自动布局是以屏幕为基准这点很重要,还有要先把控件加到到父控件后，才增加约束。

进入主题，下面用代码来验证

1.要引入库: #import "Masonry.h"

2.masonry自动设置了view.translatesAutoresizingMaskIntoConstraints = NO的处理

3.masonry提供了对UIView扩展的几个方法:

mas_makeConstraints增加约束

mas_updateConstraints修改约束

mas_remakeConstraints删除约束

1.让一个UILabel在屏幕居中,这个用masonry就比较简单了，还有UILabel会自动计算大小，所以不需要设置大小.

    UILabel *lab=[UILabel new];
    lab.text=@"整个内容居中";
    [self.view addSubview:lab];
    [lab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
    }];

就是在self.view上居中,其实是取出self.view的在屏幕的中心点再给ullabel的，说了自动布局是以屏幕为准的。

2.距离顶部100，水平居中

UILabel *lab=[UILabel new];
    lab.text=@"整个内容居中";
    lab.backgroundColor=[UIColor greenColor];
    [self.view addSubview:lab];
    [lab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@100);
        make.centerX.equalTo(@0);
    }];

解释一下 @100的简写,@100相等于self.view.mas_top+100,也就是

make.top.equalTo(@100)等于make.top.equalTo(self.view).offset(100),

还有make.top.equalTo(self.view).offset(100)等于make.top.equalTo(self.view.mas_top).offset(100)

是根据上面的对其属性来决定的,例如:make.left对齐属性是left,所以self.view==self.view.mas_left

3.uilabel多行显示,距离顶部100,宽度是父控件的宽度

UILabel *lab=[UILabel new];
    lab.text=@"淡淡的记得记得记得记得淡淡的记得记得记得记得淡淡的记得记得记得记得淡淡的记得记得记得记得淡淡的记得记得记得记得淡淡的记得记得记得记得";
    lab.backgroundColor=[UIColor greenColor];
    lab.numberOfLines=0;
    [self.view addSubview:lab];
    [lab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(100);
        make.left.right.equalTo(@0);
    }];

这个高度会自动计算

现在  简单的总结一下,上面说的我们知道要让一个控件显示,我们是不是要设置UI控件的位置和大小才能正确的显示，自动布局也是这个思路。

第一个例子：我设置了位置,也就是中心点,因为是uilabel自动布局会自动调用sizeToFit来计算大小，所以我们需要设置位置就可以了。

第二个例子:我也是设置了位置，距离顶部top 100,水平居中,大小自动计算.

第三例子：我也设置了位置，距离顶部top 100，左边和右边是0，这么设置的原因的多行显示的时候，要告诉uilabel的宽度，才能计算高度一下,left,rigth等于0，相当于是父控件的左边界和右边界，也就知道了uilable的宽度是父控件的宽度。上面也说了@0的简写,都是一样的道理,例如:left,right等于@0,其实等于self.view.mas_left+0,self.view.right+0

再来一个例子：需要设置位置和大小的

要一个UIView在刚刚uilable的下面距离uilabel 20间隙,水平居中,大小200*50

UILabel *lab=[UILabel new];
    lab.text=@"淡淡的记得记得记得记得淡淡的记得记得记得记得淡淡的记得记得记得记得淡淡的记得记得记得记得淡淡的记得记得记得记得淡淡的记得记得记得记得";
    lab.backgroundColor=[UIColor greenColor];
    lab.numberOfLines=0;
    [self.view addSubview:lab];
    [lab mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(100);
        make.left.right.equalTo(@0);
    }];
    
    UIView *view=[UIView new];
    view.backgroundColor=[UIColor yellowColor];
    [self.view addSubview:view];
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(lab.mas_bottom).offset(20);
        make.centerX.equalTo(@0);
        make.size.mas_equalTo(CGSizeMake(200, 50));
    }];

上面的例子就有了大小,200*50,mas_equalTo是一个宏,是对cgsize的一个包装

最后整个小结一下:要让一个控件显示,我们是不是要设置UI控件的位置和大小才能正确的显示，自动布局也是这个思路,是以屏幕为准的要点。上面的例子说明这个道理,

也就是说在自动布局中，我们要设置对齐属性和大小，就能UI控件显示。

后面还有更多的介绍，请等待更新。