在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);
}];
最后的效果是这样的
恩。简单的使用大概就这样吧,以后有什么心得体验我会更新哒,请大家多多关照呦!
最后分享一则幽默小段子把,当做彩蛋,嘿嘿
小时候看见别人拎兔子的两只耳朵,我问麻麻,这样兔子不会疼么?妈妈告诉我,兔子的两只耳朵长那么长就是为了方便人拎的。这句话一直印在我懵懂的脑海里,知道有一天,我看见了一头驴!那天.........我差点被踢死