IOS基础-Masonry 练习-02

Masonry练习补充内容

Masonry更新约束

添加一个按钮,点击之后变小

    UIButton* centerBotton = [[UIButton alloc] init];
    self.actionBtn = centerBotton;
    centerBotton.backgroundColor = [UIColor greenColor];
    [centerBotton setBackgroundImage:[UIImage imageNamed:@""] forState:UIControlStateNormal];
    [centerBotton setTitle:@"点击我更新约束" forState:UIControlStateNormal];
    [centerBotton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    centerBotton.titleLabel.font = [UIFont systemFontOfSize:18];
    centerBotton.layer.cornerRadius = 5;
    centerBotton.contentEdgeInsets = UIEdgeInsetsMake(5, 10, 5, 10);
    [centerBotton addTarget:self action:@selector(didClickBtn:) forControlEvents:UIControlEventTouchUpInside];
    [root addSubview:centerBotton];
    [centerBotton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(root);
        make.width.equalTo(@300);
        make.height.equalTo(@300);
    }];

IOS基础-Masonry 练习-02_第1张图片
效果图
-(void)didClickBtn:(id)tap{
    
    [self.actionBtn mas_updateConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@100);
        make.height.equalTo(@100);
    }];
    
}
IOS基础-Masonry 练习-02_第2张图片
效果图

Masonry重置约束

它和更新类似,就是取消原来的约束重新设置,比如设置了大小,但是原来的设置居中对齐就会被取消了,因为它是重置的。

 [self.actionBtn mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@100);
        make.height.equalTo(@100);
    }];

多个控件的等间隔排序显示

先来看看两个函数的说明


IOS基础-Masonry 练习-02_第3张图片
两个函数说明

上面的第一个函数:是控件固定长度或者宽度
上面的第二个函数:是间隔一样的,长度宽度变化

1、第一种情况实践

有了上面的说明,我们就设置横向控件固定大小,头尾部设置不一样的间距,排放在添加到父控件的底部。

    //往新建的布局添加 4个布局
    NSMutableArray *subViews = [NSMutableArray new];
    for (int i = 0; i < 4; i ++) {
        UIView *view = [[UIView alloc]init];
        view.backgroundColor = [UIColor whiteColor];
        [root addSubview:view];
        [subViews addObject:view];
    }
    //设置横向 :MASAxisTypeHorizontal
    //withFixedItemLength :固定宽度 50
    //leadSpacing :前面间距 0
    //tailSpacing :后面间距 10
    [subViews mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:50 leadSpacing:0 tailSpacing:10];
    //对这个 subViews 添加约束,高度 50 放到底部
    [subViews mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@50);
        make.bottom.equalTo(root).offset(-10.0f);
    }];
IOS基础-Masonry 练习-02_第4张图片
横向固定控件大小
2、第二种情况实践

设置了固定的间距,控件大小变大了,withFixedSpacing 设置为20的间距。


    //往新建的布局添加 4个布局
    NSMutableArray *subViews = [NSMutableArray new];
    for (int i = 0; i < 4; i ++) {
        UIView *view = [[UIView alloc]init];
        view.backgroundColor = [UIColor whiteColor];
        [root addSubview:view];
        [subViews addObject:view];
    }
    //设置横向 :MASAxisTypeHorizontal
    //withFixedSpacing :固定间距 20
    //leadSpacing :前面间距 10
    //tailSpacing :后面间距 10
    [subViews mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:10 tailSpacing:10];
    //对这个 subViews 添加约束,高度 50 放到底部
    [subViews mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.equalTo(@50);
        make.bottom.equalTo(root).offset(-10.0f);
    }];
IOS基础-Masonry 练习-02_第5张图片
效果图

你可能感兴趣的:(IOS基础-Masonry 练习-02)