【iOS】Masnory自动布局的简单学习
前言
在之前一直都有用到视图布局,前面我用的都是手动布局,即自己计算每个视图的位置,这种方法写起来比较繁琐,现在学习了使用第三方库Masnory来进行自动布局,一般来说我们可以通过CocoaPods来安装Masonry,关于CocoaPods的安装和使用,可参考这篇文章: 【iOS】Cocoapods的安装以及使用
Masonry 是一个 Objective-C 的布局框架,用于在 iOS 和 macOS 应用中创建界面,它提供了一个链式编程的 API,里面包含了各种约束的方法,和能够对某个视图直接调用的尺寸边距之类的相当于属性的东西
链式即可以对同一个视图的多个约束可以连续写
Masnory的常用方法
基本约束方法
- makeConstraints:创建并激活一组约束。
- remakeConstraints:移除视图上的所有旧约束,并应用一组新的约束。
- updateConstraints:更新视图上的约束。
- removeConstraints:移除视图上的特定约束
约束创建方法
- equalTo:设置视图的某个属性等于另一个视图的相应属性
- greaterThanOrEqualTo:设置视图的某个属性大于或等于另一个视图的相应属性。
- lessThanOrEqualTo:设置视图的某个属性小于或等于另一个视图的相应属性。
- equalToConstant:设置视图的某个属性等于一个常数。
- greaterThanOrEqualToConstant:设置视图的某个属性大于或等于一个常数。
- lessThanOrEqualToConstant:设置视图的某个属性小于或等于一个常数。
尺寸和位置约束
- width、height:设置视图的宽度和高度。
- top、left、bottom、right:设置视图相对于其父视图的上、左、下、右边距。
- centerX、centerY:设置视图在其父视图的水平和垂直中心位置。
边距和间距
- leading、trailing:设置视图的前导边和尾随边(在支持从右到左布局的语言中使用)。
- edges:同时设置视图的上、下、左、右边距。
- 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) | 设置偏移量 |