Masonry使用心得(自用)

2017-11-22  本文已影响14人  冰land

设置内边距

CGFloat padding = 10;
[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(padding, padding, padding, padding));
}];

大于等于和小于等于某个值的约束

[self.textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(self.view);
    // 设置宽度小于等于200
    make.width.lessThanOrEqualTo(@200);
    // 设置高度大于等于10
    make.height.greaterThanOrEqualTo(@(10));
}];

设置约束比例

// 设置当前约束值乘以多少,例如这个例子是redView的宽度是self.view宽度的0.2倍。
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(self.view);
    make.height.mas_equalTo(30);
    make.width.equalTo(self.view).multipliedBy(0.2);
}];

子视图等高

/** 
 下面的例子是通过给equalTo()方法传入一个数组,设置数组中子视图及当前make对应的视图之间等高。
 
 需要注意的是,下面block中设置边距的时候,应该用insets来设置,而不是用offset。
 因为用offset设置right和bottom的边距时,这两个值应该是负数,所以如果通过offset来统一设置值会有问题。
 */
    self.greenView = [[UIView alloc] init];
    self.greenView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:self.greenView];
    
    self.redView = [[UIView alloc] init];
    self.redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.redView];
    
    self.yellowView = [[UIView alloc] init];
    self.yellowView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:self.yellowView];
    
    CGFloat padding = 10;
    [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.top.equalTo(self.view).insets(UIEdgeInsetsMake(padding, padding, 0, padding));
        make.bottom.equalTo(self.greenView.mas_top).offset(-padding);
    }];
    
    [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, 0, padding));
        make.bottom.equalTo(self.yellowView.mas_top).offset(-padding);
    }];
    
    /**
     下面设置make.height的数组是关键,通过这个数组可以设置这三个视图高度相等。其他例如宽度之类的,也是类似的方式。
     */
    [self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, padding, padding));
        make.height.equalTo(@[self.greenView, self.redView]);
    }];

子视图垂直居中

/** 
 要求:(这个例子是在其他人博客里看到的,然后按照要求自己写了下面这段代码)
 两个视图相对于父视图垂直居中,并且两个视图以及父视图之间的边距均为10,高度为150,两个视图宽度相等。
 */
CGFloat padding = 10.f;
[self.blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(self.view);
    make.left.equalTo(self.view).mas_offset(padding);
    make.right.equalTo(self.redView.mas_left).mas_offset(-padding);
    make.width.equalTo(self.redView);
    make.height.mas_equalTo(150);
}];
 
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(self.view);
    make.right.equalTo(self.view).mas_offset(-padding);
    make.width.equalTo(self.blueView);
    make.height.mas_equalTo(150);
}];

UIScrollView自动布局

这个例子中将会展示动态改变contentSize的大小,内部视图有多少contentSize就自动扩充到多大。

这种方式的实现,主要是依赖于创建一个containerView内容视图,并添加到UIScrollView上作为子视图。UIScrollView原来的子视图都添加到containerView上,并且和这个视图设置约束。

因为对UIScrollView进行addSubview操作的时候,本质上是往其contentView上添加。也就是containerView的父视图是contentView,通过containerView撑起contentView视图的大小,以此来实现动态改变contentSize。

    self.scrollView = [[UIScrollView alloc] init];
    [self.view addSubview:self.scrollView];
    
    self.containerView = [[UIView alloc] init];
    [self.scrollView addSubview:self.containerView];
    
    self.greenView = [[UIView alloc] init];
    self.greenView.backgroundColor = [UIColor greenColor];
    [self.containerView addSubview:self.greenView];
    
    self.redView = [[UIView alloc] init];
    self.redView.backgroundColor = [UIColor redColor];
    [self.containerView addSubview:self.redView];
    
    self.yellowView = [[UIView alloc] init];
    self.yellowView.backgroundColor = [UIColor yellowColor];
    [self.containerView addSubview:self.yellowView];
    
    [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];
    
    CGFloat padding = 10;
    [self.containerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.scrollView).insets(UIEdgeInsetsMake(padding, padding, padding, padding));
    }];
    
    [self.containerView addSubview:self.greenView];
    [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.equalTo(self.containerView).offset(padding);
        make.size.mas_equalTo(CGSizeMake(250, 250));
    }];
    
    [self.containerView addSubview:self.redView];
    [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.containerView).offset(padding);
        make.left.equalTo(self.greenView.mas_right).offset(padding);
        make.size.equalTo(self.greenView);
        make.right.equalTo(self.containerView).offset(-padding);
    }];
    
    [self.containerView addSubview:self.yellowView];
    [self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.containerView).offset(padding);
        make.top.equalTo(self.greenView.mas_bottom).offset(padding);
        make.size.equalTo(self.greenView);
        make.bottom.equalTo(self.containerView).offset(-padding);
    }];
上一篇下一篇

猜你喜欢

热点阅读