自动布局－Masonry

一、简介

Masonry是NSLayoutConstraint的一种简易书写版本，没有更多的封装功能

二、系统AutoLayout更新布局的几个方法

• setNeedsLayout：告知页面需要更新，但是不会立刻开始更新。执行后会立刻调用layoutSubviews。
• layoutIfNeeded：告知页面布局立刻更新。所以一般都会和setNeedsLayout一起使用。如果希望立刻生成新的frame需要调用此方法，利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。
• layoutSubviews：系统重写布局，重载这个方法实现自定义布局，这个方法官方不建议显示调用，建议依次调用setNeedsLayout和layoutIfNeeded即会自动调用该方法
• setNeedsUpdateConstraints：告知需要更新约束，但是不会立即开始
• updateConstrainsIfNeed：告知立即更新约束
• updateConstraints：系统更新约束，重载次方法进行自定义约束，不建议显示调用，依次调用setNeedsUpdateConstraints和updateConstrainsIfNeed即会触发该方法

三、使用

• mas_makeContraints：添加约束，不能对同一个对象设置两个不同的约束
• mas_updateConstraints：更新约束，对已有约束的对象，只能更新其右设置约束的属性，且参照物要和原先保持一致，否则会异常；对不存在约束的对象，效果和mas_makeContraints一样
• mas_remakeContraints：清除之前的所有约束，添加新约束
• multipliedBy：属性约束值为约束对象的倍数,比如下面代码设置topInnerView的宽度是其高度的3倍

[self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.width.equalTo(self.topInnerView.mas_height).multipliedBy(3);
           
           make.width.and.height.lessThanOrEqualTo(self.topView);
           make.width.and.height.equalTo(self.topView).with.priorityLow();
           
           make.center.equalTo(self.topView);
       }];

• dividedBy：属性约束值是约束对象的几分之一
• priorityLow：设置约束优先级大于MASLayoutPriorityLow
• #define MAS_SHORTHAND_GLOBALS：使用全局宏定义，可以使equalTo等效于mas_equalTo
#define MAS_SHORTHAND：可以在调用masonry方法的时候不使用mas_前缀,一般在#import "Masonry.h"前加入这两个宏
• insets:动态修改试图约束

// 创建视图约束
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
      self.animatableConstraint = make.edges.equalTo(superview).insets(paddingInsets).priorityLow();
]];
// 更改约束 （另一处方法中）
UIEdgeInsets paddingInsets = UIEdgeInsetsMake(padding, padding, padding, padding);
self.animatableConstraint.insets = paddingInsets；
[self layoutIfNeeded]; //通过UIView animateWithDuration可以实现动画

• debug模式：可以将对应的控件指针替换为你写的key

/ 对某个view添加key值
greenView.mas_key = @"greenView";
// 或者如下顺序
MASAttachKeys(greenView, redView, blueView, superview);
// 同样的对每条约束亦可以添加key，key可以是任何对象
make.height.greaterThanOrEqualTo(@5000).key(@"ConstantConstraint2");
make.height.equalTo(redView.mas_height).key(@340954); //anything can be a key

• preferredMaxLayoutWidth: label多行约束

- (void)layoutSubviews {
    [super layoutSubviews];

    //多行label设置preferredMaxLayoutWidth需要在[super layoutSubviews];之后
    self.longLabel.preferredMaxLayoutWidth = width;
    //preferredMaxLayoutWidth设置完后需要重新计算，因此需重新调用[super layoutSubviews];
    [super layoutSubviews];
}

• scrollview自动计算contenSize

    UIView* contentView = UIView.new;
    [self.scrollView addSubview:contentView];
    
    [contentView makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView);
        make.width.equalTo(self.scrollView);
    }];
    
    UIView *lastView;
    CGFloat height = 25;
    
    for (int i = 0; i < 10; i++) {
        UIView *view = UIView.new;
        view.backgroundColor = [self randomColor];
        [contentView addSubview:view];

        [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(lastView ? lastView.bottom : @0);
            make.left.equalTo(@0);
            make.width.equalTo(contentView.width);
            make.height.equalTo(@(height));
        }];
        
        height += 25;
        lastView = view;
    }
    
    [contentView makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(lastView.bottom);
    }];

• 更新一组控件的约束

- (void)setupUI()
{
    [lowerButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self).with.offset(10.0);
    }];

    [centerButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self);
    }];

    [raiseButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self).with.offset(-10);
    }];
    
    self.buttonViews = @[ raiseButton, lowerButton, centerButton ];
}

- (void)updateConstraints {
    [self.buttonViews updateConstraints:^(MASConstraintMaker *make) {
        make.baseline.equalTo(self.mas_centerY).with.offset(self.offset);
    }];
    
    //according to apple super should be called at end of method
    [super updateConstraints];
}

• 链式写法

//相当于
//make.top.equalTo(superview).insets(padding);
//make.left.equalTo(superview).insets(padding);  
make.top.and.left.equalTo(superview).insets(padding);
  
//相当于
//make.left.equalTo(superview).insets(padding);
//make.right.equalTo(superview).insets(padding);  
//make.bottom.equalTo(superview).insets(padding); 
make.left.right.and.bottom.equalTo(superview).insets(padding);

make.width.and.height.lessThanOrEqualTo(self.topView);

• 等间距排列

/**
 *  多个控件固定间隔的等间隔排列，变化的是控件的长度或者宽度值
 *
 *  @param axisType        轴线方向
 *  @param fixedSpacing    间隔大小
 *  @param leadSpacing     头部间隔
 *  @param tailSpacing     尾部间隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType 
                    withFixedSpacing:(CGFloat)fixedSpacing 
                         leadSpacing:(CGFloat)leadSpacing 
                         tailSpacing:(CGFloat)tailSpacing;

/**
 *  多个固定大小的控件的等间隔排列,变化的是间隔的空隙
 *
 *  @param axisType        轴线方向
 *  @param fixedItemLength 每个控件的固定长度或者宽度值
 *  @param leadSpacing     头部间隔
 *  @param tailSpacing     尾部间隔
 */
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType 
                 withFixedItemLength:(CGFloat)fixedItemLength 
                         leadSpacing:(CGFloat)leadSpacing 
                         tailSpacing:(CGFloat)tailSpacing;

• mas_topLayoutGuide: 有导航栏的话，紧贴着导航栏，没有导航栏的话，紧贴self.view

    [topView makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.mas_topLayoutGuide);
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.height.equalTo(@40);
    }];

• mas_bottomLayoutGuide: 有tabbar的时候，紧贴tabbar，没有tabbar的话，紧贴self.view

    [bottomView makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.mas_bottomLayoutGuide);
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.height.equalTo(@40);
    }];

四、源码

Github