Masonry基础用法
使用步骤
- 添加Masonry文件夹的所有源代码到项目中
添加2个宏,导入头文件,并且必须在Masonry.h之前
这两个宏定义就可以解决equalTo和mas_equal的统一 只要添加了这个宏,就不用带mas_前缀 #define MAS_SHORTHAND 只要添加了这个宏,equalTO和mas_equalTo就可以等价 #define MAS_SHORTHAND_GLOBALS #import <Masonry.h>
添加约束的方法
// 这个方法只会添加新的约束
[view makeConstraints:^(MASConstraintMaker *make) {
}];
// 这个方法会将以前的所有约束删掉,添加新的约束
[view remakeConstraints:^(MASConstraintMaker *make) {
}];
// 这个方法将会覆盖以前的某些特定的约束
[view updateConstraints:^(MASConstraintMaker *make) {
}];
- 约束类型
1.尺寸 :width/height/size
2.边界 :left/leading/right/trailing/top/bottom
3.中心点 : center/centerX/centerY
4. 全方位边界: edges
代码案例
- 希望读者从test1看起.这样容易懂.
#import "ViewController.h"
// 这两个宏定义就可以解决equalTo和mas_equal的统一
#define MAS_SHORTHAND
#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) {
// 蓝色view距离父视图右边间距20
make.left.equalTo(self.view.right).offset(margin);
make.right.equalTo(redView.left).offset(-margin);
make.bottom.equalTo(self.view.bottom).offset(-margin);
make.height.equalTo(height);
// 蓝色view的上面和红色视图上面相同
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 mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(100);
make.height.equalTo(@100);
}];
}
- (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.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
}];
}
- (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.mas_centerX);
make.centerY.mas_equalTo(self.view.mas_centerY);
}];
}
- (void)test1
{
// 尺寸:100 * 100
// 位置: 蘸着父控件右下角,间距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);
make.top.equalTo(self.view.mas_top).with.offset(20);
make.top.equalTo(self.view.mas_top).and.offset(20);
//
// }];
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
//
// // 宽度约束
// make.width.mas_equalTo(100); // 这样不需要包装@100
//
// // 高度约束
// make.height.equalTo(@100);
//
// // 右边 挨着父控件
// make.right.equalTo(self.view).offset(-20);
//
// // 顶部
// make.top.equalTo(self.view).offset(20);
//
// }];
// [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
// 宽度和高度
// make.width.and.height.mas_equalTo(100);
// 宽度和高度 写法2
// make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(100, 100)]);
// 宽度和高度 写法3
// make.size.mas_equalTo(CGSizeMake(100, 100));
// 写法 4
// make.size.mas_equalTo(100);
// 右边
// make.right.equalTo(self.view).offset(-20);
// // make.right.mas_equalTo(self.view).offset(-20);
//
// // 顶部
// make.top.equalTo(self.view).offset(20);
//
// }];
}
/**
// 这个方法会将以前的所有约束删掉,添加新的约束
[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {
}];
// 这个方法将会覆盖以前的某些特定的约束
[blueView mas_updateConstraints:^(MASConstraintMaker *make) {
}];
*/
@end