Masonry 是一個(gè)輕量級(jí)自動(dòng)布局框架，開發(fā)者可以使用更簡(jiǎn)潔的鏈?zhǔn)秸Z(yǔ)法為控件進(jìn)行布局。Masonry 的使用可以參考官網(wǎng)，這里主要探究一下 Masonry 的實(shí)現(xiàn)。
Masonry 是對(duì) Auto Layout 的封裝，最終還是通過(guò) Auto Layout 來(lái)對(duì)控件添加約束。這里簡(jiǎn)單地介紹一下約束，view 與 view 之間的布局可以用一系列線性方程來(lái)表示，一個(gè)單獨(dú)的方程就表示為一個(gè)約束。下圖就是一個(gè)簡(jiǎn)單的線性方程：
這條約束說(shuō)明了紅色 view 與 藍(lán)色 view 左右之間的位置關(guān)系，布局中所有的關(guān)系都可以抽象成這樣的方程，因此布局的過(guò)程就是創(chuàng)建一系列約束，也就是創(chuàng)建一系列線性方程的過(guò)程。使用 NSLayoutConstraint 來(lái)創(chuàng)建約束時(shí)，每條約束都要按照下面的方法來(lái)創(chuàng)建，這樣當(dāng)布局復(fù)雜的時(shí)候就需要大量的代碼。Masonry 對(duì) NSLayoutConstraint 進(jìn)行了封裝，使用起來(lái)更加簡(jiǎn)潔易懂。下面就來(lái)探究一下 Masonry 如何對(duì) NSLayoutConstraint 進(jìn)行封裝。
// 使用 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)
首先我們來(lái)先看一個(gè) Masonry 中所包含的類，對(duì)其有個(gè)大致的了解
其中 UIViewController+MASAdditions、UIView+MASAdditions、NSArray+MASAdditions 三個(gè) category 包含布局所使用的方法，它們通過(guò) MASConstraintMaker 工廠類來(lái)創(chuàng)建 MASContraints，并且為視圖添加約束。MASViewConstraint 和 MASCompositeConstraint 是 MASConstraint 的子類，MASConstraint 是個(gè)抽象類，由其子類 MASViewConstraint 和 MASCompositeConstraint 來(lái)創(chuàng)建實(shí)例，另外 MASConstraint 里面提供對(duì)鏈?zhǔn)秸Z(yǔ)法的支持，使用者可以使用鏈?zhǔn)秸Z(yǔ)法來(lái)創(chuàng)建約束。
在看具體的源碼之前，我們先來(lái)了解一下 Masonry 是如何表示上述布局表達(dá)式的，之前說(shuō)了一個(gè)表達(dá)式就表示一個(gè) constraint，MASConstraint 就是 Masonry 中用來(lái)生成 constraint 對(duì)象的類，因其是個(gè)抽象類，具體由其子類來(lái)實(shí)現(xiàn)，先來(lái)看一下 MASViewConstraint 這個(gè)類，其主要包含了兩個(gè)屬性和一個(gè)初始化方法，其中 firstViewAttribute 和 secondViewAttribute 對(duì)應(yīng)下圖等式中的部分，如此我們只需要設(shè)置其 relationship，multiplier 和 constant 這個(gè)約束就完成了，這些都可以通過(guò) MASConstraint 給定的方法來(lái)完成，具體內(nèi)容下面會(huì)介紹。
@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 的成員屬性，并且提供了我們布局最常用的幾個(gè)方法。
// 創(chuàng)建并為當(dāng)前視圖添加約束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
// 更新當(dāng)前視圖已有的約束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
// 移除已有約束，重新布局
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
首先來(lái)看一下創(chuàng)建約束的過(guò)程，以下代碼是 mas_makeConstraints：方法的具體實(shí)現(xiàn)，在使用時(shí)我們是通過(guò) block 回調(diào)來(lái)添加約束。
- 首先將 translatesAutoresizingMaskIntoConstraints 屬性設(shè)置為 NO，Auto Layout 與 Autoresizing 不能同時(shí)使用。
- 創(chuàng)建 MASConstraintMaker 的實(shí)例，MASConstraintMaker 提供工廠方法來(lái)創(chuàng)建 MASConstraint
- 通過(guò) block 回調(diào)創(chuàng)建約束，并添加到 MASConstraintMaker 的私有數(shù)組 constraints 中
- 執(zhí)行 [constraintMaker install] 方法，最終通過(guò) MASConstraint 的 install 的方法，對(duì)相應(yīng)視圖添加約束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block {
self.translatesAutoresizingMaskIntoConstraints = NO;
MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
block(constraintMaker);
return [constraintMaker install];
}
實(shí)例化 MASConstraintMaker 的過(guò)程
MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
// 創(chuàng)建 MASConstraintMaker 實(shí)例，并初始化 constraints 和 view 私有屬性，將 self.view 設(shè)置為當(dāng)前 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 實(shí)例之后，來(lái)具體看一下 block 中 make.leading.equalTo(blueView.mas_trailing).with.offset(8.0); 的執(zhí)行，執(zhí)行結(jié)果最終生成一個(gè)類型為 MASViewConstraint 的對(duì)象。
- make 即為 MASConstraintMaker 的實(shí)例
- leading 為 MASConstraintMaker 的屬性， make.leading 會(huì)執(zhí)行 MASConstraintMaker 中 leading 的 getter 方法，返回一個(gè) MASContraint 對(duì)象，實(shí)際會(huì)返回一個(gè) MASViewConstraint 對(duì)象，并設(shè)置其 firstViewAttribute 屬性。
// MASConstraintMaker.m
// leading getter 方法，返回 MASContraint 對(duì)象
- (MASConstraint *)leading {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeading];
}
- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
return [self constraint:nil addConstraintWithLayoutAttribute:layoutAttribute];
}
// 該方法創(chuàng)建 MASContraint 對(duì)象
- (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)建一個(gè) MASViewAttribute 對(duì)象，MASViewAttribute 是對(duì) view + NSLayoutAttribute 的封裝，用來(lái)存儲(chǔ) view 和 其相關(guān)的 NSLayoutAttribute，描述了上述方程式等號(hào)的一邊，執(zhí)行 make.leading 時(shí)，MASViewAttribute 對(duì)象初始化時(shí)的 view 即為 redView, NSLayoutAttribute 為 NSLayoutAttributeLeading
2、根據(jù)第一步中的 MASViewAttribute 對(duì)象實(shí)例化 MASViewConstraint 對(duì)象，對(duì)其 firstViewAttribute 進(jìn)行賦值。下面的代碼為初始化 MASViewConstraint 對(duì)象的過(guò)程
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 是否存在，在當(dāng)前過(guò)程中 constraint 是不存在的，因此此次執(zhí)行如下過(guò)程，設(shè)置newConstraint 的 delegate，并將該對(duì)象添加到數(shù)組中。
if (!constraint) {
newConstraint.delegate = self;
[self.constraints addObject:newConstraint];
}
MASViewConstraint 對(duì)象的 delegate 方法定義在 其父類 MASConstraint 的 MASConstraint + Private.h 分類中，這個(gè)delegate 是實(shí)現(xiàn)鏈?zhǔn)秸Z(yǔ)法的重點(diǎn)。
@protocol MASConstraintDelegate <NSObject>
- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute;
@end
4、最后返回 newConstraint 對(duì)象
至此，make.leading 執(zhí)行完畢，返回了 newConstraint 對(duì)象，該對(duì)象的 firstViewAttribute 已經(jīng)設(shè)置好了，即為方程式的左邊部分，layoutMultiplier 也設(shè)置為了1，此時(shí)方程式只剩下右邊的 item2 、Attribute2、和常數(shù)了，Masonry 已經(jīng)將item 和 attribute 打包為了 MASViewAttribute。
- 接著執(zhí)行 equalTo 方法， make.leading.equalTo(blueView.mas_trailing)，iOS的語(yǔ)法中沒(méi)有方法后面跟著(參數(shù))的，這里很明顯是一個(gè) block，利用 block 實(shí)現(xiàn)了鏈?zhǔn)秸Z(yǔ)法，這里要注意 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 中的任意一個(gè)，顯然 blueView.mas_trailing 應(yīng)該是 MASViewAttribute 類型的對(duì)象。
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 方法中在對(duì)不同類型的參數(shù)進(jìn)行區(qū)分，如果是 NSValue，MASConstraint.m 中有對(duì)常量設(shè)置的方法 setLayoutConstantWithValue；如果是 NSView 類型，則需要實(shí)例化一個(gè) MASViewAttribute 對(duì)象，此時(shí) layoutAttribute 屬性值設(shè)置為 self.firstViewAttribute.layoutAttribute；如果是 MASViewAttribute 類型，則直接賦值。
// 參數(shù)類型為 NSView 類型
make.leading.equalTo(redView);
// 等價(jià)于
make.leading.equalTo(redView.mas_leading); // mas_leading 在此時(shí)即為 constraint.firstViewAttribute.layoutAttribute
此處的 secondViewAttribute 就是 等式右側(cè)
- 執(zhí)行完 make.leading.equalTo(blueView.mas_trailing)，布局等式除了 constant 之外的所有參數(shù)都已設(shè)置完畢,接下來(lái)執(zhí)行 .with，該函數(shù)返回其本身，只是為了提高代碼的可讀性。
- (MASConstraint *)with {
return self;
}
- 接下來(lái)就是 .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;
}
到這里一個(gè)約束就建立好了，回到 mas_makeConstraints 方法中，接下來(lái)該執(zhí)行 [constraintMaker install] 對(duì)約束進(jìn)行安裝，首先會(huì)判斷是夠需要移除當(dāng)前約束重新添加，并判斷是否需要更新現(xiàn)有約束，然后執(zhí)行 [constraint install] 找到合適的 view 來(lái)添加約束。
- (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 的使用
前面提到了一個(gè) MASConstraintDelegate 的 delegate 方法，這個(gè)方法非常重要，對(duì) MASConstraint 對(duì)象設(shè)置代理，才能支持鏈?zhǔn)秸{(diào)用
make.width.and.height.equalTo(@10)
make.width 的執(zhí)行過(guò)程上面已經(jīng)提過(guò)了，返回的是一個(gè) MASViewConstraint 實(shí)例對(duì)象 newConstraint，并設(shè)置 newConstraint.delegate = self ，and 方法和 with 方法一樣，都返回的是自身，此時(shí)調(diào)用 .height 方法就不在是 MASConstraintMaker 的方法，而是 MASViewConstraint 的 height 方法，然后調(diào)用代理方法添加約束，就完成鏈?zhǔn)秸{(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() 的鏈?zhǔn)秸{(diào)用，可以用下面的一句話來(lái)說(shuō)，具體可參考鏈接文章
