iOS移动开发社区程序员iOS Developer

Masonry的层层进阶

2016-11-06  本文已影响401人  非典型技术宅

Masonry的官方是这么描述自己的。

2.1 Basic Grammar

mas_makeConstraints
mas_updateContraints
mas_remakeContraints

1 基础写法:

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view.mas_centerX);
        make.centerY.equalTo(self.view.mas_centerY);
//equalTo 后面要求跟一个OC对象的数据,所以需要对数字进行包装。@将数字变成了NSNumber 类型。
        make.width.equalTo(@200);
        make.height.equalTo(@50);
    }];

make.xxxx属性.equalTo(参照对象.mas_属性【如果相同,可以省略】).offset(常数)

2 进阶写法

// 进阶语法
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(200, 100)]);
    }];

3 自动装箱的写法

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(100, 200));
    }];

4 Masonry的练习

4.1 设置居中


// create a imageview in the center of scrollview UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"001"]]; [scrollView addSubview:imageView]; [imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.center.equalTo(scrollView); make.size.mas_equalTo(CGSizeMake(140, 140)); }];

4.2 让一个view略小于其superView(边距为20)

[redView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top).offset(20); make.left.equalTo(self.view.mas_left).offset(20); make.bottom.equalTo(self.view.mas_bottom).offset(-20); make.right.equalTo(self.view.mas_right).offset(-20); }];
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).offset(20);
        make.left.equalTo(self.view).offset(20);
        make.bottom.equalTo(self.view).offset(-20);
        make.right.equalTo(self.view.).offset(-20);
    }];
[imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.offset(20); make.left.offset(20); make.bottom.offset(20); make.right.offset(20); }];
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.offset(20);
        make.bottom.right.offset(20);
    }];

4.3 通过更简单的内边距形式修改控件的位置和大小

    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.mas_offset(UIEdgeInsetsMake(20, 20, 20, 20));
    }];

5. 更新及重建约束

[imageView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.right.offset(-50);
    }];
    
//    播放两秒动画
    [UIView animateWithDuration:2 animations:^{
        //让这个控件立刻根据约束修改自己的frame
        [imageView layoutIfNeeded];
    }];

6. Masonry的两个宏

上一篇 下一篇

猜你喜欢

热点阅读