自动布局-Masonry基础用法

Masonry基础用法

这两个宏定义就可以解决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

代码案例

#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