自动布局-Masonry基础用法

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