一、先解释相关API
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/** * distribute with fixed spacing
*
* @param axisType 横排还是竖排
* @param fixedSpacing 两个控件间隔
* @param leadSpacing 第一个控件与边缘的间隔
* @param tailSpacing 最后一个控件与边缘的间隔
*/
- ( void )mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
/** * distribute with fixed item size
*
* @param axisType 横排还是竖排
* @param fixedItemLength 控件的宽或高
* @param leadSpacing 第一个控件与边缘的间隔
* @param tailSpacing 最后一个控件与边缘的间隔
*/
- ( void )mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
|
两个API,分为固定间隔不固定宽高,固定宽高不固定间隔,根据具体需求使用相应的即可。
需要注意的是: 横排的时候要相应设置控件数组的垂直约束,竖排的时候要相应设置控件数字的水平约束。
二、具体实践测试
首先做准备工作,先生成四个View(需要被排列的),代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
- (NSMutableArray *)masonryViewArray { if (!_masonryViewArray) {
_masonryViewArray = [NSMutableArray array];
for ( int i = 0 ; i < 4 ; i ++) {
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];
[_masonryViewArray addObject:view];
}
}
return _masonryViewArray;
} |
1、水平方向排列、固定控件间隔、控件长度不定
测试代码如下
1
2
3
4
5
6
7
8
9
10
11
|
- ( void )test_masonry_horizontal_fixSpace {
// 实现masonry水平固定间隔方法
[self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing: 30 leadSpacing: 10 tailSpacing: 10 ];
// 设置array的垂直方向的约束
[self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo( 150 );
make.height.equalTo( 80 );
}];
} |
测试结果如下:
2、水平方向排列、固定控件长度、控件间隔不定
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
- ( void )test_masonry_horizontal_fixItemWidth {
// 实现masonry水平固定控件宽度方法
[self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength: 80 leadSpacing: 10 tailSpacing: 10 ];
// 设置array的垂直方向的约束
[self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo( 150 );
make.height.equalTo( 80 );
}];
} |
测试结果如下:
3、垂直方向排列、固定控件间隔、控件高度不定
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
- ( void )test_masonry_vertical_fixSpace {
// 实现masonry垂直固定控件高度方法
[self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing: 30 leadSpacing: 10 tailSpacing: 10 ];
// 设置array的水平方向的约束
[self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo( 150 );
make.width.equalTo( 80 );
}];
} |
结果如下:
4、垂直方向排列、固定控件高度、控件间隔不定
1
2
3
4
5
6
7
8
9
10
11
12
|
- ( void )test_masonry_vertical_fixItemWidth {
// 实现masonry垂直方向固定控件高度方法
[self.masonryViewArray mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength: 80 leadSpacing: 10 tailSpacing: 10 ];
// 设置array的水平方向的约束
[self.masonryViewArray mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo( 150 );
make.width.equalTo( 80 );
}];
} |
结果如下: