【iOS】Masnory自动布局的简单学习

发布于:2025-08-30 ⋅ 阅读:(19) ⋅ 点赞:(0)

【iOS】Masnory自动布局的简单学习

前言

在之前一直都有用到视图布局,前面我用的都是手动布局,即自己计算每个视图的位置,这种方法写起来比较繁琐,现在学习了使用第三方库Masnory来进行自动布局,一般来说我们可以通过CocoaPods来安装Masonry,关于CocoaPods的安装和使用,可参考这篇文章: 【iOS】Cocoapods的安装以及使用

Masonry 是一个 Objective-C 的布局框架,用于在 iOS 和 macOS 应用中创建界面,它提供了一个链式编程的 API,里面包含了各种约束的方法,和能够对某个视图直接调用的尺寸边距之类的相当于属性的东西

链式即可以对同一个视图的多个约束可以连续写

Masnory的常用方法

基本约束方法

  1. makeConstraints:创建并激活一组约束。
  2. remakeConstraints:移除视图上的所有旧约束,并应用一组新的约束。
  3. updateConstraints:更新视图上的约束。
  4. removeConstraints:移除视图上的特定约束

约束创建方法

  1. equalTo:设置视图的某个属性等于另一个视图的相应属性
  2. greaterThanOrEqualTo:设置视图的某个属性大于或等于另一个视图的相应属性。
  3. lessThanOrEqualTo:设置视图的某个属性小于或等于另一个视图的相应属性。
  4. equalToConstant:设置视图的某个属性等于一个常数。
  5. greaterThanOrEqualToConstant:设置视图的某个属性大于或等于一个常数。
  6. lessThanOrEqualToConstant:设置视图的某个属性小于或等于一个常数。

尺寸和位置约束

  1. width、height:设置视图的宽度和高度。
  2. top、left、bottom、right:设置视图相对于其父视图的上、左、下、右边距。
  3. centerX、centerY:设置视图在其父视图的水平和垂直中心位置。

边距和间距

  1. leading、trailing:设置视图的前导边和尾随边(在支持从右到左布局的语言中使用)。
  2. edges:同时设置视图的上、下、左、右边距。
  3. size:同时设置视图的宽度和高度。

示例代码

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel* label = [[UILabel alloc] init];
    self.ispress = YES;
    self.view.backgroundColor = [UIColor whiteColor];
    [self.view addSubview: label];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);//水平中心属性
        make.top.equalTo(self.view).offset(100);//距离父视图顶部100
        make.left.equalTo(self.view).offset(40);//距离父视图左边40
        make.width.mas_equalTo(100);    //宽100
        make.height.mas_equalTo(50);    //高50
    }];
    label.backgroundColor = [UIColor blueColor];
    UIButton* button = [UIButton buttonWithType: UIButtonTypeCustom];
    [self.view addSubview: button];
    [button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(label);
        make.top.equalTo(label.mas_bottom).offset(100);
        make.size.mas_equalTo(CGSizeMake(200, 50));
    }];
    [button setBackgroundColor: [UIColor yellowColor]];
    [button setTitle: @"更新约束" forState: UIControlStateNormal];
    [button addTarget: self action: @selector(press:) forControlEvents: UIControlEventTouchUpInside];
    [button setTitleColor: [UIColor blackColor] forState: UIControlStateNormal];
    
}
- (void)press:(UIButton*)btn {
    if (self.ispress == YES) {
        [btn mas_updateConstraints:^(MASConstraintMaker *make) {
            make.size.mas_equalTo(CGSizeMake(200, 200));
        }];
        self.ispress = NO;
    } else {
        [btn mas_updateConstraints:^(MASConstraintMaker *make) {
            make.size.mas_equalTo(CGSizeMake(200, 50));
        }];
        self.ispress = YES;
    }
}

请添加图片描述

常用方法及解释

方法 作用 备注
mas_makeConstraints 添加新约束 会保留原有约束,不会覆盖
mas_updateConstraints 更新已有约束 如果约束不存在不会添加
mas_remakeConstraints 删除所有旧约束并重新添加 用于完全改变布局
make.top/left/right/bottom.equalTo(…) 设置上下左右位置 可结合 offset() 调整偏移
make.width/height.equalTo(…) 设置宽高 可以用固定值或与其他视图相等
make.centerX/centerY.equalTo(…) 设置水平/垂直居中 也可用 make.center.equalTo(…) 同时居中
offset(value) 设置偏移量

网站公告

今日签到

点亮在社区的每一天
去签到