图解+动画 | 详解 Masonry 等距排列

96
溪石iOS Excellent
3.6 2019.02.01 22:56 字数 397

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 进行布局。

动画演示

让我们用动画对比两种布局的效果:
调整容器视图宽度对比

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

iOS开发基础系列
Gupao