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