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 进行布局。
动画演示
让我们用动画对比两种布局的效果：
调整容器视图宽度对比
容器视图宽度调整后，上部固定视图模式调整的是视图间隔，而下部固定间隔模式就将视图的宽度压缩了，从而保证间隔不变。
网友评论