浅谈Autolayout之Masonry

来源：互联网发布：最新网络流行词2016 编辑：程序博客网时间：2024/05/17 17:56

随着iphone大屏时代的到来，ios开发中的界面适配变的不再容易，frame已经变的有点鸡肋。

Autolayout将成为主流，但系统原生的纯代码Autolayout代码太过繁琐，使用起来不是很方便，Masonry因此出现。Masonry是一个轻量级的对原生Autolayout再封装的第三方库，相对于原生的来说，代码量更少，更加直观。

使用方法很简单，把Masonry项目下载下来后，只要把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 *width;
@property (nonatomic, strong, readonly) MASConstraint *height;
@property (nonatomic, strong, readonly) MASConstraint *centerX;
@property (nonatomic, strong, readonly) MASConstraint *centerY;

分别对应（左，上，右，下，宽，高，横向中点，纵向中点）；

下面我们就来对比一下frame与Autolayout的不同，比如我们用frame确定位置

UIView * view = [[UIView alloc] init];

view.frame = CGRectMake(50, 100, 80, 40);

view.backgroundColor = [UIColor orangeColor];

[self.view addSubview:view];

与下面的代码效果是一样的

UIView * view = [[UIView alloc] init];

view.backgroundColor = [UIColor orangeColor];

[self.view addSubview:view];

Bself(bself);

[view mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(bself.view).with.offset(50);

make.top.equalTo(bself.view).with.offset(100);

make.width.mas_equalTo(@80);

make.height.mas_equalTo(@40);

}];

下面解释一下

//block里不能直接使用self,要用下面这个宏转换一下(#define Bself(weakSelf) __weak __typeof(&*self)weakSelf = self;)

Bself(bself);

//Autolayout用调用的block

[view mas_makeConstraints:^(MASConstraintMaker *make) {

//距self.view的左边50

make.left.equalTo(bself.view).with.offset(50);

//距self.voew的顶上100

make.top.equalTo(bself.view).with.offset(100);

//宽固定为80

make.width.mas_equalTo(@80);

//高固定为40

make.height.mas_equalTo(@40);

}];

Masonry是用block进行回调，添加约束有三个方法：

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
/*
mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错 
mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
*/
上面两行的约束以make开头，后接约束名称，接equalTo(),括号内为参照视图，一般为父视图或兄弟视图，with只是为了让语句更直观（其实不写也可以实现，有兴趣的朋友可以试试,记得不要把with和width写混了，会崩的），再接offset()，括号内为参数数值，比如第一句代码为距self.view的左边距50。

下面两行的约束是固定宽和高，同样以make开头，后接约束名称，mas_equalTo只是对其参数进行了一个BOX操作(装箱) MASBoxValue的定义具体可以看看源代码，括号内的数值前要加@。

效果图如下

下面我们再写一个，距self.view上下左右都是20的视图,代码如下

UIView * view2 = [[UIView alloc] init];

view2.backgroundColor = [UIColor blueColor];

[self.view addSubview:view2];

Bself(bself);

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(bself.view).with.offset(20);

make.bottom.equalTo(bself.view).with.offset(-20);

make.left.equalTo(bself.view).with.offset(20);

make.right.equalTo(bself.view).with.offset(-20);

等价于

make.edges.equalTo(bself.view).with.insets(UIEdgeInsetsMake(20, 20, 20, 20));

}];

记得右和下是负数，如果是正数的话就变成超出右边或下边20了。效果图如下

下面我们来写两个视图的，让两个长度为200的view水平居中且等高且等间隔排列间隔为20(自动计算其高度)，代码如下

UIView * view3 = [[UIView alloc] init];

view3.backgroundColor = [UIColor greenColor];

[view2 addSubview:view3];

UIView * view4 = [[UIView alloc] init];

view4.backgroundColor = [UIColor greenColor];

[view2 addSubview:view4];

[view3 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerX.equalTo(view2.mas_centerX);

make.top.equalTo(view2).with.offset(20);

make.bottom.equalTo(view4.mas_top).with.offset(-20);

make.width.mas_equalTo(@200);

make.height.equalTo(view4);

}];

[view4 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerX.equalTo(view2.mas_centerX);

make.top.equalTo(view4.mas_bottom).with.offset(20);

make.bottom.equalTo(view2).with.offset(-20);

make.width.mas_equalTo(@200);

make.height.equalTo(view3);

}];

效果如下

好了，加减运算就学到这里了，下面我们来学习下乘除吧,比如，更改上面代码两个约束的后两行

[view3 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerX.equalTo(view2.mas_centerX);

make.top.equalTo(view2).with.offset(20);

make.bottom.equalTo(view4.mas_top).with.offset(-20);

make.width.mas_equalTo(@200);

//高度是view4两倍

make.height.equalTo(view4).with.multipliedBy(2);

}];

[view4 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerX.equalTo(view2.mas_centerX);

make.top.equalTo(view4.mas_bottom).with.offset(20);

make.bottom.equalTo(view2).with.offset(-20);

make.width.mas_equalTo(@200);

//高度是view3的高度除以2

make.height.equalTo(view3).with.dividedBy(2);

}];

view3和view4的高度不再相等，而是view3是view4的双倍，效果如下

好了，Masonry的基础就讲到这了，有兴趣的朋友可多看看其他人的文档。

0 0