深入理解iOS控件布局之Masonry布局框架

什么是Masonry

Masonry是iOS开发中一款优秀的自动布局框架，简化了AutoLayout布局时繁琐的约束设置过程，提高了开发效率。Masonry使用链式语法让代码易于编写和理解，支持纯代码和XIB/storyboard两种方式进行布局设置。

安装Masonry

使用CocoaPods安装Masonry：

pod 'Masonry'

Masonry基本语法

建立约束

Masonry建立约束的语法格式如下：

make.size.mas_equalTo(CGSizeMake(50, 50));

这句代码的意思是，建立一个宽度和高度都为50的大小约束。

设置约束优先级

可以通过设置mas_前缀的属性来提高或降低约束的优先级：

make.width.mas_equalTo(50).priorityLow();

这句代码的意思是，建立一个宽度为50的大小约束，但是优先级是低优先级。

水平方向和垂直方向的约束

• 水平方向：左、右、中心点、宽度

make.left.mas_equalTo(10);
make.right.mas_equalTo(-10);
make.centerX.mas_equalTo(self.view.mas_centerX);
make.width.mas_equalTo(50);

这句代码的意思是，建立左边距为10、右边距为-10、水平中心点居中、宽度为50的约束。

• 垂直方向：上、下、中心点、高度

make.top.mas_equalTo(10);
make.bottom.mas_equalTo(-10);
make.centerY.mas_equalTo(self.view.mas_centerY);
make.height.mas_equalTo(50);

这句代码的意思是，建立上边距为10、下边距为-10、垂直中心点居中、高度为50的约束。

修改约束

可以修改已经建立的约束：

[view mas_updateConstraints:^(MASConstraintMaker *make) {
    make.width.mas_equalTo(100);
    make.height.mas_equalTo(100);
}];

这句代码的意思是，修改宽度为100、高度为100的约束。

删除约束

可以删除已经建立的约束：

[view mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];

这句代码的意思是，删除所有已经添加的约束，并重新添加四边距离为10的约束。

Masonry实例

Masonry的实例演示一般会涉及到其他UI组件的使用。下面是两个Masonry实例与其他UI组件的搭配。

实例1：创建一个登录页面

// 设置背景
UIImageView *backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background"]];
[backgroundImageView setContentMode:UIViewContentModeScaleAspectFill];
[self.view addSubview:backgroundImageView];

// 添加用户名输入框
UITextField *usernameTextField = [[UITextField alloc] init];
[usernameTextField setBorderStyle:UITextBorderStyleRoundedRect];
[usernameTextField setPlaceholder:@"请输入用户名"];
[self.view addSubview:usernameTextField];

// 添加密码输入框
UITextField *passwordTextField = [[UITextField alloc] init];
[passwordTextField setBorderStyle:UITextBorderStyleRoundedRect];
[passwordTextField setPlaceholder:@"请输入密码"];
[passwordTextField setSecureTextEntry:YES];
[self.view addSubview:passwordTextField];

// 添加登录按钮
UIButton *loginButton = [[UIButton alloc] init];
[loginButton setTitle:@"登录" forState:UIControlStateNormal];
[loginButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[loginButton.layer setBorderColor:[UIColor blueColor].CGColor];
[loginButton.layer setBorderWidth:1.0];
[loginButton.layer setCornerRadius:5.0];
[self.view addSubview:loginButton];

[backgroundImageView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self.view);
}];

[usernameTextField mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(150);
    make.left.mas_equalTo(20);
    make.right.mas_equalTo(-20);
    make.height.mas_equalTo(40);
}];

[passwordTextField mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(usernameTextField.mas_bottom).offset(20);
    make.left.mas_equalTo(20);
    make.right.mas_equalTo(-20);
    make.height.mas_equalTo(40);
}];

[loginButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(passwordTextField.mas_bottom).offset(20);
    make.centerX.mas_equalTo(self.view.mas_centerX);
    make.width.mas_equalTo(200);
    make.height.mas_equalTo(40);
}];

这段代码的具体实现是，创建一个包含输入用户名、密码和登录按钮的登录页面，其中背景使用图片填充，用户名和密码使用UITextField组件，登录按钮使用UIButton组件。

实例2：创建一个简单的表单

// 添加姓名标签
UILabel *nameLabel = [[UILabel alloc] init];
[nameLabel setText:@"姓名："];
[self.view addSubview:nameLabel];

// 添加姓名输入框
UITextField *nameTextField = [[UITextField alloc] init];
[nameTextField setBorderStyle:UITextBorderStyleRoundedRect];
[self.view addSubview:nameTextField];

// 添加性别标签
UILabel *genderLabel = [[UILabel alloc] init];
[genderLabel setText:@"性别："];
[self.view addSubview:genderLabel];

// 添加性别选择器
UISegmentedControl *genderSegmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"男",@"女"]];
[genderSegmentedControl setSelectedSegmentIndex:0];
[self.view addSubview:genderSegmentedControl];

[nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(100);
    make.left.mas_equalTo(20);
    make.width.mas_equalTo(60);
}];

[nameTextField mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(100);
    make.left.mas_equalTo(nameLabel.mas_right).offset(10);
    make.right.mas_equalTo(-20);
    make.height.mas_equalTo(nameLabel.mas_height);
}];

[genderLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(nameLabel.mas_bottom).offset(20);
    make.left.mas_equalTo(20);
    make.width.mas_equalTo(60);
}];

[genderSegmentedControl mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(nameTextField.mas_bottom).offset(20);
    make.left.mas_equalTo(20);
    make.right.mas_equalTo(-20);
    make.height.mas_equalTo(30);
}];

这段代码的具体实现是，创建一个包含姓名和性别两个表单项的表单，其中姓名和性别分别使用UILabel和UITextField组件展示，性别使用UISegmentedControl组件实现单选形式。