iOS Masonry控件等比例布局

一、先解释相关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 );      }]; }

结果如下：

转载于:https://www.cnblogs.com/chenweb/p/10039951.html