Masonry 是一個輕量級自動布局框架，開發(fā)者可以使用更簡潔的鏈式語法為控件進行布局香椎。Masonry 的使用可以參考官網(wǎng)肤京，這里主要探究一下 Masonry 的實現(xiàn)君珠。
Masonry 是對 Auto Layout 的封裝，最終還是通過 Auto Layout 來對控件添加約束哆料。這里簡單地介紹一下約束缸剪，view 與 view 之間的布局可以用一系列線性方程來表示，一個單獨的方程就表示為一個約束东亦。下圖就是一個簡單的線性方程：
這條約束說明了紅色 view 與 藍色 view 左右之間的位置關(guān)系杏节，布局中所有的關(guān)系都可以抽象成這樣的方程唬渗，因此布局的過程就是創(chuàng)建一系列約束，也就是創(chuàng)建一系列線性方程的過程奋渔。使用 NSLayoutConstraint 來創(chuàng)建約束時镊逝，每條約束都要按照下面的方法來創(chuàng)建，這樣當布局復雜的時候就需要大量的代碼嫉鲸。Masonry 對 NSLayoutConstraint 進行了封裝撑蒜，使用起來更加簡潔易懂。下面就來探究一下 Masonry 如何對 NSLayoutConstraint 進行封裝玄渗。
// 使用 NSLayoutConstraint 創(chuàng)建約束
redView.translatesAutoresizingMaskIntoConstraints = NO
[NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:blueView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:8.0]
// 使用 Masonry
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.equalTo(blueView.mas_trailing).with.offset(8.0);
}];
Masonry 結(jié)構(gòu)
首先我們來先看一個 Masonry 中所包含的類座菠，對其有個大致的了解
其中 UIViewController+MASAdditions、UIView+MASAdditions藤树、NSArray+MASAdditions 三個 category 包含布局所使用的方法浴滴，它們通過 MASConstraintMaker 工廠類來創(chuàng)建 MASContraints，并且為視圖添加約束岁钓。MASViewConstraint 和 MASCompositeConstraint 是 MASConstraint 的子類升略，MASConstraint 是個抽象類，由其子類 MASViewConstraint 和 MASCompositeConstraint 來創(chuàng)建實例甜紫，另外 MASConstraint 里面提供對鏈式語法的支持降宅，使用者可以使用鏈式語法來創(chuàng)建約束。
在看具體的源碼之前囚霸，我們先來了解一下 Masonry 是如何表示上述布局表達式的腰根，之前說了一個表達式就表示一個 constraint，MASConstraint 就是 Masonry 中用來生成 constraint 對象的類拓型，因其是個抽象類额嘿，具體由其子類來實現(xiàn)，先來看一下 MASViewConstraint 這個類劣挫，其主要包含了兩個屬性和一個初始化方法册养，其中 firstViewAttribute 和 secondViewAttribute 對應下圖等式中的部分，如此我們只需要設置其 relationship压固，multiplier 和 constant 這個約束就完成了球拦，這些都可以通過 MASConstraint 給定的方法來完成，具體內(nèi)容下面會介紹帐我。
@interface MASViewConstraint : MASConstraint <NSCopying>
@property (nonatomic, strong, readonly) MASViewAttribute *firstViewAttribute;
@property (nonatomic, strong, readonly) MASViewAttribute *secondViewAttribute;
- (id)initWithFirstViewAttribute:(MASViewAttribute *)firstViewAttribute;
+ (NSArray *)installedConstraintsForView:(MAS_VIEW *)view;
@end
從 mas_makeConstraints 開始源碼探究
UIView+MASAdditions 依賴于 MASViewAttribute 和 MASConstraintMaker坎炼，該 category 包含類型為 MASViewAttribute 的成員屬性，并且提供了我們布局最常用的幾個方法拦键。
// 創(chuàng)建并為當前視圖添加約束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
// 更新當前視圖已有的約束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
// 移除已有約束谣光，重新布局
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
首先來看一下創(chuàng)建約束的過程，以下代碼是 mas_makeConstraints：方法的具體實現(xiàn)芬为，在使用時我們是通過 block 回調(diào)來添加約束萄金。
- 首先將 translatesAutoresizingMaskIntoConstraints 屬性設置為 NO蟀悦，Auto Layout 與 Autoresizing 不能同時使用。
- 創(chuàng)建 MASConstraintMaker 的實例氧敢，MASConstraintMaker 提供工廠方法來創(chuàng)建 MASConstraint
- 通過 block 回調(diào)創(chuàng)建約束日戈，并添加到 MASConstraintMaker 的私有數(shù)組 constraints 中
- 執(zhí)行 [constraintMaker install] 方法，最終通過 MASConstraint 的 install 的方法福稳，對相應視圖添加約束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block {
self.translatesAutoresizingMaskIntoConstraints = NO;
MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
block(constraintMaker);
return [constraintMaker install];
}
實例化 MASConstraintMaker 的過程
MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
// 創(chuàng)建 MASConstraintMaker 實例涎拉，并初始化 constraints 和 view 私有屬性，將 self.view 設置為當前 view
- (id)initWithView:(MAS_VIEW *)view {
self = [super init];
if (!self) return nil;
self.view = view;
self.constraints = NSMutableArray.new;
return self;
}
創(chuàng)建好 MASConstraintMaker 實例之后的圆，來具體看一下 block 中 make.leading.equalTo(blueView.mas_trailing).with.offset(8.0); 的執(zhí)行鼓拧，執(zhí)行結(jié)果最終生成一個類型為 MASViewConstraint 的對象。
- make 即為 MASConstraintMaker 的實例
- leading 為 MASConstraintMaker 的屬性越妈， make.leading 會執(zhí)行 MASConstraintMaker 中 leading 的 getter 方法季俩，返回一個 MASContraint 對象，實際會返回一個 MASViewConstraint 對象梅掠，并設置其 firstViewAttribute 屬性酌住。
// MASConstraintMaker.m
// leading getter 方法，返回 MASContraint 對象
- (MASConstraint *)leading {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeading];
}
- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
return [self constraint:nil addConstraintWithLayoutAttribute:layoutAttribute];
}
// 該方法創(chuàng)建 MASContraint 對象
- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];
MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];
if ([constraint isKindOfClass:MASViewConstraint.class]) {
//replace with composite constraint
NSArray *children = @[constraint, newConstraint];
MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];
compositeConstraint.delegate = self;
[self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];
return compositeConstraint;
}
if (!constraint) {
newConstraint.delegate = self;
[self.constraints addObject:newConstraint];
}
return newConstraint;
}
具體看 -(MASConstraint *)constraint: addConstraintWithLayoutAttribute: 方法
1阎抒、創(chuàng)建一個 MASViewAttribute 對象酪我，MASViewAttribute 是對 view + NSLayoutAttribute 的封裝，用來存儲 view 和 其相關(guān)的 NSLayoutAttribute且叁，描述了上述方程式等號的一邊都哭，執(zhí)行 make.leading 時，MASViewAttribute 對象初始化時的 view 即為 redView, NSLayoutAttribute 為 NSLayoutAttributeLeading
2逞带、根據(jù)第一步中的 MASViewAttribute 對象實例化 MASViewConstraint 對象欺矫，對其 firstViewAttribute 進行賦值。下面的代碼為初始化 MASViewConstraint 對象的過程
MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];
// MASViewConstraint.m
- (id)initWithFirstViewAttribute:(MASViewAttribute *)firstViewAttribute {
self = [super init];
if (!self) return nil;
_firstViewAttribute = firstViewAttribute;
self.layoutPriority = MASLayoutPriorityRequired;
self.layoutMultiplier = 1;
return self;
}
3展氓、判斷 constraint 是否存在穆趴，在當前過程中 constraint 是不存在的，因此此次執(zhí)行如下過程遇汞，設置newConstraint 的 delegate未妹，并將該對象添加到數(shù)組中。
if (!constraint) {
newConstraint.delegate = self;
[self.constraints addObject:newConstraint];
}
MASViewConstraint 對象的 delegate 方法定義在 其父類 MASConstraint 的 MASConstraint + Private.h 分類中空入，這個delegate 是實現(xiàn)鏈式語法的重點教寂。
@protocol MASConstraintDelegate <NSObject>
- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute;
@end
4、最后返回 newConstraint 對象
至此执庐，make.leading 執(zhí)行完畢，返回了 newConstraint 對象导梆，該對象的 firstViewAttribute 已經(jīng)設置好了轨淌，即為方程式的左邊部分迂烁，layoutMultiplier 也設置為了1，此時方程式只剩下右邊的 item2 递鹉、Attribute2盟步、和常數(shù)了，Masonry 已經(jīng)將item 和 attribute 打包為了 MASViewAttribute躏结。
- 接著執(zhí)行 equalTo 方法却盘， make.leading.equalTo(blueView.mas_trailing)，iOS的語法中沒有方法后面跟著(參數(shù))的媳拴，這里很明顯是一個 block黄橘，利用 block 實現(xiàn)了鏈式語法，這里要注意 block 的返回類型要為 MASConstraint 類型屈溉。
//MASViewConstraint.m
- (MASConstraint * (^)(id))equalTo {
return ^id(id attribute) {
return self.equalToWithRelation(attribute, NSLayoutRelationEqual);
};
}
// 返回值為block
- (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;
}
};
}
在執(zhí)行 equalTo 方法之前塞关，先看一下該方法 block 所需要的參數(shù) (id attr)，參數(shù)類型可以MASViewAttribute, UIView, NSValue, NSArray 中的任意一個子巾，顯然 blueView.mas_trailing 應該是 MASViewAttribute 類型的對象帆赢。
self.layoutRelation = relation;
self.secondViewAttribute = attribute;
//
- (void)setSecondViewAttribute:(id)secondViewAttribute {
if ([secondViewAttribute isKindOfClass:NSValue.class]) {
[self setLayoutConstantWithValue:secondViewAttribute];
} else if ([secondViewAttribute isKindOfClass:MAS_VIEW.class]) {
_secondViewAttribute = [[MASViewAttribute alloc] initWithView:secondViewAttribute layoutAttribute:self.firstViewAttribute.layoutAttribute];
} else if ([secondViewAttribute isKindOfClass:MASViewAttribute.class]) {
_secondViewAttribute = secondViewAttribute;
} else {
NSAssert(NO, @"attempting to add unsupported attribute: %@", secondViewAttribute);
}
}
執(zhí)行上述代碼，在 secondViewAttribute 的 set 方法中在對不同類型的參數(shù)進行區(qū)分线梗，如果是 NSValue椰于，MASConstraint.m 中有對常量設置的方法 setLayoutConstantWithValue；如果是 NSView 類型仪搔，則需要實例化一個 MASViewAttribute 對象瘾婿，此時 layoutAttribute 屬性值設置為 self.firstViewAttribute.layoutAttribute；如果是 MASViewAttribute 類型僻造，則直接賦值憋他。
// 參數(shù)類型為 NSView 類型
make.leading.equalTo(redView);
// 等價于
make.leading.equalTo(redView.mas_leading); // mas_leading 在此時即為 constraint.firstViewAttribute.layoutAttribute
此處的 secondViewAttribute 就是 等式右側(cè)
- 執(zhí)行完 make.leading.equalTo(blueView.mas_trailing)，布局等式除了 constant 之外的所有參數(shù)都已設置完畢,接下來執(zhí)行 .with髓削，該函數(shù)返回其本身竹挡，只是為了提高代碼的可讀性。
- (MASConstraint *)with {
return self;
}
- 接下來就是 .offset() 立膛， 修改 constant 為8.0
// MASConstraint.m
- (MASConstraint * (^)(CGFloat))offset {
return ^id(CGFloat offset){
self.offset = offset;
return self;
};
}
// MASViewConstraint.m
- (void)setOffset:(CGFloat)offset {
self.layoutConstant = offset;
}
到這里一個約束就建立好了揪罕，回到 mas_makeConstraints 方法中，接下來該執(zhí)行 [constraintMaker install] 對約束進行安裝宝泵，首先會判斷是夠需要移除當前約束重新添加好啰，并判斷是否需要更新現(xiàn)有約束，然后執(zhí)行 [constraint install] 找到合適的 view 來添加約束儿奶。
- (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;
}
MASConstraintDelegate 的使用
前面提到了一個 MASConstraintDelegate 的 delegate 方法框往，這個方法非常重要，對 MASConstraint 對象設置代理闯捎，才能支持鏈式調(diào)用
make.width.and.height.equalTo(@10)
make.width 的執(zhí)行過程上面已經(jīng)提過了椰弊，返回的是一個 MASViewConstraint 實例對象 newConstraint许溅，并設置 newConstraint.delegate = self ，and 方法和 with 方法一樣秉版，都返回的是自身贤重，此時調(diào)用 .height 方法就不在是 MASConstraintMaker 的方法，而是 MASViewConstraint 的 height 方法清焕，然后調(diào)用代理方法添加約束并蝗，就完成鏈式調(diào)用
// MASConstraint.m
- (MASConstraint *)height {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeHeight];
}
// MASViewConstraint.m
#pragma mark - attribute chaining
- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
NSAssert(!self.hasLayoutRelation, @"Attributes should be chained before defining the constraint relation");
return [self.delegate constraint:self addConstraintWithLayoutAttribute:layoutAttribute];
}
關(guān)于.equalTo() 的鏈式調(diào)用，可以用下面的一句話來說秸妥，具體可參考鏈接文章
