接上篇，本篇继续对Masonry 进行学习，接上篇示例：
(6)Masonry 布局实现iOS 计算器
- (void)exp4 {
WS(weakSelf);
// 申明区域，displayView 是显示布局，keyboardView 是键盘区域
UIView *displayView = [UIView new]; // 创建并添加 显示区域
[displayView setBackgroundColor:[UIColor blackColor]];
[self.view addSubview:displayView];
UIView *keyboardView = [UIView new];
[self.view addSubview:keyboardView]; // 添加键盘区域
// 先按1：3分割 displayView (显示结果区域)和keyboardView (键盘区域)
[displayView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(weakSelf.view.mas_top);
make.left.and.right.equalTo(weakSelf.view); // 顶部和左右 和self.view 相等
make.height.equalTo(keyboardView).multipliedBy(0.3f); // displayView 的高度是 keyboardView 的高度乘以 0.3 keyboardView 的高度是displayView 高度的三倍
}];
[keyboardView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(displayView.mas_bottom); // 键盘区域的top 紧接着显示结果区域的bottom
make.bottom.equalTo(weakSelf.view.mas_bottom); // 键盘区域的底部等于self.view 的底部
make.left.and.right.equalTo(weakSelf.view); // 左右相等
}];
// 设置显示位置的数字为0
UILabel *displayNum = [[UILabel alloc] init];
[displayView addSubview:displayNum];
displayNum.text = @"";
displayNum.font = [UIFont fontWithName:@"HeiTi SC" size:]; // 设置字体 @"HeiTi SC"
displayNum.textColor = [UIColor whiteColor];
displayNum.textAlignment = NSTextAlignmentRight;
[displayNum mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(displayView).with.offset(-); // 左和右各缩进 10
make.bottom.equalTo(displayView).with.offset(-); // 底部也缩进 10 // label 的高度能根据label 的内容自动适应高度 只要确定一个底部或者顶部就能确定label 的约束 label 的宽度要确定才能确定高度
}];
// 定义键盘键名称，？ 号代表合并的单元格
NSArray *keys = @[@"AC", @"+/-", @"%", @"÷"
, @"", @"", @"", @"x"
, @"", @"", @"", @"-"
, @"", @"", @"", @"+"
, @"", @"?", @".", @"="];
int indexOfKeys = ;
for (NSString *key in keys) {
// 循环所有键
indexOfKeys++;
int rowNum = indexOfKeys % == ? indexOfKeys / : indexOfKeys / + ; // 求各个key 的行和列 注意是从 1 开始的 求行的时候， 先对 4 取余数， 如果是 0 的话正好是 4 的倍数 ，那就是最后一列的key indexOfKeys 这个时候是 4 或 8 或 12 或 16 或 20 ， 这个时候取 indexOfKeys 的商正好是key 所在的行 ，其他的同理
int colNum = indexOfKeys % == ? : indexOfKeys % ;
NSLog(@"index is: %d and row: %d, col: %d", indexOfKeys, rowNum, colNum);
// 键样式
UIButton *keyView = [UIButton buttonWithType:UIButtonTypeCustom];
[keyboardView addSubview:keyView];
[keyView setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[keyView setTitle:key forState:UIControlStateNormal];
[keyView.layer setBorderWidth:];
[keyView.layer setBorderColor:[UIColor blackColor].CGColor];
[keyView.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldItalicMT" size:]]; // 设置字体 @"Arial-BoldItalicMT"
// 键约束
[keyView mas_makeConstraints:^(MASConstraintMaker *make) {
// 处理 0 合并单元格
if ([key isEqualToString:@""] || [key isEqualToString:@"?"]) {
if ([key isEqualToString:@""]) {
[keyView mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(keyboardView.mas_height).with.multipliedBy(.2f); // 高度是keyboardView 的高度的五分之一
make.width.equalTo(keyboardView.mas_width).multipliedBy(.); // 宽度是keyboardView 的宽度的二分之一
make.left.equalTo(keyboardView.mas_left); // 左边相等
make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.9f); // 这个baseline 没有看太懂是什么意思
}];
} if ([key isEqualToString:@"?"]) { // 如果是问号的话直接被移除了
[keyView removeFromSuperview];
}
}
// 正常的单元格
else {
make.width.equalTo(keyboardView.mas_width).with.multipliedBy(.25f); // 正常的单元格的话 宽度是 keyboardView 的宽度的四分之一
make.height.equalTo(keyboardView.mas_height).with.multipliedBy(.2f); // 高度是keyboardView 的高度的五分之一
// 按照行和列添加约束，这里添加行约束
switch (rowNum) {
case :
{
make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.1f);
keyView.backgroundColor = [UIColor colorWithRed: green: blue: alpha:];
}
break;
case :
{
make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.3f);
}
break;
case :
{
make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.5f);
}
break;
case :
{
make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.7f);
}
break;
case :
{
make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.9f);
}
break;
default:
break;
}
switch (colNum) {
case :
{
make.left.equalTo(keyboardView.mas_left);
}
break;
case :
{
make.right.equalTo(keyboardView.mas_centerX);
}
break;
case :
{
make.left.equalTo(keyboardView.mas_centerX);
}
break;
case :
{
make.right.equalTo(keyboardView.mas_right);
[keyView setBackgroundColor:[UIColor colorWithRed: green: blue: alpha:]];
}
break;
default:
break;
}
}
}];
}
}
(7)基础设计页面
- (void)HYB {
UIView *greenView = UIView.new;
greenView.backgroundColor = UIColor.greenColor;
greenView.layer.borderColor = UIColor.blackColor.CGColor;
greenView.layer.borderWidth = ;
[self.view addSubview:greenView];
UIView *redView = UIView.new;
redView.backgroundColor = UIColor.redColor;
redView.layer.borderColor = UIColor.blackColor.CGColor;
redView.layer.borderWidth = ;
[self.view addSubview:redView];
UIView *blueView = UIView.new;
blueView.backgroundColor = UIColor.blueColor;
blueView.layer.borderColor = UIColor.blackColor.CGColor;
blueView.layer.borderWidth = ;
[self.view addSubview:blueView];
// 使三个控件等高
CGFloat padding = ;
[greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(padding);
make.left.mas_equalTo(padding);
make.right.mas_equalTo(redView.mas_left).offset(-padding);
make.bottom.mas_equalTo(blueView.mas_top).offset(-padding);
// 三个控件等高
make.height.mas_equalTo(@[redView, blueView]);
// 红绿这两个控件等宽
make.width.mas_equalTo(redView);
}];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.height.bottom.mas_equalTo(greenView);
make.right.mas_equalTo(-padding);
make.left.mas_equalTo(greenView.mas_right).offset(padding);
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(greenView);
make.bottom.mas_equalTo(-padding);
make.left.mas_equalTo(padding);
make.right.mas_equalTo(-padding);
}];
}
约束使用链式方式，使用方法很简单，看起来像一句话。
看这句话：make.top.height.bottom.mas_equalTo(greenView)，意思是：使我的顶部、高度和底部都与greenView的顶部、高度和底部相等。因此，只要greenView的约束添加好了，那么redView的顶部、高度和底部也就自动计算出来了。
大多时候，我们并不会将一句话完整地写出来，而是使用简写的方式。
如：make.right.mas_equalTo(-padding);
其完整的写法为：
make.right.mas_equalTo(bludView.superView.mas_right).offset(-padding);
当我们是要与父控件相对约束时，可以省略掉父视图。注意，并不是什么时候都可以省略，只有约束是同样的才可以省略。比如，约束都是right才可以。如果是一个left一个是right，那么就不能省略了。当然如果是两个不同的控件也是不能省略的。
(8)动画的形式更新约束(Masonry 以动画的形式更新约束，初始一个很小的按钮，点击就不断放大，最大就放大到全屏幕)
#import "ViewController.h"
#import "Masonry.h" #define WS(weakSelf) __weak __typeof(&*self) weakSelf = self; @interface ViewController () @property(nonatomic, strong) UIButton *growingButton;
@property(nonatomic, assign) CGFloat scacle; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// 动画更新约束
WS(weakSelf);
self.growingButton = [UIButton buttonWithType:UIButtonTypeSystem];
[self.growingButton setTitle:@"点我放大" forState:UIControlStateNormal];
self.growingButton.layer.borderColor = UIColor.greenColor.CGColor;
self.growingButton.layer.borderWidth = ;
[self.growingButton addTarget:self action:@selector(onGrowButtonTaped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.growingButton]; self.scacle = 1.0; [self.growingButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(weakSelf.view);
// 初始宽、高为100，优先级最低
make.width.height.mas_equalTo( * weakSelf.scacle).priorityLow();
// 最大放大到整个View
make.width.height.lessThanOrEqualTo(weakSelf.view);
}];
} #pragma mark - updateViewConstraints
- (void)updateViewConstraints {
WS(weakSelf);
[self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(weakSelf.view);
// 初始宽高为100 优先级最低
make.width.height.mas_equalTo( * weakSelf.scacle).priorityLow();
// 最大放大到整个View
make.width.height.lessThanOrEqualTo(weakSelf.view);
}]; [super updateViewConstraints];
} - (void)onGrowButtonTaped:(UIButton *)sender {
WS(weakSelf);
self.scacle += 0.5; // 一次增加 0.5 倍
// 告诉self.view 约束需要更新
[self.view setNeedsUpdateConstraints];
// 调用此方法告诉self.view 检测是否需要更新约束，若需要则更新，下面添加动画效果才起作用
[self.view updateConstraintsIfNeeded]; [UIView animateWithDuration:0.3 animations:^{
[weakSelf.view layoutIfNeeded];
}];
}
[self.growingButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(weakSelf.view);
// 初始宽、高为100，优先级最低
make.width.height.mas_equalTo(100 * weakSelf.scacle).priorityLow(); // 让控件的宽和高相等且优先级最低。关于优先级，后面再讲
// 最大放大到整个View
make.width.height.lessThanOrEqualTo(weakSelf.view); // 让控件的宽和高小于或者等于self.view 的宽和高， 因此这个控件的最多能放大到全屏幕
}];
将这三行代码放在一起，形成的话就是：使控件与父视图始终保持居中，控件的宽和高最大不能超过屏幕，且控件的宽和高可以变化。由于我们设置了第二行的代码优先级为priorityLow，因此其优先级是最低的，所以就可以保证宽高不能超过屏幕。 其实，当我们将更新代码放到updateViewConstraints这个方法中时，这些约束就不需要了，这里写上去的目的只是想说明用于不用都没有关系。
// 告诉self.view 约束需要更新
看下面的方法，就是动画更新约束的核心代码：
[self.view setNeedsUpdateConstraints];
// 想要更新约束时添加动画，就需要调用关键的一行代码：setNeedsUpdateConstraints，这是选择对应的视图中的约束需要更新
// 调用此方法告诉self.view 检测是否需要更新约束，若需要则更新，下面添加动画效果才起作用
[self.view updateConstraintsIfNeeded];
// 对于updateConstraintsIfNeeded这个方法并不是必须的，但是有时候不调用就无法起到我们的效果。但是，官方都是这么写的，从约束的更新原理上讲，这应该写上。我们要使约束立即生效，就必须调用layoutIfNeeded此方法，[UIView animateWithDuration:0.3 animations:^{ [self.view layoutIfNeeded]; }];
(9)移除约束
#import "RemakeContraintsViewController.h"
#import "Masonry.h" @interface RemakeContraintsViewController () @property(nonatomic, strong) UIButton *growingButton;
@property(nonatomic, assign) BOOL isExpanded; @end @implementation RemakeContraintsViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor whiteColor]; self.growingButton = [UIButton buttonWithType:UIButtonTypeSystem];
[self.growingButton setTitle:@"点我展开" forState:UIControlStateNormal];
self.growingButton.layer.borderColor = UIColor.greenColor.CGColor;
self.growingButton.layer.borderWidth = ;
self.growingButton.backgroundColor = [UIColor redColor];
[self.growingButton addTarget: self action:@selector(onGrowButtonTaped:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:self.growingButton];
self.isExpanded = NO;
} - (void)updateViewConstraints {
// 这里使用update 也是一样的
// remake 会将之前的全部移除， 然后重新添加
[self.growingButton mas_remakeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo();
make.left.right.mas_equalTo();
if (self.isExpanded) {
make.bottom.mas_equalTo();
} else {
make.bottom.mas_equalTo(-);
}
}]; [super updateViewConstraints];
} - (void)onGrowButtonTaped:(UIButton *)sender {
self.isExpanded = !self.isExpanded;
if (!self.isExpanded) {
[self.growingButton setTitle:@"点我展开" forState:UIControlStateNormal];
} else {
[self.growingButton setTitle:@"点我收起" forState:UIControlStateNormal];
}
// 告诉self.view 约束需要更新
[self.view setNeedsUpdateConstraints];
// 调用此方法告诉self.view 检测是否需要更新，若需要则更新，下面添加动画效果才起作用
[self.view updateConstraintsIfNeeded]; [UIView animateWithDuration:0.3 animations:^{
[self.view layoutIfNeeded];
}];
}
(10)整体动画更新约束
#import "TotalUpdateViewController.h"
#import "Masonry.h" @interface TotalUpdateViewController () @property(nonatomic, strong) UIView *purpleView;
@property(nonatomic, strong) UIView *orangeView;
@property(nonatomic, assign) BOOL isExpaned; @end @implementation TotalUpdateViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor whiteColor]; UIView *purpleView = [[UIView alloc] init];
purpleView.backgroundColor = UIColor.purpleColor;
purpleView.layer.borderColor = UIColor.blackColor.CGColor;
purpleView.layer.borderWidth = ;
[self.view addSubview:purpleView]; UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onTap)];
[purpleView addGestureRecognizer:tap];
self.purpleView = purpleView; UIView *orangeView = UIView.new;
orangeView.backgroundColor = UIColor.orangeColor;
orangeView.layer.borderColor = UIColor.blackColor.CGColor;
orangeView.layer.borderWidth = ;
[self.view addSubview:orangeView];
self.orangeView = orangeView; // 这里，我们不使用updateViewConstraints 方法，但是我们一样可以做到
// 不过苹果推荐在updateViewConstraints 方法中更新约束或者添加约束
[self updateWithExpand:NO animated:NO]; UILabel *label = [[UILabel alloc] init];
label.numberOfLines = ;
label.textColor = [UIColor redColor];
label.font = [UIFont systemFontOfSize:];
label.textAlignment = NSTextAlignmentCenter;
label.text = @"点击purple 部分放大，orange 部分最大值 250 ，最小值 90 ";
[self.purpleView addSubview:label]; [label mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.mas_equalTo(); // 0 就是和底部相等
make.left.right.mas_equalTo();
}];
} - (void)updateWithExpand:(BOOL)isExpanded animated:(BOOL)animated {
self.isExpaned = isExpanded; [self.purpleView mas_updateConstraints:^(MASConstraintMaker *make) { // 更新紫色的约束
make.left.top.mas_equalTo();
make.right.mas_equalTo(-); // 右边和底部 0 是相等 小于0 的是缩进 大于的0 的是伸展 而左边和顶部正好相反
if (isExpanded) {
make.bottom.mas_equalTo(-);
} else {
make.bottom.mas_equalTo(-);
}
}]; [self.orangeView mas_updateConstraints:^(MASConstraintMaker *make) { // 更新橙色的约束
make.center.mas_equalTo(self.purpleView);
// 这里使用优先级处理
// 设置其最大值为 250 ，最小值为 90
if (!isExpanded) {
make.width.height.mas_equalTo( * 0.5).priorityLow();
} else {
make.width.height.mas_equalTo( * ).priorityLow();
} // 最大值为 250
make.width.height.lessThanOrEqualTo(@);
// 最小值为90
make.width.height.greaterThanOrEqualTo(@);
}]; if (animated) {
[self.view setNeedsUpdateConstraints];
[self.view updateConstraintsIfNeeded]; [UIView animateWithDuration:0.5 animations:^{
[self.view layoutIfNeeded];
}];
}
} - (void)onTap {
[self updateWithExpand:!self.isExpaned animated:YES];
}
展开与收起的关键代码在这里.设置最大最小值，这样就不会超出我们预期的范围。
// 最大值为250
make.width.height.lessThanOrEqualTo(@250);
// 最小值为90
make.width.height.greaterThanOrEqualTo(@90);
我们设置其固定的宽高，并且设置其优先级为最低，以保证我们所设置的最大最小值始终生效。
想要更新约束时添加动画，就需要调用关键的一行代码：setNeedsUpdateConstraints，这是选择对应的视图中的约束需要更新。
对于updateConstraintsIfNeeded这个方法并不是必须的，但是有时候不调用就无法起到我们的效果。但是，官方都是这么写的，从约束的更新原理上讲，这应该写上。我们要使约束立即生效，就必须调用layoutIfNeeded此方法。下面的方法，就是动画更新约束的核心代码：
if (animated) {
// 告诉self.view 约束需要更新
[self.view setNeedsUpdateConstraints];
// 调用此方法告诉self.view 检测是否需要更新约束，若需要则更新，下面添加动画效果才起作用
[self.view updateConstraintsIfNeeded];
[UIView animateWithDuration:0.5 animations:^{
[self.view layoutIfNeeded];
}];
}
(11)比例(multipliedBy)
// 首先创建4 个的View 视图 顶部和底部的View 平分屏幕
// 顶部View 红色
UIView *topView = [UIView new];
topView.backgroundColor = [UIColor redColor];
[self.view addSubview:topView];
// 顶部内部的View 绿色
UIView *topInnerView = [UIView new];
topInnerView.backgroundColor = [UIColor greenColor];
[topView addSubview:topInnerView];
// 底部View
UIView *bottomView = [UIView new];
bottomView.backgroundColor = [UIColor blackColor];
[self.view addSubview:bottomView];
// 底部内部的View 蓝色
UIView *bottomInnerView = [UIView new];
bottomInnerView.backgroundColor = [UIColor blueColor];
[bottomView addSubview:bottomInnerView]; [topView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.top.mas_equalTo(); // 上左右 等于 0
make.height.mas_equalTo(bottomView); // 高度两者相等
}]; // width = height / 3
[topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(topView); // 左右相等
make.width.mas_equalTo(topInnerView.mas_height).multipliedBy(); // topInnerView 的宽度等于高度乘以3
make.center.mas_equalTo(topView); // 中心重合 // 设置优先级
make.width.height.mas_equalTo(topView).priorityLow();
make.width.height.lessThanOrEqualTo(topView); // 宽度和高度最大也比topView 小于等于
}]; [bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.mas_equalTo(); // 左右底等于0
make.height.mas_equalTo(topView); // 高度和topView 相等
make.top.mas_equalTo(topView.mas_bottom); // top 等于 topView 的bottom
}]; // width / height / 比为 1 / 3.0 要求是同一个控件的属性比例
[bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.mas_equalTo(bottomView); // 顶部和底部等于bottomView 的顶部和底部
make.center.mas_equalTo(bottomView); // 中心相等
// 注意，这个multipliedBy 的使用只能是设置同一个控件，比如这里的bottonInnerView
// 设置高 / 宽 为 3：1
make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(); // 高度等于宽度乘以 3 make.width.height.mas_equalTo(bottomView).priorityLow(); // 宽和高设置优先级
make.width.height.lessThanOrEqualTo(bottomView); // 宽度和高度最高也小于bottomView 的高度和宽度
}];
[topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(topView); // 左右相等
make.width.mas_equalTo(topInnerView.mas_height).multipliedBy(); // topInnerView 的宽度等于高度乘以3
make.center.mas_equalTo(topView); // 中心重合
// 设置优先级
make.width.height.mas_equalTo(topView).priorityLow();
make.width.height.lessThanOrEqualTo(topView); // 宽度和高度最大也比topView 小于等于
}];
提示：使用multipliedBy必须是对同一个控件本身，比如，上面的代码中，我们都是对bottomInnerView.mas_width本身的，如果修改成相对于其它控件，会出问题。
bottomInnerView的约束如何添加。 希望width/height比为1/3.0，首先，设置了其top和bottom与父视图一致且始终在父视图中居中显示，设置了bottomInnerView的高为宽的3倍，然后设置了宽和高与父视图相等，但是优先级为最低，以保证子视图的宽高不超过父视图，然后通过make.width.height.lessThanOrEqualTo设置了宽、高的最大值与父视图相同，：
// width / height / 比为 1 / 3.0 要求是同一个控件的属性比例
[bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.mas_equalTo(bottomView); // 顶部和底部等于bottomView 的顶部和底部
make.center.mas_equalTo(bottomView); // 中心相等
// 注意，这个multipliedBy 的使用只能是设置同一个控件，比如这里的bottonInnerView
// 设置高 / 宽 为 3：1
make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(); // 高度等于宽度乘以 3 make.width.height.mas_equalTo(bottomView).priorityLow(); // 宽和高设置优先级
make.width.height.lessThanOrEqualTo(bottomView); // 宽度和高度最高也小于bottomView 的高度和宽度
}];
接下篇...