数字 等宽 ios html5,iOS Masonry 等间隔或等宽高排列多个控件

masonry 目前提供了相应的接口，直接使用即可，这里记录或许可以提醒某些不知道的人罢了！

一、先解释相关API

/**

* 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(需要被排列的)，代码如下：

- (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、水平方向排列、固定控件间隔、控件长度不定

测试代码如下

- (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、水平方向排列、固定控件长度、控件间隔不定

代码如下：

- (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、垂直方向排列、固定控件间隔、控件高度不定

代码如下：

- (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、垂直方向排列、固定控件高度、控件间隔不定

- (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);

}];

}

结果如下：

三、完毕

最近愈发的懒了，写个博客提提神，找找感觉，这大好的青春啊！可不能浪费了！

我本放荡不羁爱自由，奈何$%&@*&&%！