一、导入 Masonry 框架
- 使用
Cocoapods来导入框架，在使用到该框架的文件中添加主头文件:import <Masonry/Masonry.h>，可以参考这篇文章来配置使用Cocoapods: Cocoapods的安装和使用 - 使用直接拖拽的方式拉入框架文件夹，在使用到该框架的文件中添加主头文件：
#import "Masonry.h"
。
二、Masonry 约束添加步骤
- 自定义
UIview。 - 将自定义的
UIview添加到父视图上。 - 添加约束。
三、Masonry的使用
- 重点
-
mas_equalTo和equalTo区别：前者比后者多了类型转换操作，支持CGSizeCGPointNSNumberUIEdgeinsets。mas_equalTo是equalTo的封装，equalTo适用于基本数据类型，而mas_equaalTo适用于类似UIEdgeInsetsMake等复杂类型，基本上它可以替换equalTo。 - 上左为正，下右为负，其原理由坐标而来。以视图坐标左上为原点，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
