【iOS】—— Masonry

Masonry

在使用Masonry前，一定要先完成老六cocoapods的安装，相关博客：cocoapods安装

在安装过程中会遇到特别多奇奇怪怪的bug，其中大部分bug估计在网上搜也无法解决，建议把下载的东西全部删掉，重新下载，并且建议在早上下载，成功概率大大提升。

使用masonry

在安装完成cocoapods之后，我们来看怎样使用masonry：

1.首先打开终端
在终端输入

cd 

然后将要安装masonry的项目文件夹拖入

在终端输入：

touch PodFile

此时你的项目文件夹多了一个文件：

打开此文件，在文件里输入：

platform :ios, '7.0'
target 'Masonry测试' do
pod 'Masonry'
end

其中target为项目名称
然后保存关闭文件，在终端输入pod install，此时等终端运行完成项目中出现如下图几个文件证明安装完成：

Masonry基本使用

mas_makeConstraints()    添加约束
mas_remakeConstraints()  移除之前的约束，重新添加新的约束
mas_updateConstraints()  更新约束，写哪条更新哪条，其他约束不变

equalTo()       参数是对象类型，一般是视图对象或者mas_width这样的坐标系对象
mas_equalTo()   和上面功能相同，参数可以传递基础数据类型对象，可以理解为比上面的API更强大

width()         用来表示宽度，例如代表view的宽度
mas_width()     用来获取宽度的值。和上面的区别在于，一个代表某个坐标系对象，一个用来获取坐标系对象的值

1.尺寸：width、height、size
2.边界：left、leading、right、trailing、top、bottom
3.中心点：center、centerX、centerY
4.边界：edges
5.偏移量：offset、insets、sizeOffset、centerOffset
6.priority()约束优先级（0~1000）

我们来看项目中代码的完成：

    _view1 = [[UIView alloc] initWithFrame:CGRectZero];
    _view1.backgroundColor = [UIColor blackColor];
    [self.view addSubview:_view1];
    
    _view2 = [[UIView alloc] initWithFrame:CGRectZero];
    _view2.backgroundColor = [UIColor yellowColor];
    [_view1 addSubview:_view2];
    
    _view3 = [[UIView alloc] initWithFrame:CGRectZero];
    _view3.backgroundColor = [UIColor greenColor];
    [_view2 addSubview:_view3];

首先完成三个view的初始化，让其相互嵌套，在这里需要注意的是Masonry的约束添加之前就要完成addsubview，否则会报错。

    UIButton* button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button setTitle:@"移动" forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:30];
    [button addTarget:self action:@selector(press) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];

然后完成一个button的初始化，控制最底部父亲视图的改变。

接下来是给四个控件添加约束：

    [_view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        //规定当前视图距离父视图顶端的距离
        make.top.mas_offset(150);
        //规定当前视图距离父视图左端的距离
        make.left.mas_equalTo(70);
        //规定当前视图自身的宽度
        make.width.mas_offset(250);
        //规定当前视图自身的高度
        make.height.mas_equalTo(250);

    }];
    [_view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        //规定当前视图距离父视图顶端的距离
        make.top.mas_offset(25);
        //规定当前视图距离父视图左端的距离
        make.left.mas_equalTo(25);
        //规定当前视图自身的宽度
        make.width.mas_offset(200);
        //规定当前视图自身的高度
        make.height.mas_equalTo(200);
        
    }];
    [_view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        //规定当前视图距离父视图顶端的距离
        make.top.mas_offset(25);
        //规定当前视图距离父视图左端的距离
        make.left.mas_equalTo(25);
        //规定当前视图自身的宽度
        make.width.mas_offset(140);
        //规定当前视图自身的高度
        make.height.mas_equalTo(140);
        
    }];
    [button mas_makeConstraints:^(MASConstraintMaker *make) {
        //规定当前视图距离屏幕顶端的距离
        make.top.mas_offset(40);
        //规定当前视图距离屏幕左端的距离
        make.left.mas_equalTo(40);
        //规定当前视图自身的宽度
        make.width.mas_offset(90);
        //规定当前视图自身的高度
        make.height.mas_equalTo(90);
        
    }];
}

完成button事件函数用于对父视图位置改变：

- (void)press {
    [_view1 mas_updateConstraints:^(MASConstraintMaker *make) {
        //规定当前视图距离父视图顶端的距离
        make.top.mas_offset(250);
        //规定当前视图距离父视图左端的距离
        make.left.mas_equalTo(150);
        //规定当前视图自身的宽度
        make.width.mas_offset(250);
        //规定当前视图自身的高度
        make.height.mas_equalTo(250);
        
    }];
}

效果如下：