開(kāi)篇牢騷

今天抽空簡(jiǎn)單介紹一下masonry的基本使用。網(wǎng)上好多的教程都寫得很簡(jiǎn)單。雖然我不保證我寫的很高深，但敢保證絕對(duì)原創(chuàng)。

 順便介紹以下**如何通過(guò)Xcode在真機(jī)上截屏保存到Mac上**，起初這個(gè)簡(jiǎn)單事情自己還廢了七八分鐘來(lái)找，網(wǎng)上搜了一下都是告訴你**模擬器**如何截屏的。

• 1.在真機(jī)上運(yùn)行你的項(xiàng)目
• 2.在xcode的菜單選項(xiàng)中找到Debug選項(xiàng)，選擇View Debugging。如下圖

View Debugging.png

• 3.選擇Take Screenshot of

Take Screenshot of.png

• 4.點(diǎn)擊這個(gè)選項(xiàng)之后再M(fèi)ac的桌面機(jī)會(huì)出現(xiàn)你在真機(jī)上截取的圖片了
  圖片命名是通過(guò)時(shí)間關(guān)聯(lián)的。

  
  
  真機(jī)截屏圖片.png

進(jìn)入主題

基本使用

我們?cè)跒槊總€(gè)使用Masonry布局的view進(jìn)行布局之前，必須把view加入到一個(gè)視圖之上，也就是這個(gè)view必須具有父視圖。如果不這樣，則會(huì)出現(xiàn)

'NSInternalInconsistencyException', reason: 'couldn't find a common superview for這樣的錯(cuò)誤信息。切記，一定要先有父視圖才能使用

再來(lái)看看最為基本的用法：

[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);
    }];

其實(shí)這里的equalTo是一個(gè)宏定義而已，不信，我把它原型找出來(lái)（還有它的兄弟）

equalTo本質(zhì).png

非常清除看到我們平時(shí)用的equalTo本質(zhì)是什么。

如果需要直接使用Masonry中的equalTo這些宏定義，需要再預(yù)編譯文件中加入如下幾句：

    //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

如果你項(xiàng)目里面已經(jīng)存在了view的一個(gè)分類（UIview + Positoning）快速獲取視圖的frame的各個(gè)屬性。如下：

UIView+Positoning.png

三個(gè)常用的添加約束的方法

關(guān)于常見(jiàn)的三個(gè)添加約束的方法，這里不去講了。因?yàn)檫@些都可以自己找到的。直接通過(guò)xcode就能找到。如下圖：

Paste_Image.png

所以這些網(wǎng)上說(shuō)的，其實(shí)大部分自己都可以找到。

UIScroll使用Masonry

這里有必要說(shuō)說(shuō)ScrollView使用約束怎么實(shí)現(xiàn)。之前在網(wǎng)上找到如果ScrollView需要使用約束，需要添加一個(gè)輔助視圖。經(jīng)過(guò)自己測(cè)試，如果直接將view記到scrollview上是不能滑動(dòng)的。具體原因我猜測(cè)可能是直接添加到scrollView上，位置就定死了。contentSize就居然為width = 0, height = 0。

添加到輔助視圖就是正常的了
width = 320, height = 1375。相關(guān)代碼如下：

    // 輔助視圖
    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);
    }];

說(shuō)說(shuō)動(dòng)畫

約束實(shí)現(xiàn)動(dòng)畫比用frame要麻煩一點(diǎn)。先來(lái)看看幾個(gè)基本的東東

• 1.updateConstraints
• 2.setNeedsUpdateConstraints
• 3.updateConstraintsIfNeeded
  對(duì)應(yīng)的解釋xcode都能看到。我這里其實(shí)和frame布局中用到的對(duì)比一下就知道什么了
• 1.layoutSubviews 系統(tǒng)自己調(diào)用
• 2.setNeedsLayout 手動(dòng)調(diào)用，會(huì)在系統(tǒng)下個(gè)重繪自動(dòng)調(diào)用layoutSubview
• 3.layoutIfNeeded 手動(dòng)調(diào)用，立即調(diào)用layoutSubview
  這樣一看是不是清晰多了
  最后給出一般約束做動(dòng)畫需要怎么寫

- (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];
        
    }];
}

總結(jié)

其實(shí)講的這些都很基礎(chǔ)，但是有的時(shí)候基礎(chǔ)都不知道很難有所提升。**下個(gè)周給出一篇有深度的文章**