Masonry学习

Masonry比例用法

有时子视图的需要在父视图中等比例的显示，一般会用到multipliedBy(0.2)或者dividedBy(5),这两者使用的效果一样

长度关系和位置关系，不能做比例运算。
举个例子
我现在希望子视图的横向中心线(centerY)在高度的1/5处，一般的想法是 
make.centerY.mas_equalTo(self.height).multipliedBy(0.2); 
运行出错。
正确的做法是make.centerY.mas_equalTo(self.bottom).multipliedBy(0.2); 
同理，我想子视图的垂直中心线(centerX)在宽的1/5处，应为 
make.centerX.mas_equalTo(self.right).dividedBy(5);
最后，高度和宽度的比例那就更容易理解了. 
make.height.mas_equalTo(self.height).dividedBy(5); (子视图高度是父视图高度的1/5)

// width/height比为1/3.0，要求是同一个控件的属性比例
[bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.bottom.mas_equalTo(bottomView);
    make.center.mas_equalTo(bottomView);
    // 注意，这个multipliedBy的使用只能是设置同一个控件的，比如这里的bottomInnerView，
    // 设置高/宽为3:1
    make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

    make.width.height.mas_equalTo(bottomView).priorityLow();
    make.width.height.lessThanOrEqualTo(bottomView);
  }];

Masonry 等间隔或等宽高排列多个控件

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