Masonry

6th,Jan,2016

前言

在做一个实战：聊天界面搭建的过程中，使用到Masonry辅助布局。然后去github 上面找到了该框架，这个库的使用率还是蛮高的，该库现在还在维护，十天前还有代码更新，github上面的介绍：这是一个轻量型的代码自动布局的第三方库。

特色：

1. 在NSLayoutConstraint的基础上进行封装，NSLayoutConstraint能实现的Masonry都能实现。
2. 语法更加简洁，优雅，易懂。
   

基础用法

1st,March,2016, Tuesday

1. 添加约束

max_makeConstraints //新增约束，同一约束设置重复则会报错
max_updateConstraints // 更新约束
max_remakeConstraints // 去除之前的所有约束，再设置新的约束

2. 上下左右边距的设置

图截自Github/SnapKit/Masonry

3. 居中

center // 水平垂直方向
centerX //水平中点
centerY //垂直方向中点

4.设置尺寸

1. 固定尺寸
   
2. 相对于其他视图的尺寸

[view mas_makeConstraints:^(MASConstraintMaker *make) {  
    //宽度为superView宽度的20%
    make.width.equalTo(superView.mas_width).multipliedBy(0.2);
}];

12th,Dec,2016

5.LayoutGuide无论是否有navigationBar或tabBar正常显示

iOS7有两个很有用的属性，topLayoutGuide和bottomLayoutGuide，这个两个主要是方便获取UINavigationController和UITabBarController的头部视图区域和底部视图区域。

topLayoutGuide属性表示不希望被透明的状态栏或导航栏遮挡的内容范围的最高位置。这个属性的值是它的length属性的值（topLayoutGuide.length），这个值可能由当前的ViewController或这个ViewController所属的NavigationController或TabBarController决定，有如下情况：

一个独立的ViewController，不包含于任何其他的ViewController。如果状态栏可见，topLayoutGuide表示状态栏的底部，否则表示这个ViewController的上边缘。

包含于其他ViewController的ViewController不对这个属性起决定作用，而是由容器ViewController决定这个属性的含义：

如果导航栏（Navigation Bar）可见，topLayoutGuide表示导航栏的底部。

如果状态栏可见，topLayoutGuide表示状态栏的底部。

如果都不可见，表示ViewController的上边缘。

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(self.mas_topLayoutGuideTop);
    make.bottom.mas_equalTo(self.mas_bottomLayoutGuideTop);
}];

6. 大于小于

make.width.greaterThanOrEqualTo(@200);
make.width.lessThanOrEqualTo(@400)

7.关于更新

AutoLayout关于更新的几个方法的区别:
setNeedsLayout：告知页面需要更新，但是不会立刻开始更新。执行后会立刻调用layoutSubviews。
layoutIfNeeded：告知页面布局立刻更新。所以一般都会和setNeedsLayout一起使用。如果希望立刻生成新的frame需要调用此方法，利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。
layoutSubviews：系统重写布局
setNeedsUpdateConstraints：告知需要更新约束，但是不会立刻开始
updateConstraintsIfNeeded：告知立刻更新约束
updateConstraints：系统更新约束

动画

重点： 修改约束后调用

[view.superview layoutIfNeeded];

demo:

[UIView animateWithDuration:0.16 animations:^{
    [_addedIcon mas_updateConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(@14);
    }];
    [_addedIcon.superview layoutIfNeeded];
} completion:^(BOOL finished) {
    [_addedIcon mas_updateConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(@12);
    }];
    [_addedIcon.superview layoutIfNeeded];
}];

或者：

#pragma mark - updateViewConstraints
- (void)updateViewConstraints {
 [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
   make.center.mas_equalTo(self.view);

   // 初始宽、高为100，优先级最低
   make.width.height.mas_equalTo(100 * self.scacle).priorityLow();
   // 最大放大到整个view
   make.width.height.lessThanOrEqualTo(self.view);
 }];

  [super updateViewConstraints];
}

- (void)onGrowButtonTaped:(UIButton *)sender {
  self.scacle += 0.5;

  // 告诉self.view约束需要更新
  [self.view setNeedsUpdateConstraints];
  // 调用此方法告诉self.view检测是否需要更新约束，若需要则更新，下面添加动画效果才起作用
  [self.view updateConstraintsIfNeeded];

  [UIView animateWithDuration:0.3 animations:^{
    [self.view layoutIfNeeded];
  }];
}

小细节

1. mas_equalTo && equalTo

mak.height.equalTo(@300);
mak.height.mas_equalTo(300); // 推荐

1. NSLayoutAttributeLeft与NSLayoutAttributeLeading的区别：
   在使用Masonry时，有mas_left与mas_leading，同样有mas_right与mas_trailing，在中国都习惯左、右布局，使用left/right与heading/trailing是一样的。但是，在其它部分国家，开发者们的习惯不都是左、右或者前、后布局，还有右、左或者后、前布局的，因此是不一样的。推荐大家使用Masonry时，使用mas_left/mas_right。
2. 在使用max_updateConstraints,max_makeConstraints,max_remakeConstraints时可在#import “Masonry.h”之前 #define SHORTHAND即可去除max_头。

小结：

2.用mas_makeConstraints的那个view需要在addSubview之后才能用这个方法
3.mas_equalTo适用数值元素，equalTo适合多属性的比如make.left.and.right.equalTo(self.view)
4.方法and和with只是为了可读性，返回自身，比如make.left.and.right.equalTo(self.view)和make.left.right.equalTo(self.view)是一样的。

未完待续…

参考资料:
git地址:https://github.com/SnapKit/Masonry
Masonry介绍与使用实践：快速上手Autolayout
AutoLayout框架Masonry使用心得
Masonry的使用，动画，出现问题解决等
Masonry自动布局详解二：动画更新约束