Masonry简单使用
介绍
在其官网上也进行了很多的介绍,在下面会写出我自己的一些见解.如果使用过iOS中系统的NSLayoutConstraints已经知道非常麻烦
如下代码就是系统的约束
<code class="language-objectivec hljs" style="display: block; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);"><span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> *superview = <span class="hljs-keyword" style="color: rgb(0, 0, 136);">self</span>;
<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> *view1 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> alloc] init];
view1<span class="hljs-variable" style="color: rgb(102, 0, 102);">.translatesAutoresizingMaskIntoConstraints</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102);">NO</span>;
view1<span class="hljs-variable" style="color: rgb(102, 0, 102);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIColor</span> greenColor];
[superview addSubview:view1];
<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIEdgeInsets</span> padding = <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIEdgeInsetsMake</span>(<span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>);
[superview addConstraints:@[
<span class="hljs-comment" style="color: rgb(136, 0, 0);">//view1 constraints</span>
[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutConstraint</span> constraintWithItem:view1
attribute:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutAttributeTop</span>
relatedBy:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutRelationEqual</span>
toItem:superview
attribute:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutAttributeTop</span>
multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102);">1.0</span>
constant:padding<span class="hljs-variable" style="color: rgb(102, 0, 102);">.top</span>],
[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutConstraint</span> constraintWithItem:view1
attribute:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutAttributeLeft</span>
relatedBy:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutRelationEqual</span>
toItem:superview
attribute:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutAttributeLeft</span>
multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102);">1.0</span>
constant:padding<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span>],
[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutConstraint</span> constraintWithItem:view1
attribute:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutAttributeBottom</span>
relatedBy:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutRelationEqual</span>
toItem:superview
attribute:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutAttributeBottom</span>
multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102);">1.0</span>
constant:-padding<span class="hljs-variable" style="color: rgb(102, 0, 102);">.bottom</span>],
[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutConstraint</span> constraintWithItem:view1
attribute:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutAttributeRight</span>
relatedBy:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutRelationEqual</span>
toItem:superview
attribute:<span class="hljs-built_in" style="color: rgb(102, 0, 102);">NSLayoutAttributeRight</span>
multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102);">1</span>
constant:-padding<span class="hljs-variable" style="color: rgb(102, 0, 102);">.right</span>],
]];</code>
安装
- 直接进入github进行源码下载
- 使用CocoaPod进行下载
使用
在上面介绍的时候我们看到系统要创建一个试图,距离上下左右都是10的这样一个约束需要写上很多代码,然而现在是使用Masonry的效果
<code class="language-objectivec hljs" style="display: block; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);"><span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIEdgeInsets</span> padding = <span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIEdgeInsetsMake</span>(<span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>, <span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.top</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(superview<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_top</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(padding<span class="hljs-variable" style="color: rgb(102, 0, 102);">.top</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0);">//with is an optional semantic filler</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(superview<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_left</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(padding<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span>);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.bottom</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(superview<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_bottom</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(-padding<span class="hljs-variable" style="color: rgb(102, 0, 102);">.bottom</span>);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.right</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(superview<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_right</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(-padding<span class="hljs-variable" style="color: rgb(102, 0, 102);">.right</span>);
}];
</code>
甚至我们这样写得更加简洁
<code class="language-objectivec hljs" style="display: block; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);">[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.edges</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(superview)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.insets</span>(padding);
}];</code>
接下来我们来观看下Masonry中的一些常用属性
<code class="language-objectivec hljs" style="display: block; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);"><span class="hljs-comment" style="color: rgb(136, 0, 0);">// 左侧</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *left; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 顶部</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *top; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 右侧</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *right; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 底部</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *bottom; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 首部</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *leading; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 尾部</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *trailing; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 宽</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *width; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 高</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *height; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 中心点x</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *centerX; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 中心点y</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *centerY; <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 文本基线</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136);">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136);">nonatomic</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">strong</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136);">readonly</span>) MASConstraint *baseline;</code>
居中显示视图
<code class="language-objectivec hljs" style="display: block; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);"><span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> *myView = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> alloc] init];
myView<span class="hljs-variable" style="color: rgb(102, 0, 102);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIColor</span> blueColor];
[<span class="hljs-keyword" style="color: rgb(0, 0, 136);">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.view</span> addSubview:myView];
[myView mas_makeConstraints:^(MASConstraintMaker *make) {
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置当前center和父视图的center一样</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.center</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136);">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.view</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置当前视图的大小</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.size</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(<span class="hljs-built_in" style="color: rgb(102, 0, 102);">CGSizeMake</span>(<span class="hljs-number" style="color: rgb(0, 102, 102);">300</span>, <span class="hljs-number" style="color: rgb(0, 102, 102);">300</span>));
}];</code>
效果图
可以看到我们已经创建出一个位置居中,并且视图大小为300×300
设置视图并排
<code class="language-objectivec hljs" style="display: block; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);"><span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> *view1 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> alloc] init];
view1<span class="hljs-variable" style="color: rgb(102, 0, 102);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIColor</span> redColor];
[myView addSubview:view1];
<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> *view2 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> alloc] init];
view2<span class="hljs-variable" style="color: rgb(102, 0, 102);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIColor</span> yellowColor];
[myView addSubview:view2];
<span class="hljs-keyword" style="color: rgb(0, 0, 136);">int</span> padding = <span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>;
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置其位于父视图的Y的中心位置</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.centerY</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(myView<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_centerY</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置其左侧和父视图偏移10个像素</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(myView)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(padding);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置其右侧和view2偏移10个像素</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.right</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(view2<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_left</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(-padding);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置高度</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.height</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(@<span class="hljs-number" style="color: rgb(0, 102, 102);">120</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置其宽度</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.width</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(view2);
}];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.centerY</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(myView<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_centerY</span>);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(view1<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_right</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(padding);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.right</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(myView)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(-padding);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.height</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(view1);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.width</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(view1);
}];</code>
效果图:
提醒一下,以下代码等价
<code class="language-objectivec hljs" style="display: block; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);">make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(myView)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(padding); <span class="hljs-comment" style="color: rgb(136, 0, 0);">// 等价于</span> make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(myView<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_left</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(padding);</code>
也就是说默认情况下括号里面只写了视图的时候,其自动帮你添加当前masxxx(代表前面你需要设置的约束的位置).比如上面两行代码设置的make.left,当括号里面只写了myView的时候,会自动追加为myView.mas_left。
多个视图间隔相同
注意下面设置宽度的时候是传递的数组,这样才能让多个视图进行等距离显示
<code class="language-objectivec hljs" style="display: block; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);">
<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> *view1 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> alloc] init];
view1<span class="hljs-variable" style="color: rgb(102, 0, 102);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIColor</span> redColor];
[myView addSubview:view1];
<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> *view2 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> alloc] init];
view2<span class="hljs-variable" style="color: rgb(102, 0, 102);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIColor</span> yellowColor];
[myView addSubview:view2];
<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> *view3 = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIView</span> alloc] init];
view3<span class="hljs-variable" style="color: rgb(102, 0, 102);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102);">UIColor</span> greenColor];
[<span class="hljs-keyword" style="color: rgb(0, 0, 136);">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.view</span> addSubview:view3];
<span class="hljs-keyword" style="color: rgb(0, 0, 136);">int</span> padding = <span class="hljs-number" style="color: rgb(0, 102, 102);">10</span>;
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置中心点</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.centerY</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(myView);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置左侧距离父视图10</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(myView)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(padding);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置右侧距离和view2的左侧相隔10</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.right</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(view2<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_left</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(-padding);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 设置高度</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.height</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(@<span class="hljs-number" style="color: rgb(0, 102, 102);">150</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0);">// 宽度设置和view2以及view3相同</span>
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.width</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(@[view2, view3]);
}];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.centerY</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(myView);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.height</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(view1);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.width</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(@[view1, view3]);
}];
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.centerY</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(myView);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.left</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(view2<span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_right</span>)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(padding);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.right</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(myView)<span class="hljs-variable" style="color: rgb(102, 0, 102);">.with</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.offset</span>(-padding);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.height</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.mas_equalTo</span>(view1);
make<span class="hljs-variable" style="color: rgb(102, 0, 102);">.width</span><span class="hljs-variable" style="color: rgb(102, 0, 102);">.equalTo</span>(@[view2, view1]);
}];
</code>
效果图:
591
到【灌水乐园】发言
博主，给你合并下多个视图相隔相同的方法：
__weak typeof(self) weakSelf = self;
UIView * tempView = [[UIView alloc]init];
NSInteger count = 10;//设置一排view的个数
NSInteger margin = 10;//设置相隔距离
NSInteger height = 50;//设置view的高度
for (int i = 0; i < count; i ++) {
UIView * view = [[UIView alloc]init];
view.backgroundColor = [UIColor brownColor];
[self.view addSubview:view];
if (i == 0) {
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.view).offset(margin);
make.centerY.equalTo(weakSelf.view);
make.height.mas_equalTo(height);
}];
}
else if (i == count – 1){
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(weakSelf.view).offset(-margin);
make.left.equalTo(tempView.mas_right).offset(margin);
make.centerY.equalTo(tempView);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
}];
}
else{
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(tempView.mas_right).offset(margin);
make.centerY.equalTo(tempView);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
}];
}
tempView = view;
[view layoutIfNeeded];
}