一、先解釋相關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
);
}];
}
|
結果如下：
