Marsonry库学习笔记

多个相似Controller模板写法

- (id)initWithTitle:(NSString *)title viewClass:(Class)viewClass {
    self = [super init];
    if (!self) return nil;
    
    self.title = title;
    self.viewClass = viewClass;
    
    return self;
}

- (void)loadView {
    self.view = self.viewClass.new;
    self.view.backgroundColor = [UIColor whiteColor];
}

基本

MASExampleBasicView

    int padding = 10;
    [greenView makeConstraints:^(MASConstraintMaker *make) {
        // greenView顶部距离父视图顶部间距>=10
        make.top.greaterThanOrEqualTo(superview.top).offset(padding);
        // greenView左边距离父视图左边间距==10
        make.left.equalTo(superview.left).offset(padding);
        // greenView底部距离blueView顶部间距==-10,说明blueView在greenView下方
        make.bottom.equalTo(blueView.top).offset(-padding);
        // greenView右边距离redView左边间距==-10,说明redView在greenView右方
        make.right.equalTo(redView.left).offset(-padding);
        // greenView宽度==redView宽度
        make.width.equalTo(redView.width);
        // greenView高度==redView高度
        make.height.equalTo(redView.height);
        // greenView高度==blue高度
        make.height.equalTo(blueView.height);
    }];

更新修改

MASExampleUpdateView

+ (BOOL)requiresConstraintBasedLayout {
    // 我们应该在自定义View中重写这个方法。如果我们要使用Auto Layout布局当前视图，应该设置为返回YES。
    return YES;
}

// 苹果推荐的更新约束的地方
- (void)updateConstraints {

    [self.growingButton updateConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
        // 降低优先度，相当于设置一个最小值
        make.width.equalTo(@(self.buttonSize.width)).priorityLow();
        make.height.equalTo(@(self.buttonSize.height)).priorityLow();
        // 设置最大值不超过self的宽度/高度
        make.width.lessThanOrEqualTo(self);
        make.height.lessThanOrEqualTo(self);
    }];
    
    // 最后才调用父方法
    [super updateConstraints];
}

- (void)didTapGrowButton:(UIButton *)button {
    self.buttonSize = CGSizeMake(self.buttonSize.width * 1.3, self.buttonSize.height * 1.3);

    // 告诉self约束准备更新
    [self setNeedsUpdateConstraints];

    // 更新约束
    [self updateConstraintsIfNeeded];

    [UIView animateWithDuration:0.4 animations:^{
        // 更新视图
        [self layoutIfNeeded];
    }];
}

重设

MASExampleRemakeView

重设使用方法remakeConstraints
remakeConstraints和updateConstraints类似，只是remakeConstraints会删除旧的约束，添加新的约束
而updateConstraints则会更新出现在block里的约束

使用常量

MASExampleConstantsView

Masonry可以使用标量和结构体(CGPoint、CGSize之类的)

Edges

MASExampleSidesView

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    // 一次设好上下左右间距的方法
    make.edges.equalTo(lastView).insets(UIEdgeInsetsMake(5, 10, 15, 20));
}];

AspectFit

MASExampleAspectFitView

    //设置约束
    [self addSubview:_topView];
    [_topView makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.and.right.equalTo(self);
    }];
    
    [self addSubview:_bottomView];
    [_bottomView makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.and.bottom.equalTo(self);
        make.top.equalTo(_topView.mas_bottom);
        make.height.equalTo(_topView.mas_height);
    }];
    
    [_topView addSubview:_topInnerView];
    [_topInnerView makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(_topInnerView.mas_height).multipliedBy(3);
        make.center.equalTo(_topView);
        make.width.and.height.lessThanOrEqualTo(_topView);
        make.width.and.height.equalTo(_topView).priorityLow();
    }];
    
    [_bottomView addSubview:_bottomInnerView];
    [_bottomInnerView makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(_bottomInnerView.mas_width).multipliedBy(3);
        make.center.equalTo(_bottomView);
        make.width.and.height.lessThanOrEqualTo(_bottomView);
        make.width.and.height.equalTo(_bottomView).priorityLow();
    }];

PS:设置约束的时候两个视图要在同一父视图上或者有关系

简单动画

MASExampleAnimatedView

- (void)makeConstraints {
    int padding = self.padding;
    UIEdgeInsets paddingInserts = UIEdgeInsetsMake(padding, padding, padding, padding);
    
    [self.greenView makeConstraints:^(MASConstraintMaker *make) {
        [self.animateArray addObjectsFromArray:@[
            make.edges.equalTo(self).offset(paddingInserts).priorityLow(),
            make.right.equalTo(self.redView.mas_left).offset(-padding),
            make.bottom.equalTo(self.blueView.mas_top).offset(-padding)
            ]
         ];
        make.size.equalTo(self.redView);
        make.height.equalTo(self.blueView);
    }];
    
    [self.redView makeConstraints:^(MASConstraintMaker *make) {
        [self.animateArray addObjectsFromArray:@[
            make.edges.equalTo(self).offset(paddingInserts).priorityLow(),
            make.bottom.equalTo(self.blueView.mas_top).offset(-padding)
            ]
         ];
    }];
    
    [self.blueView makeConstraints:^(MASConstraintMaker *make) {
        [self.animateArray addObject:make.edges.equalTo(self).offset(paddingInserts).priorityLow()];
    }];
}
// 移动到window显示的时候开始动画
- (void)didMoveToWindow {
    [self layoutIfNeeded];
    
    if (self.window) {
        self.isAnimating = YES;
        [self anmateWithInvertedInserts:NO];
    }
}

- (void)willMoveToWindow:(UIWindow *)newWindow {
    self.isAnimating = newWindow != nil;
}

- (void)anmateWithInvertedInserts:(BOOL)invertedInserts {
    if (!self.isAnimating) {
        return;
    }
    int padding = invertedInserts ? 100 : self.padding;
    UIEdgeInsets paddingInserts = UIEdgeInsetsMake(padding, padding, padding, padding);
    // 遍历之前存储的约束、依次修改
    for (MASConstraint *constraint in self.animateArray) {
        constraint.insets = paddingInserts;
    }
    // 使用动画更新视图
    [UIView animateWithDuration:1.0 animations:^{
        [self layoutIfNeeded];
    } completion:^(BOOL finished) {
        [self anmateWithInvertedInserts:!invertedInserts];
    }];
}

长文本约束

MASExampleLabelView

主要存在两种情况
1.右边短文本，左边长文本。
重写layoutSubviews方法确定短文本宽度，由此确定长文本宽度，设置preferredMaxLayoutWidth
左边短文本，右边长文本。与上面一样处理

[self.longLabel makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.left).insets(kPadding);
    make.top.equalTo(self.top).insets(kPadding);
}];

[self.shortLabel makeConstraints:^(MASConstraintMaker *make) {
     make.centerY.equalTo(self.longLabel.centerY);
    make.right.equalTo(self.right).insets(kPadding);
}];
    
- (void)layoutSubviews {
    [super layoutSubviews];
    // 使用Autolayout，由此方法获取真实的frame
    CGFloat width = CGRectGetMinX(self.shortLabel.frame) - kPadding.left;
    width -= CGRectGetMinX(self.longLabel.frame);
    self.longLabel.preferredMaxLayoutWidth = width;

    //再次调用，重新计算
    [super layoutSubviews];
}

2.上面长文本，下面固定

- (void)makeConstraints {
    UIView *superView = self;
    [self.longLabel makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(superView.top).offset(kPadding);
        make.left.equalTo(superView.left).offset(kPadding);
        make.right.equalTo(superView.right).offset(-kPadding);
        make.bottom.equalTo(self.shortLabel.top).offset(-kPadding);
    }];
    
    [self.shortLabel makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(superView).offset(kInserts).priorityLow();
        make.left.equalTo(superView.left).offset(kPadding);
    }];
}

ScrollView

ScrollView的约束一般是在其上面添加一个contentView通过约束这个contentView来达到效果

- (void)generateContent {
    UIView* contentView = UIView.new;
    [self.scrollView addSubview:contentView];
    
    [contentView makeConstraints:^(MASConstraintMaker *make) {
        // 上下左右与scrollView间距为0，宽度相同,垂直滚动的scrollView必须确定宽度
        make.edges.equalTo(self.scrollView);
        make.width.equalTo(self.scrollView);
    }];
    // 开始计算contentView的高度
    UIView *lastView;
    CGFloat height = 25;
    
    for (int i = 0; i < 10; i++) {
        UIView *view = UIView.new;
        view.backgroundColor = [self randomColor];
        [contentView addSubview:view];
        
        UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTap:)];
        [view addGestureRecognizer:singleTap];
        
        [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) {
        // 对contentView高度进行约束
        make.bottom.equalTo(lastView.bottom);
    }];
}

Array

多个view对齐的约束

- (void)updateConstraints {
    [self.buttonViews updateConstraints:^(MASConstraintMaker *make) {
        // 添加baseline对齐
        make.baseline.equalTo(self.mas_centerY).with.offset(self.offset);
    }];
    
    //最后才调用
    [super updateConstraints];
}

AttributeChaining

链式语法

    [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        // chain attributes
        make.top.and.left.equalTo(superview).insets(padding);

        // 相当于
//        make.top.greaterThanOrEqualTo(superview).insets(padding);
//        make.left.greaterThanOrEqualTo(superview).insets(padding);

        make.bottom.equalTo(blueView.mas_top).insets(padding);
        make.right.equalTo(redView.mas_left).insets(padding);
        make.width.equalTo(redView.mas_width);

        make.height.equalTo(@[redView, blueView]);
    }];

间距

利用预先设定好的间距布局

        view.layoutMargins = UIEdgeInsetsMake(5, 10, 15, 20);
        [self addSubview:view];
        
        [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(lastView.topMargin);
            make.bottom.equalTo(lastView.bottomMargin);
            make.left.equalTo(lastView.leftMargin);
            make.right.equalTo(lastView.rightMargin);
        }];

多个控件固定间隔的等间隔排列

MASExampleDistributeView

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

LayoutGuide

MASExampleLayoutGuideViewController

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

    [topSubview makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.mas_topLayoutGuide);
        make.centerX.equalTo(@0);
        make.width.equalTo(@20);
        make.height.equalTo(@20);
    }];
    
    [bottomView makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.mas_bottomLayoutGuide);
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.height.equalTo(@40);
    }];