圖解+動畫 | 詳解 Masonry 等距排列

摘要： Masonry 是對原生AutoLayout系統的第三方封裝，為原生AutoLayout提供了鏈式程式設計的API，方便開發者通過編碼方式設定自動佈局，本篇介紹如何使用 Masonry 進行等距排列。 等距排列 等距排列指的是檢視在水平或垂直方向上，按相等的間距排列，微信朋友圈的九宮格...

Masonry 是對原生AutoLayout系統的第三方封裝，為原生AutoLayout提供了鏈式程式設計的API，方便開發者通過編碼方式設定自動佈局，本篇介紹如何使用 Masonry 進行等距排列。

等距排列

等距排列指的是檢視在水平或垂直方向上，按相等的間距排列，微信朋友圈的九宮格就屬於這種排列，是介面佈局上常見的需求，但如果使用frame需要做手工計算，程式碼冗長，可喜的是 Masonry 為我們提供了 distributeViewsAlongAxis 的方便方法。

兩種等距模式

模式一：固定檢視模式

- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing

模式二：固定間隔模式

- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing

兩種模式主要是 引數2 的區別，差異如圖所示：

axisType 控制等分方向，可選擇水平方向或垂直方向；

leadSpacing 頭部間距，不參與等分處理；

tailSpacing 尾部間距，不參與等分處理。

完整程式碼：

UIView *containView = [[UIView alloc] initWithFrame:CGRectZero];
[self.view addSubview:containView];
_containView = containView;
containView.backgroundColor = UIColorHex(0x00A2FF);
[containView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view).mas_offset(CGPointMake(0, -200));
make.size.mas_equalTo(CGSizeMake(300, 300));
}];

UIView *view1 = [[UIView alloc] initWithFrame:CGRectZero];
[containView addSubview:view1];
view1.backgroundColor = UIColorHex(0xD98F2C);
UIView *view2 = [[UIView alloc] initWithFrame:CGRectZero];
[containView addSubview:view2];
view2.backgroundColor = UIColorHex(0x64D4D0);

UIView *view3 = [[UIView alloc] initWithFrame:CGRectZero];
[containView addSubview:view3];
view3.backgroundColor = UIColorHex(0xFD7098);


NSArray *array = @[view1, view2, view3];
[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:60 leadSpacing:20 tailSpacing:20];
[array mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(containView);
make.size.mas_equalTo(CGSizeMake(60, 60));
}];

將要等分佈局的檢視放入陣列中，呼叫 NSArray 類別方法，傳遞等分引數，這時候只是確定了等分方式，對陣列中的檢視大小、位置（等分方向的對應位置）需要再呼叫 makeConstraints 進行佈局。

動畫演示

讓我們用動畫對比兩種佈局的效果：

容器檢視寬度調整後，上部固定檢視模式調整的是檢視間隔，而下部固定間隔模式就將檢視的寬度壓縮了，從而保證間隔不變。