Masonry使用的總結

以前使用的自動佈局框架總結的東西,也有部分借鑑的東西,如今整理使用的心得!

 

如下是Masonry給咱們的屬性

@property (nonatomic, strong, readonly) MASConstraint *left;         //左側

@property (nonatomic, strong, readonly) MASConstraint *top;        //上側

@property (nonatomic, strong, readonly) MASConstraint *right;      //右側

@property (nonatomic, strong, readonly) MASConstraint *bottom;   //下側

@property (nonatomic, strong, readonly) MASConstraint *leading;   //首部

@property (nonatomic, strong, readonly) MASConstraint *trailing;   //尾部

@property (nonatomic, strong, readonly) MASConstraint *width;     //寬

@property (nonatomic, strong, readonly) MASConstraint *height;    //高

@property (nonatomic, strong, readonly) MASConstraint *centerX;  //橫向居中

@property (nonatomic, strong, readonly) MASConstraint *centerY;  //縱向居中

@property (nonatomic, strong, readonly) MASConstraint *baseline; //文本基線

 

屬性有了,接着咱們應該怎麼在視圖中添加約束呢，Masonry給咱們提供了3個方法

//新增約束
 - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block; 

//更新約束
 - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

//清楚以前的全部約束,只會保留最新的約束
 - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
 
 合理的利用這個3個函數，基本上能夠應對任何狀況了

準備工做已經完成，咱們來看幾個小demo

 

    UIView *view1 = [UIView new];

    view1.backgroundColor = [UIColor redColor];

    [self.view addSubview:view1];

    

    __weak typeof (self)wSelf = self;

    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.center.equalTo(wSelf.view);

        make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));

    }];

    

    

    UIView *sv1 = [UIView new];

    sv1.backgroundColor = [UIColor yellowColor];

    [view1 addSubview:sv1];

    

    [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {

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

        make.centerX.equalTo(wSelf.view);

        make.top.equalTo(wSelf.view).and.offset(130);

        

    }];

    

    UIView *sv2 = [UIView new];

    sv2.backgroundColor = [UIColor greenColor];

    [view1 addSubview:sv2];

    [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {

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

        make.centerX.equalTo(sv1);

        make.top.equalTo(sv1.mas_bottom).offset(20);

        

    }];

 

 

    __weak typeof (self)wSelf = self;

    UIView *v1 = [UIView new];

    UIView *v2 = [UIView new];

    UIView *v3 = [UIView new];

    UIView *v4 = [UIView new];

    UIView *v5 = [UIView new];

    v1.backgroundColor = [UIColor redColor];

    v2.backgroundColor = [UIColor redColor];

    v3.backgroundColor = [UIColor redColor];

    v4.backgroundColor = [UIColor redColor];

    v5.backgroundColor = [UIColor redColor];

    [self.view addSubview:v1];

    [self.view addSubview:v2];

    [self.view addSubview:v3];

    [self.view addSubview:v4];

    [self.view addSubview:v5];

    

    [v1 mas_makeConstraints:^(MASConstraintMaker *make) {

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

        make.top.equalTo(wSelf.view).offset(45);

        make.left.equalTo(wSelf.view).offset(35);

    }];

    

    [v2 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.size.mas_equalTo(CGSizeMake(75, 35));

        make.centerY.equalTo(v1);

        make.left.equalTo(v1.mas_right).offset(35);

    }];

    

    [v3 mas_makeConstraints:^(MASConstraintMaker *make) {

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

        make.centerY.equalTo(v2);

        make.left.equalTo(v2.mas_right).offset(35);

    }];

    

    [v4 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(v1.mas_bottom).offset(35);

        make.centerX.equalTo(v1);

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

    }];

    

    [v5 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(v4.mas_bottom).offset(35);

        make.centerX.equalTo(v4);

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

    }];

 

 

    __weak typeof (self)weakSelf = self;

    

    UIView *headView = [UIView new];

    headView.backgroundColor = [UIColor redColor];

    [self.view addSubview:headView];

    

    [headView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerX.equalTo(weakSelf.view);

        make.top.equalTo(weakSelf.view).offset(70);

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

    }];

    

    UILabel *lbl = [UILabel new];

    lbl.text = @"大夥兒都叫我浩哥";

    [self.view addSubview:lbl];

    

    [lbl mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerX.equalTo(headView);

        make.top.equalTo(headView.mas_bottom).offset(10);

    }];

    

    UITextField *field = [UITextField new];

    [field setPlaceholder:@"那就叫我浩哥吧"];

    //    field.backgroundColor = [UIColor lightGrayColor];

    [self.view addSubview:field];

    

    [field mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(lbl.mas_bottom).offset(10);

        make.left.equalTo(weakSelf.view).offset(40);

        make.right.equalTo(weakSelf.view).offset(-40);

    }];

    

    UILabel *lbl1 = [UILabel new];

    lbl1.text = @"選擇標籤:";

    [self.view addSubview:lbl1];

    [lbl1 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.left.equalTo(weakSelf.view).offset(40);

        make.top.equalTo(field.mas_bottom).offset(10);

    }];

    

    UITextField *field1 = [UITextField new];

    [field1 setPlaceholder:@"浩哥浩哥"];

    //    field.backgroundColor = [UIColor lightGrayColor];

    [self.view addSubview:field1];

    

    [field1 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.left.equalTo(lbl1.mas_right).offset(10);

        make.right.equalTo(weakSelf.view).offset(40);

        make.centerY.equalTo(lbl1);

    }];

 

 

目前先總結到這裏,之後在補充!