iOS開發之原始碼解析 - Masonry

n以夢為馬發表於2017-12-25
iOS原始碼

這是 GitHub 上，Masonry 官方對 Masonry 的介紹：

Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.

譯文如下：

Masonry 是一個輕量級的佈局框架，它通過一種友好的語法封裝了自動佈局。Masonry 通過鏈式語法 DSL(Domain-specific language) 來封裝 NSLayoutConstraints，使佈局程式碼更加地簡潔易讀。Masonry 支援 iOS 和 Mac OS X。

在分析 Masonry 原始碼之前，有必要先說一下 Masonry 的基本使用，而在說 Masonry 的基本使用之前，我們還是先來看看 storyboard 以及 xib 中是如何進行 AutoLayout 的，我截了兩張圖：

iOS開發之原始碼解析 - Masonry

iOS開發之原始碼解析 - Masonry

從上圖我們可以看出，在 storyboard 和 xib 中，我們可以在視覺化介面對控制元件進行 AutoLayout，操作較為簡單方便。Masonry 的實現原理與這很相似，接下來我們就一起看看如何使用 Masonry 進行自動佈局。

先看一下 Masonry 支援哪些屬性：

/**
 *	以下屬性返回一個新的 MASViewConstraint
 */
@property (nonatomic, strong, readonly) MASConstraint *left;      // 左側
@property (nonatomic, strong, readonly) MASConstraint *top;       // 上側
@property (nonatomic, strong, readonly) MASConstraint *right;     // 右側
@property (nonatomic, strong, readonly) MASConstraint *bottom;    // 下側
@property (nonatomic, strong, readonly) MASConstraint *leading;   // 首部
@property (nonatomic, strong, readonly) MASConstraint *trailing;  // 尾部
@property (nonatomic, strong, readonly) MASConstraint *width;     // 寬
@property (nonatomic, strong, readonly) MASConstraint *height;    // 高
@property (nonatomic, strong, readonly) MASConstraint *centerX;   // 橫向居中
@property (nonatomic, strong, readonly) MASConstraint *centerY;   // 縱向居中
@property (nonatomic, strong, readonly) MASConstraint *baseline;  // 文字基線

/**
 *  返回一個 block 物件，block 的接收引數是 MASAttribute 型別,返回一個 MASCompositeConstraint 物件
 */
@property (nonatomic, strong, readonly) MASConstraint *(^attributes)(MASAttribute attrs);

/**
 *	返回一個 MASConstraint 物件，包含上下左右的佈局資訊
 */
@property (nonatomic, strong, readonly) MASConstraint *edges;

/**
 *	返回一個 MASConstraint 物件，包含寬高的佈局資訊
 */
@property (nonatomic, strong, readonly) MASConstraint *size;

/**
 *	返回一個 MASConstraint 物件，包含 centerX 和 centerY 資訊
 */
@property (nonatomic, strong, readonly) MASConstraint *center;
複製程式碼

有了屬性之後，怎樣新增約束呢？使用 Masonry 新增約束的函式有三個，這三個方法我們在檔案 View+MASAdditions 中可以檢視到：

/// 新增約束
- (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

/// 更新約束
- (NSArray *)mas_updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

/// 清除舊約束，只保留新約束
- (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
複製程式碼

上面這三個方法中最常用的是 - (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block。即第一個，接下來我們就嘗試一下。

舉個栗子：

匯入 Masonry 框架之後，新增以下程式碼：

- (void)layoutViews
{
    UIImageView *imageView = [[UIImageView alloc] init];
    [imageView setImage:[UIImage imageNamed:@"123"]];
    [self.view addSubview:imageView];
    
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(100);
        make.right.equalTo(self.view).offset(-100);
        make.top.equalTo(self.view).offset(250);
        make.bottom.equalTo(self.view).offset(-250);
    }];
}
複製程式碼

上面這幾句程式碼便可以對 UIImageView 控制元件進行約束，這裡還有兩點值得一提。第一點：下面這三種方式會實現相同的效果

    /// 第一種
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(100);
        make.right.equalTo(self.view).offset(-100);
        make.top.equalTo(self.view).offset(250);
        make.bottom.equalTo(self.view).offset(-250);
    }];
    
    /// 第二種
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.left.right.equalTo(self.view).insets(UIEdgeInsetsMake(250, 100, 250, 100));
    }];
    
    /// 第三種
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(250, 100, 250, 100));
    }];
複製程式碼

三種方式得出的效果圖一樣：

iOS開發之原始碼解析 - Masonry

第二點：必須先把控制元件新增到檢視上，才能對控制元件進行佈局，否則程式會崩。即先 addSubview:，再 mas_makeConstraints: 。

以上是對 Masonry 使用的簡單介紹。接下來我們開始分析它的原始碼。

通過對 Masonry 使用方法的瞭解，我們可以看出 Masonry 的使用過程還是很簡潔的

    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(100);
        make.right.equalTo(self.view).offset(-100);
        make.top.equalTo(self.view).offset(250);
        make.bottom.equalTo(self.view).offset(-250);
    }];
複製程式碼

那我們就從 mas_makeConstraints: 這個方法開始探尋 Masonry 的原始碼。上文說到，Masonry 中設定約束最常用的方法是

``` /// 新增約束

  • (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

同時，Masonry 還提供兩個類方法用於更新和重建約束

複製程式碼

/// 更新約束

  • (NSArray *)mas_updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

/// 清除舊約束，只保留新約束

  • (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;
這裡我們就以  `mas_makeConstraints:`  為切入點開始分析 Masonry 這個框架。`mas_makeConstraints:`  這個方法位於分類`View+MASAdditions`中，方法的實現如下：

複製程式碼

/// 新增約束

  • (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block { /// 我們是手動新增約束，因此將自動轉換關閉 self.translatesAutoresizingMaskIntoConstraints = NO; /// 建立 MASConstraintMaker 物件 MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self]; /// 通過 block 進行值的回撥 block(constraintMaker); /// 呼叫 install 方法 return [constraintMaker install]; }
該方法先去掉 AutoResizing 的自動轉換（如果這個屬性沒有被正確設定，那麼檢視的約束不會被成功新增），接著初始化一個 MASConstraintMaker 物件，傳遞到 block 中，執行 block，最後呼叫 install 方法。

第一次點選進來看到這個方法之後，我有幾處疑問。
- **第一，MASConstraintMaker 類內部做了什麼操作？**
- **第二，回撥 `block(constraintMaker) `有什麼用？**
- **第三，呼叫 `[constraintMaker install]` 方法實現了什麼？**

<br></br>

我們先來分析一下 MASConstraintMaker 這個類。MASConstraintMaker 是 Masonry 框架整個 DSL 過程的控制中心，它控制著整個新增過程，上文我們總結 Masonry 支援哪些屬性時，總結的那些屬性就來自 MASConstraintMaker 類。我們知道 Masonry 是基於 AutoLayout 進行的封裝，所以接著我們一起來看下 MASConstraintMaker 是如何發揮作用的。下面是 MASConstraintMaker 的初始化

複製程式碼

/// 這裡的 MAS_VIEW 是一個巨集，#define MAS_VIEW UIView

  • (id)initWithView:(MAS_VIEW *)view { self = [super init]; if (!self) return nil;

    self.view = view; self.constraints = NSMutableArray.new;

    return self; }

從上邊程式碼中我們可以清晰的看出，**Masonry 在初始化 MASConstraintMaker 時，將當前的 view 賦給 MASConstraintMaker 類，並初始化一個  constraints 的空可變陣列，作為約束陣列**。

除此之外 MASConstraintMaker 還做了什麼呢？

先來到 MASConstraintMaker 的標頭檔案 `MASConstraintMaker.h` 中，下面是一些比較常規的屬性

複製程式碼

/**

  • 以下屬性返回一個新的 MASViewConstraint */ @property (nonatomic, strong, readonly) MASConstraint *left; // 左側 @property (nonatomic, strong, readonly) MASConstraint *top; // 上側 @property (nonatomic, strong, readonly) MASConstraint *right; // 右側 @property (nonatomic, strong, readonly) MASConstraint *bottom; // 下側 @property (nonatomic, strong, readonly) MASConstraint *leading; // 首部 @property (nonatomic, strong, readonly) MASConstraint *trailing; // 尾部 @property (nonatomic, strong, readonly) MASConstraint *width; // 寬 @property (nonatomic, strong, readonly) MASConstraint *height; // 高 @property (nonatomic, strong, readonly) MASConstraint *centerX; // 橫向居中 @property (nonatomic, strong, readonly) MASConstraint *centerY; // 縱向居中 @property (nonatomic, strong, readonly) MASConstraint *baseline; // 文字基線

另外可以在 MASConstraintMaker 的 `MASConstraintMaker.m` 中看到另一個屬性 `@property (nonatomic, strong) NSMutableArray *constraints` ，用來儲存 MASConstraint 
複製程式碼

@interface MASConstraintMaker ()

@property (nonatomic, weak) MAS_VIEW *view; /// 儲存 MASConstraint @property (nonatomic, strong) NSMutableArray *constraints;

@end

> 接下來我們通過下面這個例子來分析上面這些屬性：

複製程式碼

[imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.bottom.left.right.equalTo(self.view).insets(UIEdgeInsetsMake(250, 100, 250, 100)); }];

- block 中首先會執行 `make.top` ，會先呼叫一個增加約束的通用方法`- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute`  ，接著會呼叫 MASConstraintMaker 中 MASConstraintDelegate 的 `- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute` 方法。具體程式碼如下：

複製程式碼

/// 重寫 getter 方法

  • (MASConstraint *)top { return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTop]; }

/// 增加約束的通用方法

  • (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute { return [self constraint:nil addConstraintWithLayoutAttribute:layoutAttribute]; }

/// 通過 NSLayoutAttribute 新增約束

  • (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {

    /// 構造 MASViewAttribute MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];

    /// 通過 MASViewAttribute 構造第一個 MASViewConstraint MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];

    /// 如果存在 contraint，則把 constraint 和 newConstraint 組合成 MASCompositeConstraint if ([constraint isKindOfClass:MASViewConstraint.class]) { //replace with composite constraint NSArray *children = @[constraint, newConstraint]; MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children]; compositeConstraint.delegate = self;

      /// 替換原來的 constraint 成新的 MASCompositeConstraint
  [self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];
  return compositeConstraint;
複製程式碼

    }

    /// 不存在則設定 constraint 到 self.constraints if (!constraint) { /// 設定delegate newConstraint.delegate = self; /// 將約束新增到self.constraints [self.constraints addObject:newConstraint]; } /// 返回剛剛建立的 MASViewConstraint 物件 return newConstraint; }

值得一提的是，當呼叫 `make.top` 的時候會建立一個只有 firstViewAttribute 的 MASViewConstraint 物件，並且**進入不存在 constraint 的程式碼部分**，詳情見程式碼塊中的註釋。

複製程式碼

/// 不存在則設定 constraint 到 self.constraints if (!constraint) { /// 設定delegate newConstraint.delegate = self; /// 將約束新增到self.constraints [self.constraints addObject:newConstraint]; } /// 返回剛剛建立的 MASViewConstraint 物件 return newConstraint;

**在這個方法的實現過程中，`make.top` 的返回值是 MASViewConstraint 物件**。

- 當執行到 `make.top.bottom` 的時候，其實**是對 MASViewConstraint 物件 .bottom 的呼叫**，會走到 MASViewConstraint 中重寫的 `- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute `方法，然後最終還是會呼叫這個代理方法 `- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute`

複製程式碼

  • (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute { NSAssert(!self.hasLayoutRelation, @"Attributes should be chained before defining the constraint relation");

    return [self.delegate constraint:self addConstraintWithLayoutAttribute:layoutAttribute]; }

/// 通過 NSLayoutAttribute 新增約束

  • (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {

    /// 構造 MASViewAttribute MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];

    /// 通過 MASViewAttribute 構造第一個 MASViewConstraint MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];

    /// 如果存在 contraint，則把 constraint 和 newConstraint 組合成 MASCompositeConstraint if ([constraint isKindOfClass:MASViewConstraint.class]) { //replace with composite constraint NSArray *children = @[constraint, newConstraint]; MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children]; compositeConstraint.delegate = self;

      /// 替換原來的 constraint 成新的 MASCompositeConstraint
  [self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];
  return compositeConstraint;
複製程式碼

    }

    /// 不存在則設定 constraint 到 self.constraints if (!constraint) { /// 設定delegate newConstraint.delegate = self; /// 將約束新增到self.constraints [self.constraints addObject:newConstraint]; } /// 返回剛剛建立的 MASViewConstraint 物件 return newConstraint; }

和前面的執行過程不同，因為 MASViewConstraint 的 delegate 物件是剛才設定過的 MASConstraintMaker 物件，並且因為 constraint 不是 nil，所以會進入
複製程式碼

/// 如果存在 contraint，則把 constraint 和 newConstraint 組合成 MASCompositeConstraint if ([constraint isKindOfClass:MASViewConstraint.class]) { //replace with composite constraint NSArray *children = @[constraint, newConstraint]; MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children]; compositeConstraint.delegate = self;

    /// 替換原來的 constraint 成新的 MASCompositeConstraint
    [self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];
    return compositeConstraint;
}
複製程式碼
因此**呼叫 make.top.bottom 返回的是一個 MASCompositeConstraint 物件**。

- 當程式執行到 `make.top.bottom.left` 時，就**是對 MASCompositeConstraint 中 .left 的呼叫**，會走 MASCompositeConstraint 中的重寫方法 `- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute`，接著會呼叫 `- (MASConstraint *)constraint:(MASConstraint __unused *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute`方法，最終還是會呼叫 `- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute`。程式碼如下：

複製程式碼

  • (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute { [self constraint:self addConstraintWithLayoutAttribute:layoutAttribute]; return self; }

  • (MASConstraint *)constraint:(MASConstraint __unused *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute { id strongDelegate = self.delegate; MASConstraint *newConstraint = [strongDelegate constraint:self addConstraintWithLayoutAttribute:layoutAttribute]; newConstraint.delegate = self; [self.childConstraints addObject:newConstraint]; return newConstraint; }

/// 通過 NSLayoutAttribute 新增約束

  • (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {

    /// 構造 MASViewAttribute MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];

    /// 通過 MASViewAttribute 構造第一個 MASViewConstraint MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];

    /// 如果存在 contraint，則把 constraint 和 newConstraint 組合成 MASCompositeConstraint if ([constraint isKindOfClass:MASViewConstraint.class]) { //replace with composite constraint NSArray *children = @[constraint, newConstraint]; MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children]; compositeConstraint.delegate = self;

      /// 替換原來的 constraint 成新的 MASCompositeConstraint
  [self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];
  return compositeConstraint;
複製程式碼

    }

    /// 不存在則設定 constraint 到 self.constraints if (!constraint) { newConstraint.delegate = self; [self.constraints addObject:newConstraint]; } return newConstraint; }


**但這次 `if ([constraint isKindOfClass:MASViewConstraint.class])` 與 `if (!constraint)` 都不會進入，只直接返回 MASViewConstraint 物件，然後回到 `- (MASConstraint *)constraint:(MASConstraint __unused *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute` 方法中設定它的 delegate，並且將物件存入 MASCompositeConstraint 的 childConstraints 中。**

- 之後再有更多的鏈式 MASConstraint 的組合（比如執行到 `make.top.bottom.left.right`），也只是 MASCompositeConstraint 的呼叫，直接加入 childConstraints 中即可。

- 至於 `equalTo(self.view)` 的呼叫過程，這裡有必要說明一下，`equalTo(self.view)` 在檔案 MASConstraint 中執行 `- (MASConstraint * (^)(id))equalTo` 方法，接著呼叫 MASViewConstraint 中的 `- (MASConstraint * (^)(id, NSLayoutRelation))equalToWithRelation` 方法。程式碼如下：

複製程式碼

/// MASConstraint 是一個抽象類，其中有很多的方法都必須在子類中覆寫。Masonry 中有兩個 MASConstraint 的子類，分別是 MASViewConstraint 和 MASCompositeConstraint

/// MASConstraint.m

  • (MASConstraint * (^)(id))equalTo { return ^id(id attribute) { return self.equalToWithRelation(attribute, NSLayoutRelationEqual); }; }

/// MASViewConstraint.m

  • (MASConstraint * (^)(id, NSLayoutRelation))equalToWithRelation { return ^id(id attribute, NSLayoutRelation relation) { if ([attribute isKindOfClass:NSArray.class]) { NSAssert(!self.hasLayoutRelation, @"Redefinition of constraint relation"); NSMutableArray *children = NSMutableArray.new;

          for (id attr in attribute) {
          MASViewConstraint *viewConstraint = [self copy];
          viewConstraint.layoutRelation = relation;
          viewConstraint.secondViewAttribute = attr;
          [children addObject:viewConstraint];
      }
      MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];
      compositeConstraint.delegate = self.delegate;
      [self.delegate constraint:self shouldBeReplacedWithConstraint:compositeConstraint];
      return compositeConstraint;
  } else {
      NSAssert(!self.hasLayoutRelation || self.layoutRelation == relation && [attribute isKindOfClass:NSValue.class], @"Redefinition of constraint relation");
      self.layoutRelation = relation;
      self.secondViewAttribute = attribute;
      return self;
  }
複製程式碼

    }; }


`- (MASConstraint * (^)(id))equalTo` 方法提供了引數 attribute 和佈局關係 NSLayoutRelationEqual，這兩個引數會傳遞到 `- (MASConstraint * (^)(id, NSLayoutRelation))equalToWithRelation` 中，設定 constraint 的佈局關係和 secondViewAttribute 屬性，為 `[constraintMaker install]` 做準備。
<br></br>

到這裡基本上就把上文的那個例子說完了，通過例子讓我們對 MASConstraintMaker 中的一些常規屬性有了一定的瞭解，同時也明白了 `block(constraintMaker)` 這個方法的作用——**在呼叫  `block(constraintMaker)` 時，對 constraintMaker 進行配置**。 MASConstraintMaker 中還有一些別的屬性，我們再一起來看看吧

複製程式碼

/**

  • 返回一個 block 物件，block 的接收引數是 MASAttribute 型別，返回一個 MASCompositeConstraint 物件 */ @property (nonatomic, strong, readonly) MASConstraint *(^attributes)(MASAttribute attrs);

/**

  • 返回一個 MASConstraint 物件，包含上下左右的佈局 */ @property (nonatomic, strong, readonly) MASConstraint *edges;

/**

  • 返回一個 MASConstraint 物件，包含寬高的佈局 */ @property (nonatomic, strong, readonly) MASConstraint *size;

/**

  • 返回一個 MASConstraint 物件，包含 centerX 和 centerY */ @property (nonatomic, strong, readonly) MASConstraint *center;
這裡只簡單的介紹一下上面的幾個屬性
> 1. `attributes`：返回一個 block 物件，block 的接收引數是 MASAttribute 型別，返回 MASCompositeConstraint 物件
2. `edges`：返回一個 MASConstraint 物件，同時包含了上下左右的佈局
3. `size`：返回一個 MASConstraint 物件，同時包含了寬高的佈局
4. `center`：返回一個 MASConstraint 物件，同時包含了 centerX 和centerY


<br></br>

**接下來我們來分析 ` [constraintMaker install]` 方法**。

我們在`- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block ` 方法的最後會呼叫 ` [constraintMaker install]`  方法來新增所有儲存在 `self.constraints` 陣列中的所有約束。

複製程式碼
  • (NSArray *)install { /// 是否需要刪除原來的約束 if (self.removeExisting) { /// 獲得所有約束 NSArray *installedConstraints = [MASViewConstraint installedConstraintsForView:self.view]; /// 刪除所有約束 for (MASConstraint *constraint in installedConstraints) { [constraint uninstall]; } } NSArray *constraints = self.constraints.copy; for (MASConstraint *constraint in constraints) { constraint.updateExisting = self.updateExisting; [constraint install]; } /// 去除所有快取的約束結構體 [self.constraints removeAllObjects]; return constraints; }

這個方法會先判斷當前檢視的約束是否需要刪除，如果我們之前呼叫過 `- (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block` 這個方法（它會把 removeExisting 的 BOOL 值設為 YES），那麼檢視中的原有約束就會被全被刪除。接著往下走，程式會遍歷 constraints 陣列，傳送 install 訊息。

複製程式碼

/// MASViewConstraint.m

  • (void)install { /// 已經有約束 if (self.hasBeenInstalled) { return; }

    /// 支援 active 且已經有約束 if ([self supportsActiveProperty] && self.layoutConstraint) { /// 啟用約束 self.layoutConstraint.active = YES; /// 新增約束快取 [self.firstViewAttribute.view.mas_installedConstraints addObject:self]; return; }

    /// 獲得 firstLayoutItem, firstLayoutAttribute, secondLayoutItem, secondLayoutAttribute MAS_VIEW *firstLayoutItem = self.firstViewAttribute.item; NSLayoutAttribute firstLayoutAttribute = self.firstViewAttribute.layoutAttribute; MAS_VIEW *secondLayoutItem = self.secondViewAttribute.item; NSLayoutAttribute secondLayoutAttribute = self.secondViewAttribute.layoutAttribute;

    // alignment attributes must have a secondViewAttribute // therefore we assume that is refering to superview // eg make.left.equalTo(@10) if (!self.firstViewAttribute.isSizeAttribute && !self.secondViewAttribute) { secondLayoutItem = self.firstViewAttribute.view.superview; secondLayoutAttribute = firstLayoutAttribute; }

    /// NSLayoutConstraint 的建立，生成約束，MASLayoutConstraint 其實就是 NSLayoutConstraint 的別名 MASLayoutConstraint *layoutConstraint = [MASLayoutConstraint constraintWithItem:firstLayoutItem attribute:firstLayoutAttribute relatedBy:self.layoutRelation toItem:secondLayoutItem attribute:secondLayoutAttribute multiplier:self.layoutMultiplier constant:self.layoutConstant];

    /// 設定 priority 和 mas_key layoutConstraint.priority = self.layoutPriority; layoutConstraint.mas_key = self.mas_key;

    /// 如果 secondViewAttribute 有 view 物件 if (self.secondViewAttribute.view) { /// 取得兩個 view 的最小公共 view MAS_VIEW *closestCommonSuperview = [self.firstViewAttribute.view mas_closestCommonSuperview:self.secondViewAttribute.view]; NSAssert(closestCommonSuperview, @"couldn't find a common superview for %@ and %@", self.firstViewAttribute.view, self.secondViewAttribute.view);

      /// 設定約束 view 為此 view
  self.installedView = closestCommonSuperview;
複製程式碼

    } else if (self.firstViewAttribute.isSizeAttribute) { self.installedView = self.firstViewAttribute.view; } else { self.installedView = self.firstViewAttribute.view.superview; }

    /// 已經存在的約束 MASLayoutConstraint *existingConstraint = nil; if (self.updateExisting) { // 需要更新 existingConstraint = [self layoutConstraintSimilarTo:layoutConstraint]; } if (existingConstraint) { // 如果存在則替換約束 // just update the constant existingConstraint.constant = layoutConstraint.constant; self.layoutConstraint = existingConstraint; } else { /// 其它情況則直接新增約束 [self.installedView addConstraint:layoutConstraint]; self.layoutConstraint = layoutConstraint; [firstLayoutItem.mas_installedConstraints addObject:self]; } }


上面這個方法是為當前檢視新增約束的最後的方法，首先這個方法會先獲取即將用於初始化 NSLayoutConstraint 的子類的幾個屬性

複製程式碼
/// MASViewConstraint.m

/// 獲得 firstLayoutItem, firstLayoutAttribute, secondLayoutItem, secondLayoutAttribute
MAS_VIEW *firstLayoutItem = self.firstViewAttribute.item;
NSLayoutAttribute firstLayoutAttribute = self.firstViewAttribute.layoutAttribute;
MAS_VIEW *secondLayoutItem = self.secondViewAttribute.item;
NSLayoutAttribute secondLayoutAttribute = self.secondViewAttribute.layoutAttribute;
複製程式碼

然後判斷當前即將新增的約束，如果不是 size 型別並且沒有提供 self.secondViewAttribute，會自動將約束新增到 superview 上

複製程式碼
/// MASViewConstraint.m
if (!self.firstViewAttribute.isSizeAttribute && !self.secondViewAttribute) {
    secondLayoutItem = self.firstViewAttribute.view.superview;
    secondLayoutAttribute = firstLayoutAttribute;
}
複製程式碼

接著建立 MASLayoutConstraint 物件

複製程式碼

/// MASViewConstraint.m /// NSLayoutConstraint 的建立，生成約束，MASLayoutConstraint 其實就是 NSLayoutConstraint 的別名 MASLayoutConstraint *layoutConstraint = [MASLayoutConstraint constraintWithItem:firstLayoutItem attribute:firstLayoutAttribute relatedBy:self.layoutRelation toItem:secondLayoutItem attribute:secondLayoutAttribute multiplier:self.layoutMultiplier constant:self.layoutConstant];

/// 設定 priority 和 mas_key
layoutConstraint.priority = self.layoutPriority;
layoutConstraint.mas_key = self.mas_key;
複製程式碼

建立完約束物件後，我們要尋找該約束新增到那個 View 上。下方的程式碼段就是獲取接收該約束物件的檢視。如果是兩個檢視相對約束，就獲取兩種的公共父檢視。如果新增的是 Width 或者 Height，那麼就新增到當前檢視上。如果既沒有指定相對檢視，也不是 Size 型別的約束，那麼就將該約束物件新增到當前檢視的父檢視上。程式碼實現如下：

複製程式碼

/// MASViewConstraint.m /// 如果 secondViewAttribute 有 view 物件 if (self.secondViewAttribute.view) { /// 取得兩個 view 的最小公共 view MAS_VIEW *closestCommonSuperview = [self.firstViewAttribute.view mas_closestCommonSuperview:self.secondViewAttribute.view]; NSAssert(closestCommonSuperview, @"couldn't find a common superview for %@ and %@", self.firstViewAttribute.view, self.secondViewAttribute.view);

    /// 設定約束 view 為此 view
    self.installedView = closestCommonSuperview;
} else if (self.firstViewAttribute.isSizeAttribute) {
    self.installedView = self.firstViewAttribute.view;
} else {
    self.installedView = self.firstViewAttribute.view.superview;
}
複製程式碼
加約束時我們要判斷是否需要對約束進行更新，如果需要，就替換約束，如果不需要就直接新增約束即可。新增成功後我們將通過 mas_installedConstraints 屬性記錄一下本次新增的約束。
複製程式碼

/// 已經存在的約束 MASLayoutConstraint *existingConstraint = nil; if (self.updateExisting) { // 需要更新 existingConstraint = [self layoutConstraintSimilarTo:layoutConstraint]; } if (existingConstraint) { // 如果存在則替換約束 // just update the constant existingConstraint.constant = layoutConstraint.constant; self.layoutConstraint = existingConstraint; } else { /// 其它情況則直接新增約束 [self.installedView addConstraint:layoutConstraint]; self.layoutConstraint = layoutConstraint; [firstLayoutItem.mas_installedConstraints addObject:self]; }


<br></br>
> 到此為止，對 [Masonry](https://github.com/SnapKit/Masonry)  原始碼的簡單介紹已接近尾聲了。。。[Masonry](https://github.com/SnapKit/Masonry)  的程式碼流程簡單來講就是提供給我們一個 MASConstraintMaker，然後我們根據 Masonry 提供的語法，新增約束。最後 Masonry 解析約束，將真正的約束關係新增到相應的檢視上。複製程式碼

相關文章