Masonry简单的使用咧

在iOS6/Xcode4开始，苹果开始提供AutoLayout-自动布局机制，刚出来时肯定有人对它不屑一顾，因为iPhone不想Android机尺寸多变，用frame完全可以轻松地解决适配等问题，但随着iPhone6、iPhone6s以及iPhone6sp的出现，不同尺寸不同分辨率的iPhone越来越多，frame布局方式的工作量也必然会越来越重，所以苹果提供的AutoLayout就派上用场了,但素，对于我们这种纯代码的人来说，AutoLayout的VFL编码风格十分诡异，看起来甚是蛋疼（至少我是这样的），所以想用它甚是苦恼，所以当masonry横空出世之后，以其链式语法使得AutoLayout变得简单起来。

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

masonry的核心语法：

[view mas_makeConstraints:^(MASConstraintMaker *make) {
        //view的中心和self.view重合
        make.center.mas_equalTo(self.view);
        //view的size
        make.size.mas_equalTo(CGSizeMake(350, 350));
    }];

使用block块，把view给AutoLayout好了，非常的easy

来让我们看一看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

1居中显示一个距离上下左右边框为10的一个view

UIView *view1 = [UIView new];
    view1.backgroundColor = [UIColor blackColor];
    [self.view addSubview:view1];
    //在masonry中，被参照的控件为原点，做坐标轴
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {

<span style="white-space:pre">	</span>//使view1得中心与self.view的中心重合
        make.center.mas_equalTo(view);

<span style="white-space:pre">	</span>//view1左、上边框距离self.view左、上边框的距离为10pt
        make.left.and.top.mas_equalTo(10);

<span style="white-space:pre">	</span>//view1右边框 和下边框距离self.view的右、下边框的距离为-10pt
        make.right.and.bottom.mas_equalTo(-10);
        //上一句代码也等同于 make.left.and.right.and.top.and.bottom.equalTo(view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
        
    }];

效果图就是酱紫啦

下面我们在上面填两个小的view 使他们 并列显示在view1 的中间 并且间距为10

先定义两个view

UIView *view2 = [UIView new];
    view2.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:view2];
    
    UIView *view3 = [UIView new];
    view3.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:view3];

然后给view2添加约束

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        //使view2得Y轴的中心与view1Y轴的中心重合
        make.centerY.mas_equalTo(view1.mas_centerY);
        //view2的左边框与view1的左边框的距离为10pt
        make.left.mas_equalTo(view1.mas_left).with.mas_offset(10);
        //view2的右边框与view3的左边框的距离为-10pt，也就是说view3的左边框与view2的右边框的距离为10pt
        make.right.mas_equalTo(view3.mas_left).with.mas_offset(-10);
        //view2的高度为150pt
        make.height.mas_equalTo(150);
        //view2的宽度等于view3的宽度
        make.width.equalTo(view3);
    }];

再给view3添加约束

[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        //使view3得Y轴的中心与view1Y轴的中心重合
        make.centerY.mas_equalTo(view1.mas_centerY);
        //view3的左边框与view2的右边框的距离为10pt，因为在view2 中对view3的左边框做出的约束，所以这句话也可以不用加
//        make.left.mas_equalTo(view2.mas_right).with.mas_offset(10);
        //view3的右边框与view1的右边框的距离为-10pt
        make.right.mas_equalTo(view1.mas_right).with.mas_offset(-10);
        //view3的高度为150pt
        make.height.mas_equalTo(150);
        //view3的宽度等于view3的宽度，也可以不写 0.0
//        make.width.equalTo(view2);
    }];

最后的效果是这样的

恩。简单的使用大概就这样吧，以后有什么心得体验我会更新哒，请大家多多关照呦！

最后分享一则幽默小段子把，当做彩蛋，嘿嘿

小时候看见别人拎兔子的两只耳朵，我问麻麻，这样兔子不会疼么？妈妈告诉我，兔子的两只耳朵长那么长就是为了方便人拎的。这句话一直印在我懵懂的脑海里，知道有一天，我看见了一头驴！那天.........我差点被踢死