iOS Masonry控件等比例布局
阿新 • • 發佈：2018-11-29
ray uic array oid 圖片 sax cell http lin
一、先解釋相關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);
}];
}
|
結果如下：
iOS Masonry控件等比例布局