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

王隆帥發表於2017-09-22
iOS控制元件

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);
    }];
}複製程式碼

結果如下：

三、完畢

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

相關文章