Layout / Masonry布局 + UIView Anim

一、更新约束mas_updateConstraints

[view mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.mas_equalTo(10);
  make.right.mas_equalTo(-10);
  make.height.mas_equalTo(225);
  make.bottom.mas_equalTo(225);
}];

添加阻尼动画, 使view从屏幕底部出现

    [self.middleView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(-10);
    }];
    [UIView animateWithDuration:0.3 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:15 options:UIViewAnimationOptionCurveEaseIn animations:^{

        [self.middleView.superview layoutIfNeeded];
        
    } completion:^(BOOL finished) {
        NSLog(@"Show animation finished.");
    }];

这里的layoutIfNeeded表示 视图需要立即更新

二、重新设置约束mas_remakeConstraints

有时候，我们需要重新设置某个控件的约束以求达想要到动画效果，且不会引起其他控件的约束变化，可以用Masonry的remake来实现，比如说我们要在导航栏上实现这样的动画

nav.gif

步骤：

这是navigationItem的titleView，所以我们需要自定义一个titleView，包含3个控件

@interface MainTitleView : UIView

//推荐
@property (nonatomic, strong)UIButton *recommendButton;
//全部
@property (nonatomic, strong)UIButton *allButton;
//移动的横线
@property (nonatomic, strong)UIView *indicatorView;

@end

下面是我用Masonry为3个控件布局

#pragma mark lazy
//推荐
- (UIButton *)recommendButton {
    if (!_recommendButton) {
        _recommendButton  = [UIButton buttonWithType:UIButtonTypeCustom];
        [self addSubview:_recommendButton];
        [_recommendButton mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerY.mas_equalTo(self.centerY).mas_offset(5);
            make.left.mas_equalTo(0);
        }];
        [_recommendButton setTitleColor:blackMainColor forState:UIControlStateNormal];
        _recommendButton.titleLabel.font = [UIFont systemFontOfSize:16];
        [_recommendButton setTitle:@"推 荐" forState:UIControlStateNormal];
        
        [_recommendButton addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _recommendButton;
}

//所有
- (UIButton *)allButton {
    if (!_allButton) {
        _allButton  = [UIButton buttonWithType:UIButtonTypeCustom];
        [self addSubview:_allButton];
        [_allButton mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerY.mas_equalTo(self.centerY).mas_offset(5);
            make.right.mas_equalTo(0);
        }];
        [_allButton setTitleColor:blackMainColor forState:UIControlStateNormal];
        _allButton.titleLabel.font = [UIFont systemFontOfSize:16];
        [_allButton setTitle:@"全 部" forState:UIControlStateNormal];
        
        [_allButton addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _allButton;
}

//横线
- (UIView *)indicatorView {
    if (!_indicatorView) {
        _indicatorView = [UIView new];
        [self addSubview:_indicatorView];
        [_indicatorView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(self.recommendButton.mas_left);
            make.right.mas_equalTo(self.recommendButton.mas_right);
            make.top.mas_equalTo(self.mas_bottom).offset(-3);
            make.height.mas_equalTo(3);
        }];
    }
    _indicatorView.backgroundColor = blackMainColor;
    return _indicatorView;
}

从上面的代码我们可以看到，indicatorView的左侧、右侧都是和recommendButton齐平的，所以如果我们使用上面的mas_updateConstraints只更新indicatorView的left和right约束

- (void)clickButton:(id)sender {
    UIButton *selectButton = sender;
    [self.indicatorView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(selectButton.mas_left);
        make.right.mas_equalTo(selectButton.mas_right);
    }];
    [UIView animateWithDuration:0.2f animations:^{
        [self layoutIfNeeded];
    }];
}

点击右边的“全部”按钮将会引起另外两个按钮的布局变化，从而导致这样的情况：

nav1.gif

原因：

• 初始状态下，indicatorView的左侧、右侧都是和recommendButton齐平的；
• 点击右侧的“全部”按钮，我们是希望indicatorView的left和right的约束等于“全部”按钮的left、right的约束，从而实现动画；
• 但是实际上，indicatorView的左侧、右侧约束同时关联着“推荐”按钮的左侧、右侧约束，所以我们这里更新约束会导致“推荐”按钮的left、right约束发生变化，从而出现上面的情况
• 这里我们就需要用到Masonry的remake了

- (void)clickButton:(id)sender {
    UIButton *selectButton = sender;
    [self.indicatorView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(selectButton.mas_left);
        make.right.mas_equalTo(selectButton.mas_right);
        make.height.mas_equalTo(3);
        make.top.mas_equalTo(self.mas_bottom).offset(-3);
    }];
    [UIView animateWithDuration:0.2f animations:^{
        [self layoutIfNeeded];
    }];
}

1. 移除原来的约束，这样不会对其他控件造成影响
2. 添加需要的新约束
3. 动画实现