Masonry使用

最新推荐文章于 2023-01-18 20:17:35 发布

原创最新推荐文章于 2023-01-18 20:17:35 发布 · 334 阅读

1 ·

CC 4.0 BY-SA版权

iOS之UI 专栏收录该内容

68 篇文章

订阅专栏

本文介绍使用Masonry进行iOS界面布局的方法，包括创建视图、添加约束等步骤，并逐步展示如何精简代码，实现简洁高效的自动布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用masonry的时候控件必须先创建好，父视图add之后才能使用添加约束的方法（子视图添加约束的话就不用设置frame，但是父视图必须设置frame的）。

demo：

要求redView距离其父控件上、下、左、右均有30的间距。首先要创建redView：

// 添加redView
    UIView *View = [[UIView alloc] init];
    View.backgroundColor = [UIColor redColor];
    // 这里不必再写View.translatesAutoresizingMaskIntoConstraints = NO;了，原因是Masonry内部已经帮我们写过了
    [self.view addSubview:View];

添加约束：

// 给redView添加约束
    [View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).multipliedBy(1.0).with.offset(30);//（这就是xib添加约束的核心公式：redView左边 = 父控件左边 * 常数a + 常量b）
        make.bottom.equalTo(self.view.mas_bottom).multipliedBy(1.0).with.offset(-30);
        make.right.equalTo(self.view.mas_right).multipliedBy(1.0).with.offset(-30);
        make.top.equalTo(self.view.mas_top).multipliedBy(1.0).with.offset(30);
    }];

这是典型的链式编程思想：返回值类型是block，block的返回值类型是self，需要形参！

精简版：（常数a默认为1，如果约束倍数不是1的话不能使用）

// 给View添加约束
    [View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(30);
        make.bottom.equalTo(self.view.mas_bottom).offset(-30);
        make.right.equalTo(self.view.mas_right).offset(-30);
        make.top.equalTo(self.view.mas_top).offset(30);
    }];

再精简：（系统默认父视图后面的参数和自身控件参数相同）

// 给View添加约束
    [View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(30);
        make.bottom.equalTo(self.view).offset(-30);
        make.right.equalTo(self.view).offset(-30);
        make.top.equalTo(self.view).offset(30);
    }];

再精简：（系统默认是父视图是self.view,如果父视图不是的话不能这么写，必须添加父视图）

// 给View添加约束
    [View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(30);
        make.bottom.offset(-30);
        make.right.offset(-30);
        make.top.offset(30);
    }];

再精简：（把常量相同的属性写在一起）（链式编程 .语法）

// 给View添加约束
    [View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.and.top.offset(30);
        make.bottom.and.right.offset(-30);
    }];

再精简：（去掉and，个人喜好）

// 给View添加约束
    [View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.offset(30);
        make.bottom.right.offset(-30);
    }];

再精简：（设置内边距对象）

// 给View添加约束
    [View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(30, 30, 30, 30));
    }];

再精简：
// 给View添加约束
    [View mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.insets(UIEdgeInsetsMake(30, 30, 30, 30));
    }];

上述方法不是所有的都是适用的，根据不同需求，适用不同的方法，修改不同的参数：

上述方法都是添加约束的方法，如果要修改已经添加的约束，就应该使用mas_updateConstraints:或updateConstraints:方法

删除约束的话，mas_remakeConstraints:或remakeConstraints:方法，删除之后别忘了添加约束，负责后台会打印一大堆日志