Masonry 入门

一、导入 Masonry 框架

1. 使用 Cocoapods 来导入框架，在使用到该框架的文件中添加主头文件: import <Masonry/Masonry.h>，可以参考这篇文章来配置使用 Cocoapods : Cocoapods的安装和使用
2. 使用直接拖拽的方式拉入框架文件夹，在使用到该框架的文件中添加主头文件：#import "Masonry.h"
   。

---

二、Masonry 约束添加步骤

1. 自定义 UIview。
2. 将自定义的 UIview 添加到父视图上。
3. 添加约束。

---

三、Masonry的使用

• 重点

1. mas_equalTo和equalTo区别：前者比后者多了类型转换操作，支持CGSize CGPoint NSNumber UIEdgeinsets。mas_equalTo是equalTo的封装，equalTo适用于基本数据类型，而mas_equaalTo适用于类似UIEdgeInsetsMake等复杂类型，基本上它可以替换equalTo。
2. 上左为正，下右为负，其原理由坐标而来。以视图坐标左上为原点，X向右为正，Y向下为正，反则为负。

• 基本使用1.

UIView *SView = [UIView new];
SView.backgroundColor = [UIColor cyanColor];
// 在做自动布局之前,一定要先将view添加到superview上.
[self.view addSubview:SView];
// 将所需的约束添加到block中.
[SView mas_makeConstraints:^(MASConstraintMaker *make) {
    // 将 sv 居中于 self.view.
    make.center.equalTo(self.view);
    // 将 sv 的 size 设置成(300,300).
    make.size.mas_equalTo(CGSizeMake(200,200));
}];

/// 我们现在创建一个 view(v) 略小于其 superView(SView), 边距为10px.
UIView *v = [UIView new];
v.backgroundColor = [UIColor orangeColor];
[SView addSubview:v];
[v mas_makeConstraints:^(MASConstraintMaker *make) {
    
    /// 以下写法都是等价的.
    
    // 写法1. (加 with 只是增加代码的可读性,不加也无影响).
    make.edges.equalTo(SView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    
    // 写法2. (同理,加 and 只是增加代码的可读性).
    // make.top.left.bottom.and.right.equalTo(SView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    
    // 写法3.
    /*
     make.center.equalTo(self);
     make.edges.mas_offset(UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f));
     */
    
    // 写法4.
    /*
     make.top.equalTo(SView).with.offset(10);
     make.left.equalTo(SView).with.offset(10);
     make.bottom.equalTo(SView).with.offset(-10);
     make.right.equalTo(SView).with.offset(-10);
     */
    
}];
//    - (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 则会清除之前的所有约束 仅保留最新的约束
 三种函数善加利用 就可以应对各种情况了
 */

效果展示.

基本使用1.png

• 基本使用2.

UIView * thirdCellView = [[UIView alloc] init];
thirdCellView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:thirdCellView];

UIView *line = [[UIView alloc] init];
line.backgroundColor = [UIColor grayColor];

UIView *line2 = [[UIView alloc] init];
line2.backgroundColor = [UIColor grayColor];

UIButton *firstButton = [UIButton buttonWithType:UIButtonTypeCustom];
[firstButton setImage:[UIImage imageNamed:@"星星"] forState:UIControlStateNormal];
[firstButton setTitle:@" first" forState:UIControlStateNormal];
[firstButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[firstButton.titleLabel setFont:[UIFont systemFontOfSize:13]];
[thirdCellView addSubview:firstButton];
[thirdCellView addSubview:line];

UIButton *secondButton = [UIButton buttonWithType:UIButtonTypeCustom];
[secondButton setImage:[UIImage imageNamed:@"星星"] forState:UIControlStateNormal];
[secondButton setTitle:@" second" forState:UIControlStateNormal];
[secondButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[secondButton.titleLabel setFont:[UIFont systemFontOfSize:13]];
[thirdCellView addSubview:secondButton];
[thirdCellView addSubview:line2];

UIButton *thirdButton = [UIButton buttonWithType:UIButtonTypeCustom];
[thirdButton setImage:[UIImage imageNamed:@"星星"] forState:UIControlStateNormal];
[thirdButton setTitle:@" third" forState:UIControlStateNormal];
[thirdButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[thirdButton.titleLabel setFont:[UIFont systemFontOfSize:13]];
[thirdCellView addSubview:thirdButton];

[thirdCellView mas_makeConstraints:^(MASConstraintMaker *make) {
    //居中于 self.view
    make.center.equalTo(self.view);
    //将size设置成(屏幕宽,60)
    make.size.mas_equalTo(CGSizeMake(self.view.bounds.size.width, 60));
}];

[firstButton mas_makeConstraints:^(MASConstraintMaker *make) {
    // firstButton 的顶部位置等于 thirdCellView 的顶部位置.
    make.top.equalTo(thirdCellView);
    // firstButton 居中于 thirdCellView 的中间Y（通俗点理解是 firstButton 的高度的中间位置等于 thirdCellView 的高度的中间位置）.
    make.centerY.equalTo(thirdCellView);
    // firstButton 的宽度是 thirdCellView 宽度的0.3倍.（3分之1）
    make.width.equalTo(thirdCellView).multipliedBy(0.333f);
}];
[line mas_makeConstraints:^(MASConstraintMaker *make) {
    // line 的左边位置等于 firstButton 的右边位置，并设置距离-0.5px（也就是 line 的左边 距离 firstButton 的右边 0.5px）.
    make.left.equalTo(firstButton.mas_right).offset(-0.5f);
    // line 的顶部位置等于 thirdCellView 的顶部位置，并设置距离12px.
    make.top.equalTo(thirdCellView).offset(12);
    // line 的底部位置等于 thirdCellView 的底部位置，并设置距离-12px（也就是 line 的底部 距离 thirdCellView 的底部 12px）.
    make.bottom.equalTo(thirdCellView).offset(-12);
    // lind 的宽度为0.5px.
    make.width.mas_equalTo(0.5f);
}];
[secondButton mas_makeConstraints:^(MASConstraintMaker *make) {
    // secondButton 的左边位置等于 firstButton 的右边位置.
    make.left.equalTo(firstButton.mas_right);
    // secondButton 的顶部位置等于 thirdCellView 的顶部位置.
    make.top.equalTo(thirdCellView);
    // secondButton 的中间 Y 等于 thirdCellView 的.
    make.centerY.equalTo(thirdCellView);
    // secondButton 的宽度等于 firstButton 的.
    make.width.mas_equalTo(firstButton);
}];
[line2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(secondButton.mas_right).offset(-0.5f);
    make.top.equalTo(thirdCellView).offset(12);
    make.bottom.equalTo(thirdCellView).offset(-12);
    make.width.mas_equalTo(0.5f);
}];
[thirdButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(secondButton.mas_right);
    make.top.equalTo(thirdCellView);
    make.centerY.equalTo(thirdCellView);
    make.width.mas_equalTo(firstButton);
}];

效果展示.

基本使用2.png