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

【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);//距离父视图顶部100make.left.equalTo(self.view).offset(40);//距离父视图左边40make.width.mas_equalTo(100);    //宽100make.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)	设置偏移量