iOS 第三方布局工具Masonry

Masonry 是一个非常好的用来应对控件对屏幕适配的工具，比起苹果自身提供的函数非常的复杂，代码比较长。Masonry使用比较简单，代码符合人的常规逻辑，比较容易懂。下面是两个经常用到的案例，个人感觉这个工具比起在故事版里设置约束还要好用，

某些约束的实现方式不是唯一的，有很多其他的方式。

案例1：简单的添加一个控件设置和父控件的位置

<p class="p1"><span class="s1"> </span><span class="s2">UILabel</span><span class="s1"> * lbe_1 = [[</span><span class="s2">UILabel</span><span class="s1"> </span><span class="s3">alloc</span><span class="s1">]</span><span class="s3">init</span><span class="s1">];</span></p><p class="p1"><span class="s1">    lbe_1.</span><span class="s2">text</span><span class="s1">= </span><span class="s4">@"1"</span><span class="s1">;</span></p><p class="p2"><span class="s5">    lbe_1.</span><span class="s2">textAlignment</span><span class="s5">= </span><span class="s1">NSTextAlignmentCenter</span><span class="s5">;</span></p><p class="p3"><span class="s5">    lbe_1.</span><span class="s1">backgroundColor</span><span class="s5"> = [</span><span class="s1">UIColor</span><span class="s5"> </span><span class="s3">greenColor</span><span class="s5">];</span></p><p class="p1"><span class="s1">    [</span><span class="s6">self</span><span class="s1">.</span><span class="s2">view</span><span class="s1"> </span><span class="s3">addSubview</span><span class="s1">:lbe_1];</span></p><p class="p1"><span class="s1">    [lbe_1 </span><span class="s7">mas_makeConstraints</span><span class="s1">:^(</span><span class="s8">MASConstraintMaker</span><span class="s1"> *make) {</span></p><p class="p4"><span class="s1">        </span></p><p class="p4"><span class="s1">        </span></p><p class="p5"><span class="s9">        </span><span class="s10">//</span><span class="s1">下面的约束不注释有冲突，只是出于演示目的</span></p><p class="p4"><span class="s1">       </span></p><p class="p5"><span class="s9">        </span><span class="s10">//</span><span class="s1">这里设置距离父视图的上下左右的距离，都是</span><span class="s10">100</span><span class="s1">，</span></p><p class="p6"><span class="s5">        </span><span class="s1">//make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(100, 100, 100, 100));</span></p><p class="p4"><span class="s1">        </span></p><p class="p5"><span class="s9">        </span><span class="s10">//</span><span class="s1">也可以按照下面的方式逐个设置边，里面不能不用基本数据类型，否则报错</span></p><p class="p6"><span class="s1">//        make.top.equalTo(self.view).with.offset(10);</span></p><p class="p6"><span class="s1">//        make.left.equalTo(self.view).with.offset(10);</span></p><p class="p6"><span class="s1">//        make.bottom.equalTo(self.view).with.offset(-10);</span></p><p class="p6"><span class="s1">//        make.right.equalTo(self.view).with.offset(-10);</span></p><p class="p4"><span class="s1"></span>
</p><p class="p6"><span class="s5">        </span><span class="s1">//</span><span class="s11">设置</span><span class="s1">size</span><span class="s11">的大小</span><span class="s1">  </span><span class="s11">这里可以设置</span><span class="s1">size</span><span class="s11">约束</span></p><p class="p1"><span class="s1">         make.</span><span class="s8">size</span><span class="s1">.</span><span class="s12">mas_equalTo</span><span class="s1">(</span><span class="s3">CGSizeMake</span><span class="s1">(</span><span class="s13">100</span><span class="s1">, </span><span class="s13">100</span><span class="s1">));</span></p><p class="p6"><span class="s5">       </span><span class="s1">// make.center.mas_equalTo(CGPointMake(0, 0));//</span><span class="s11">设置中心点距离父控件中心距离的偏移量</span></p><p class="p4"><span class="s1">        </span></p><p class="p5"><span class="s9">        </span><span class="s10">//</span><span class="s1">设置中心位置和父视图的中心位置重合</span></p><p class="p6"><span class="s5">       </span><span class="s1">// make.center.mas_equalTo(self.view);//</span><span class="s11">这样写可以设置距离父控件中心对齐</span></p><p class="p4"><span class="s1">        </span></p><p class="p1"><span class="s1">        make.</span><span class="s8">centerX</span><span class="s1">.</span><span class="s7">equalTo</span><span class="s1">(</span><span class="s6">self</span><span class="s1">.</span><span class="s2">view</span><span class="s1">.</span><span class="s8">mas_centerX</span><span class="s1">).</span><span class="s7">with</span><span class="s1">.</span><span class="s7">offset</span><span class="s1">(-</span><span class="s13">50</span><span class="s1">);</span><span class="s14">//</span><span class="s15">父视图中心</span><span class="s14">x-50</span></p><p class="p4"><span class="s1">        </span></p><p class="p1"><span class="s1">        make.</span><span class="s8">centerY</span><span class="s1">.</span><span class="s7">equalTo</span><span class="s1">(</span><span class="s6">self</span><span class="s1">.</span><span class="s2">view</span><span class="s1">.</span><span class="s8">mas_centerY</span><span class="s1">).</span><span class="s7">with</span><span class="s1">.</span><span class="s7">offset</span><span class="s1">(</span><span class="s13">50</span><span class="s1">);</span><span class="s14">//</span><span class="s15">父视图中心</span><span class="s14">y+50</span></p><p class="p4"><span class="s1">        </span></p><p class="p1"><span class="s1">    }];</span></p>
           

案例2：处于同一父控件的子控件间的约束设置

int padding1 = 30;
    UIView * v2= [[UIView alloc]init];
    [self.view addSubview:v2];
    v2.backgroundColor = [UIColor redColor];
    UIView * v3 = [[UIView alloc]init];
    v3.backgroundColor = [UIColor greenColor];
    [self.view addSubview:v3];
    
    /**
    
     固定设置比例和控件比例设置大小
     */
    
    [v2 mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.centerY.equalTo(self.view.mas_centerY);
        make.left.equalTo(self.view.mas_left).with.offset(padding1);//距离父视图左边间距
        make.right.equalTo(v3.mas_left).with.offset(-padding1*2);//距离V3的边距
        make.height.mas_equalTo(@40);

    }];
    [v3 mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.baseline.equalTo(v2);
        make.left.equalTo(v2.mas_right).with.offset(padding1*2);
        make.height.equalTo(v2.mas_height).multipliedBy(0.5);
        make.right.equalTo(self.view.mas_right).with.offset(-padding1);
        make.width.equalTo(v2).multipliedBy(2);
    }];