Masonry简单使用

• 介绍
• 安装
• 使用
  • 居中显示视图
  • 设置视图并排
  • 多个视图间隔相同

 

介绍

Masonry源码

在其官网上也进行了很多的介绍,在下面会写出我自己的一些见解.如果使用过iOS中系统的NSLayoutConstraints已经知道非常麻烦

如下代码就是系统的约束

<code class="language-objectivec hljs" style="display: block; padding: 0.5em; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;"><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>

 

安装

1. 直接进入github进行源码下载
2. 使用CocoaPod进行下载

 

使用

在上面介绍的时候我们看到系统要创建一个试图,距离上下左右都是10的这样一个约束需要写上很多代码,然而现在是使用Masonry的效果

<code class="language-objectivec hljs" style="display: block; padding: 0.5em; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;"><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; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">[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; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;"><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; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;"><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; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;"><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; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;">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; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: initial initial; background-repeat: initial initial;"><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>

效果图:

Posted in iOS

Post navigation

← code-highlight

One thought on “Masonry简单使用”

1. 一名来自xxx公司的iOS开发者说道：
   2015年4月30日 16:54

   博主，给你合并下多个视图相隔相同的方法：
   __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];
   }

   回复
   
   
   转载：http://archerzz.ninja/ios/masonry-code.html