图解+动画 | 详解 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 进行布局。

动画演示

让我们用动画对比两种布局的效果：

调整容器视图宽度对比

容器视图宽度调整后，上部固定视图模式调整的是视图间隔，而下部固定间隔模式就将视图的宽度压缩了，从而保证间隔不变。