iOS开发之Masonry（一）

最新推荐文章于 2023-04-30 14:27:13 发布

原创最新推荐文章于 2023-04-30 14:27:13 发布 · 657 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #Masonry

iOS开发之随笔专栏收录该内容

37 篇文章

订阅专栏

本文介绍了Masonry布局的使用方法，并详细解释了如何为控件添加约束。通过实例代码展示了如何设置子视图与父视图及其它视图之间的位置关系，包括顶部、底部、左侧、右侧等方向上的定位，以及宽度和高度的调整。

本文主要介绍Masonry的简单实用，并联系如何给控件添加约束：mas_makeConstraints。下面就马上上代码来使用。

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    // 创建redview
    UIView *redView = [[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor = [UIColor redColor];
    
    // 创建greenView
    UIView *greenView = [[UIView alloc] init];
    [self.view addSubview:greenView];
    greenView.backgroundColor = [UIColor greenColor];

    // 创建blueView
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    
    // 添加约束
    // 1.red view:距离父控件顶部20，距离父控件左边100，自身宽高（100，100）
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).with.offset(20);
        make.left.equalTo(self.view).with.offset(100);
        make.size.mas_equalTo(CGSizeMake(100, 100));
        
    }];
    
    // 1.green view:距离redview底部20，距离父控件右边100，自身宽高（200，100）
    [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(redView.mas_bottom).with.offset(20);
        make.right.equalTo(self.view).with.offset(-100);
        make.size.mas_equalTo(CGSizeMake(200, 100));
        
    }];
    
    // 1.blue view:顶部等于greenview底部，中点x等于父控件中点x，自身宽高等于greenview的宽高
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(greenView.mas_bottom);
        make.centerX.equalTo(self.view);
        make.size.equalTo(greenView);
        
    }];
    
}

代码说明：

具体view的约束都已经现在注释里了。

对于上述约束来说是很好理解的，比如：(redView顶部约束)

make.top.equalTo(self.view).with.offset(20);

意思：我（子控件）的顶部距离父控件的顶部相差20

这里说一下注意点：

1.使用约束之前一定要先将子view添加到父view上。

2.每个子view的约束一定要完整，（除某些控件外，以后会说到）。

3.添加约束的代码也可以放在控制器的- (void)updateViewConstraints方法中，可以看出来该方法是专门用来更新控件的约束的。