根据Masonry例子学布局（附如何再Xcode进行真机截屏，保存到Mac）

开篇牢骚

今天抽空简单介绍一下masonry的基本使用。网上好多的教程都写得很简单。虽然我不保证我写的很高深，但敢保证绝对原创。

 顺便介绍以下**如何通过Xcode在真机上截屏保存到Mac上**，起初这个简单事情自己还废了七八分钟来找，网上搜了一下都是告诉你**模拟器**如何截屏的。

1.在真机上运行你的项目
2.在xcode的菜单选项中找到Debug选项，选择View Debugging。如下图

根据Masonry例子学布局（附如何再Xcode进行真机截屏，保存到Mac）_第1张图片

View Debugging.png

3.选择Take Screenshot of

根据Masonry例子学布局（附如何再Xcode进行真机截屏，保存到Mac）_第2张图片

Take Screenshot of.png

4.点击这个选项之后再Mac的桌面机会出现你在真机上截取的图片了
图片命名是通过时间关联的。

真机截屏图片.png

进入主题

基本使用

我们在为每个使用Masonry布局的view进行布局之前，必须把view加入到一个视图之上，也就是这个view必须具有父视图。如果不这样，则会出现

'NSInternalInconsistencyException', reason: 'couldn't find a common superview for这样的错误信息。切记，一定要先有父视图才能使用

再来看看最为基本的用法：

[greenView makeConstraints:^(MASConstraintMaker *make) {
        make.top.greaterThanOrEqualTo(superview.top).offset(padding);
        make.left.equalTo(superview.left).offset(padding);
        make.bottom.equalTo(blueView.top).offset(-padding);
        make.right.equalTo(redView.left).offset(-padding);
        
        make.width.equalTo(redView.width);
        make.height.equalTo(redView.height);
        make.height.equalTo(blueView.height);
    }];

其实这里的equalTo是一个宏定义而已，不信，我把它原型找出来（还有它的兄弟）

根据Masonry例子学布局（附如何再Xcode进行真机截屏，保存到Mac）_第3张图片

equalTo本质.png

非常清除看到我们平时用的equalTo本质是什么。

如果需要直接使用Masonry中的equalTo这些宏定义，需要再预编译文件中加入如下几句：

    //define this constant if you want to use Masonry without the 'mas_' prefix
    #define MAS_SHORTHAND
    //define this constant if you want to enable auto-boxing for default syntax
    #define MAS_SHORTHAND_GLOBALS

如果你项目里面已经存在了view的一个分类（UIview + Positoning）快速获取视图的frame的各个属性。如下：

根据Masonry例子学布局（附如何再Xcode进行真机截屏，保存到Mac）_第4张图片

UIView+Positoning.png

那就不要用缩写了
写成 make.right.mas_equalTo(superview.mas_left).offset(@12);

三个常用的添加约束的方法

关于常见的三个添加约束的方法，这里不去讲了。因为这些都可以自己找到的。直接通过xcode就能找到。如下图：

根据Masonry例子学布局（附如何再Xcode进行真机截屏，保存到Mac）_第5张图片

Paste_Image.png

所以这些网上说的，其实大部分自己都可以找到。

UIScroll使用Masonry

这里有必要说说ScrollView使用约束怎么实现。之前在网上找到如果ScrollView需要使用约束，需要添加一个辅助视图。经过自己测试，如果直接将view记到scrollview上是不能滑动的。具体原因我猜测可能是直接添加到scrollView上，位置就定死了。contentSize就居然为width = 0, height = 0。

添加到辅助视图就是正常的了
width = 320, height = 1375。相关代码如下：

    // 辅助视图
    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);
    }];

说说动画

约束实现动画比用frame要麻烦一点。先来看看几个基本的东东

1.updateConstraints
2.setNeedsUpdateConstraints
3.updateConstraintsIfNeeded
对应的解释xcode都能看到。我这里其实和frame布局中用到的对比一下就知道什么了
1.layoutSubviews 系统自己调用
2.setNeedsLayout 手动调用，会在系统下个重绘自动调用layoutSubview
3.layoutIfNeeded 手动调用，立即调用layoutSubview
这样一看是不是清晰多了
最后给出一般约束做动画需要怎么写


- (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();
        make.width.lessThanOrEqualTo(self);
        make.height.lessThanOrEqualTo(self);
    }];
    
    //according to apple super should be called at end of method
    [super updateConstraints];
}

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

    // tell constraints they need updating
    [self setNeedsUpdateConstraints];
    // update constraints now so we can animate the change
    [self updateConstraintsIfNeeded];

    [UIView animateWithDuration:0.4 animations:^{
        [self layoutIfNeeded];
        
    }];
}

总结

其实讲的这些都很基础，但是有的时候基础都不知道很难有所提升。**下个周给出一篇有深度的文章**