AutoLayout与Masonry:简化iOS布局

Auto Layout 与 Masonry

苹果提供的自动布局(Auto Layout)能够对视图进行灵活有效的布局。但是,使用原生的自动布局相关的语法创建约束的过程是非常冗长的,可读性也比较差。

Masonry 的目标其实就是 为了解决原生自动布局语法冗长的问题

其实说到本质,它和手动布局是一样的。对一个控件放在哪里,我们依然只关心它的(x, y, width, height)。但手动布局的方式是,一次性计算出这四个值,然后设置进去,完成布局。但当父控件或屏幕发生变化时,子控件的计算就要重新来过,非常麻烦。

因此,在自动布局中,我们不再关心(x, y, width, height)的具体值,我们只关心(x, y, width, height)四个量对应的约束。

约束

添加约束的规则:

如果两个控件是父子控件,则添加到父控件中。

如果两个控件不是父子控件,则添加到层级最近的共同父控件中。

我们查看源码:

基本属性

添加约束的三种方法:

Masonry是基于AutoLayout实现计算视图Frame的

objectivec 复制代码
// 定义这个常量,就可以不用在开发过程中使用"mas_"前缀。
#define MAS_SHORTHAND
// 定义这个常量,就可以让Masonry帮我们自动把基础数据类型的数据,自动装箱为对象类型。
#define MAS_SHORTHAND_GLOBALS

Masonry的使用:

mas_equalTo和equalTo的区别

用法 常见场景 例子
equalTo(view) 对齐某个 view 的同属性 make.left.equalTo(self.view)
equalTo(view.mas_xxx) 对齐某个 view 的特定属性 make.left.equalTo(otherView.mas_right)
equalTo(@数值) 固定数值(必须手动包对象) make.width.equalTo(@100)
mas_equalTo(数值) 固定数值、结构体(推荐写法) make.width.mas_equalTo(100
objectivec 复制代码
 [button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(20)
        make.bottom.equalTo(self.view).offset(0);
        make.right.equalTo(self.view).offset(10);
        make.left.equalTo(self.view).offset(200);
        make.centerX.equalTo(self.view);//水平居中
        make.centerY.equalTo(self.view);//垂直居中
        make.width.height.mas_equalTo(60);
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));//四周都留20
        make.width.equalTo(self.view).multipliedBy(0.5); //宽度 = 父视图的一半
    }];

下图为使用Masonry实现的折叠cell demo。

objectivec 复制代码
- (void)viewDidLoad {
    [super viewDidLoad];
    self.foldTableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
    self.foldTableView.delegate = self;
    self.foldTableView.dataSource = self;
    [self.view addSubview:self.foldTableView];
    [self.foldTableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(200);
        make.top.equalTo(self.view).offset(300);
        make.width.mas_equalTo(100);
        make.height.mas_equalTo(30);
    }];
    
    self.array = [NSMutableArray arrayWithObjects:@"1", @"2", @"3", @"4", @"5", nil];
    
    self.btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.btn setImage:[UIImage imageNamed:@"kaiqi"] forState:UIControlStateNormal];
    [self.btn setImage:[UIImage imageNamed:@"guanbi"] forState:UIControlStateSelected];
    [self.btn addTarget:self action:@selector(press:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:self.btn];
    [self.btn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(270);
        make.top.equalTo(self.view).offset(300);
        make.width.mas_equalTo(40);
        make.height.mas_equalTo(40);
    }];
}
相关推荐
游戏开发爱好者821 分钟前
Nginx HTTPS 深入实战 配置、性能与排查全流程(Nginx https
运维·nginx·ios·小程序·https·uni-app·iphone
游戏开发爱好者82 小时前
TCP 抓包分析:tcp抓包工具、 iOS/HTTPS 流量解析全流程
网络协议·tcp/ip·ios·小程序·https·uni-app·iphone
天堂罗恋歌3 小时前
CocoaPods 安装 Masonry 库时出现的网络连接问题处理
ios·iphone·xcode·cocoapods·app store
2501_916008893 小时前
iOS 26 软件性能测试全流程,启动渲染资源压力对比与优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张4 小时前
iOS 26 兼容测试实战,机型兼容、SwiftUI 兼容性改动
android·ios·小程序·uni-app·swiftui·cocoa·iphone
2501_915106325 小时前
iOS 可分发是已经上架了吗?深入解析应用分发状态、ipa 文件上传、TestFlight 测试与 App Store 审核流程
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074713 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088919 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9151063219 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者819 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone