iOS Masonry 等間隔或等寬高排列多個控件

masonry 目前提供了相應的接口，直接使用便可，這裏記錄或許能夠提醒某些不知道的人罷了！

1、先解釋相關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，分爲固定間隔不固定寬高，固定寬高不固定間隔，根據具體需求使用相應的便可。

須要注意的是： 橫排的時候要相應設置控件數組的垂直約束，豎排的時候要相應設置控件數字的水平約束。

2、具體實踐測試

首先作準備工做，先生成四個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;
}複製代碼

一、水平方向排列、固定控件間隔、控件長度不定

測試代碼以下

- (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);
    }];
}複製代碼

測試結果以下：

二、水平方向排列、固定控件長度、控件間隔不定

代碼以下：

- (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);
    }];
}複製代碼

測試結果以下:

三、垂直方向排列、固定控件間隔、控件高度不定

代碼以下：

- (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);
    }];
}複製代碼

結果以下：

四、垂直方向排列、固定控件高度、控件間隔不定

- (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);
    }];
}複製代碼

結果以下：

3、完畢

最近愈發的懶了，寫個博客提提神，找找感受，這大好的青春啊！可不能浪費了！我本放蕩不羈愛自由，奈何$%^&@*&^&%！