三 4. 自动布局之masonry
重点：masonry
目前最流行的Autolayout第三方框架
1. mas_equalTo和equalTo
默认情况下：
-
mas_equalTo有自动包装功能，比如自动将20包装为@20
-
equalTo没有自动包装功能
-
如果添加了下面的宏，那么mas_equalTo和equalTo就没有区别
#define MAS_SHORTHAND_GLOBALS
//注意：这个宏一定要添加到#import "Masonry.h"前面
2.mas_width和width
默认情况下：
-
width是make对象的一个属性，用来添加宽度约束用的，表示对宽度进行约束
-
mas_width是一个属性值，用来当做equalTo的参数，表示某个控件的宽度属性
-
如果添加了下面的宏，mas_width也可以写成width
#define MAS_SHORTHAND
-
mas_height、mas_centerX以此类推
3.可有可无的用法【只是为了可读性】
- 以下方法都仅仅是为了提高可读性，可有可无
- (MASConstraint *)with {
return self;
}
- (MASConstraint *)and {
return self;
}
代码示例：
#import "ViewController.h"
//ZZF: masonrygithub的demo里面的pch文件里面有这两个宏定义. 第一个宏是写法的替换，第二个宏是自动包装数字类型
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS
#import "Masonry.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 蓝色控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 红色控件
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 添加约束 约束可以添加到相对的视图中
CGFloat margin = 20;
CGFloat height = 50;
[blueView makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.left).offset(margin);
make.right.equalTo(redView.left).offset(-margin);
make.bottom.equalTo(self.view.bottom).offset(-margin);
make.height.equalTo(height);
make.top.equalTo(redView.top);
make.bottom.equalTo(redView.bottom);
make.width.equalTo(redView.width);
}];
[redView makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.view.right).offset(-margin);
}];
}
- (void)test4
{
// 蓝色控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 添加约束
[blueView makeConstraints:^(MASConstraintMaker *make) {
// make.width.equalTo(self.view.width).multipliedBy(0.5);
// make.height.equalTo(self.view.height).multipliedBy(0.5).offset(-100);
make.width.equalTo(100);
make.height.equalTo(100);
make.centerX.equalTo(self.view.centerX);
make.centerY.equalTo(self.view.centerY);
}];
}
#pragma Mark ----------定义宏以前的示例
- (void)test3
{
// 蓝色控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 距离父控件四周都是50间距 不同的书写方式
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// make.left.mas_equalTo(self.view.mas_left).offset(50);
// make.right.mas_equalTo(self.view.mas_right).offset(-50);
// make.top.mas_equalTo(self.view.mas_top).offset(50);
// make.bottom.mas_equalTo(self.view.mas_bottom).offset(-50);
// }];
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// make.left.mas_equalTo(self.view).offset(50);
// make.right.mas_equalTo(self.view).offset(-50);
// make.top.mas_equalTo(self.view).offset(50);
// make.bottom.mas_equalTo(self.view).offset(-50);
// }];
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// make.left.offset(50);
// make.right.offset(-50);
// make.top.offset(50);
// make.bottom.offset(-50);
// }];
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// make.left.top.offset(50);
// make.right.bottom.offset(-50);
// }];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
make.center.mas_equalTo(self.view).insets(UIEdgeInsetsZero);
}];
}
- (void)test2
{
// 蓝色控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 居中（水平+垂直）
// 尺寸是父控件的一半
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(self.view).multipliedBy(0.5);
make.center.mas_equalTo(self.view);
// make.centerX.mas_equalTo(self.view);
// make.centerY.mas_equalTo(self.view);
}];
}
- (void)test1
{
// 蓝色控件
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 尺寸限制：100x100
// 位置：粘着父控件右下角，间距是20
// 这个方法只会添加新的约束
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// // 宽度约束
// make.width.equalTo(@100);
// // 高度约束
// make.height.equalTo(@100);
// // 右边
// make.right.equalTo(self.view.mas_right).offset(-20);
// // 顶部
// make.top.equalTo(self.view.mas_top).offset(20);
// }];
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// // 宽度约束 mas_equalTo是一个宏，这个宏替换了equalTo方法
// make.width.mas_equalTo(100);
// // 高度约束
// make.height.mas_equalTo(100);
// // 右边
// make.right.equalTo(self.view).offset(-20);
// // 顶部
// make.top.equalTo(self.view).offset(20);
// }];
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// // 宽度高度约束
// make.width.height.mas_equalTo(100);
// // 右边
// make.right.equalTo(self.view).offset(-20);
// // 顶部
// make.top.equalTo(self.view).offset(20);
// }];
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// // 宽度高度约束 重点：两个包装的方法
//// 1. make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(100, 100)]);
//// 2. make.size.mas_equalTo(CGSizeMake(100, 100));
// 3. make.size.mas_equalTo(100);
// // 右边
// make.right.equalTo(self.view).offset(-20);
// // 顶部
// make.top.equalTo(self.view).offset(20);
// }];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// 宽度高度约束
make.height.mas_equalTo(self.view).multipliedBy(0.5).offset(-50);
// 右边
make.right.mas_equalTo(self.view).offset(-20);
// make.right.offset(-20);
// 顶部
make.top.mas_equalTo(self.view).offset(20);
// make.top.offset(20);
}];
/**
mas_equalTo：这个方法会对参数进行包装
equalTo：这个方法不会对参数进行包装
mas_equalTo的功能强于 > equalTo
*/
}
/**
约束的类型：
1.尺寸：width\height\size
2.边界：left\leading\right\trailing\top\bottom
3.中心点：center\centerX\centerY
4.边界：edges
*/
/**
// 这个方法会将以前的所有约束删掉，添加新的约束
[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {
}];
// 这个方法将会覆盖以前的某些特定的约束
[blueView mas_updateConstraints:^(MASConstraintMaker *make) {
}];
*/
@end
4.第三方方框架的使用
- 下载demo，框架的作者一般会把我们需要的框架的文件放在一个和框架名字相同的文件夹中，我们直接把这个文件夹导入就可以了。
- 他的写法有很多种：尽量用可读性好的
- 什么时候用这个什么时候用哪个,注意一下几点：
/**
mas_equalTo：这个方法会对参数进行包装
equalTo：这个方法不会对参数进行包装
mas_equalTo的功能强于 > equalTo
*/
- 介绍： 可读性【可有可无的方法，在中间加上and或者with】
make.right.equalTo(self.view.mas_right).with.offset(-20);
浙公网安备 33010602011771号