iOS Masonry的简单实用

作者: 羽裳有涯 | 来源:发表于2018-11-19 16:25 被阅读34次

1、Masonry的基本API

    mas_makeConstraints() // 添加约束
    mas_remakeConstraints() //移除之前的约束，重新添加新的约束
    mas_updateConstraints() //更新约束
    
    equalTo() // 参数是对象类型，一般是视图对象或者mas_width这样的坐标系对象
    mas_equalTo() //和上面功能相同，参数可以传递基础数据类型对象，可以理解为比上面的API更强大
    width() //用来表示宽度，例如代表view的宽度
    mas_width() //用来获取宽度的值。和上面的区别在于，一个代表某个坐标系对象，一个用来获取坐标系对象的值

上面例如equalTo或者width这样的，有时候需要涉及到使用mas_前缀，注意区分。

//控件左边 = 参考控件的右边 + 偏移值（10） （控件在参考控件的右边，距离其5px）
make.left.equalTo(view.superview.mas_right).offset(10);
//不填则默认对应left，其他同理

注意：masequalTo 和 equalTo 区别：
1. masequalTo 比equalTo多了类型转换操作，一般来说，大多数时候两个方法都是通用的;
2. 但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理，使用equalTo。
3. 特别是多个属性时，必须使用equalTo,例如make.left.and.right.equalTo(self.view);
注意:在循环cell，如果有代码重复调用的地方，一定要使用mas_remakeConstraints，以此防止循环的时候生成相同的约束，影响性能，甚至，能使用make的地方基本都可以用remake进行代替，防止生成无谓的约束

2、关于更新约束布局相关的API

- (void)updateConstraintsIfNeeded //调用此方法，如果有标记为需要重新布局的约束，则立即进行重新布局，内部会调用updateConstraints方法 
- (void)updateConstraints //重写此方法，内部实现自定义布局过程 
- (BOOL)needsUpdateConstraints //当前是否需要重新布局，内部会判断当前有没有被标记的约束 
- (void)setNeedsUpdateConstraints //标记需要进行重新布局

3、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;

注意：其中leading与left trailing与right 在正常情况下是等价的但是当一些布局是从右至左时，则会对调换句话说就是基本不用，用left和right就好了。用leading/trailing 后就不要用left/right，如果混用会出现崩溃。

4、Masonry的简单使用

//    等价代码
    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [UIColor redColor]; //一定要先加入父控件，否则报错
    [self.view addSubview:view];
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(view.superview).insets(UIEdgeInsetsMake(20, 20, 20, 20));
        
    }];
//    等价代码
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.top.bottom.equalTo(view.superview).insets(UIEdgeInsetsMake(20, 20, 20, 20));
        
    }];
//    等价代码
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(view.superview).offset(20);
        make.top.equalTo(view.superview).offset(20);
        make.right.equalTo(view.superview).offset(-20);
        make.bottom.equalTo(view.superview).offset(-20);
        
    }];

关于multipliedBy的使用

    //自视图的宽高是父视图一半
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(view.superview);
        make.top.equalTo(view.superview).offset(20);
        make.width.height.equalTo(view.superview).multipliedBy(0.5);
    }];

关于greaterThanOrEqualTo/lessThanOrEqualTo的使用

//宽大于等于200
make.width.greaterThanOrEqualTo(@200);
//宽小于等于200
make.width.lessThanOrEqualTo(@400)

修改指定约束

    MASConstraint *topConstraint; // 在生成约束的时候
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        topConstraint = make.top.equalTo(superview.mas_top);
        make.left.equalTo(superview.mas_left);
        
    }];
    // 在之后进行对该约束 进行修改
    [topConstraint uninstall];
    
    //blcok中进行判断使用约束(在统一处理某些业务的时候)
    [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.buttonSize);
        if (topLeft) {
            make.top.and.left.offset(10);            
        } else {
            make.bottom.and.right.offset(-10);
        }
    }];

固定宽高

//固定宽高300*300
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(view.superview);
        make.width.height.equalTo(@300);
    }];

关于mas_equalTo/mas_offset()使用

//高度为300的约束中，可以这样子写
mak.height.equalTo(@300);
//也可以，使用mas_equalTo，一般情况下，使用mas_equalTo来处理基本数据类型的封装
mak.height.mas_equalTo(300);

如果想使用基础数据类型当做参数，Masonry为我们提供了"mas_xx"格式的宏定义。
这些宏定义会将传入的基础数据类型转换为NSNumber类型，这个过程叫做封箱(Auto Boxing)。
"mas_xx"开头的宏定义，内部都是通过MASBoxValue()函数实现的。
这样的宏定义主要有四个，分别是mas_equalTo()、mas_offset()和大于等于、小于等于四个。

mas_equalTo其实是多了一层处理的宏而已，因为equalTo并不支持基本数据类型
#define mas_equalTo(...)                equalTo(MASBoxValue((__VA_ARGS__)))

多个视图的等高、等宽、左对齐、下对齐等的约束

// 表达三个视图等高的约束. 
make.height.equalTo(@[view1.mas_height, view2.mas_height]); 
make.height.equalTo(@[view1, view2]); 
make.left.equalTo(@[view1, @100, view3.right]);

动画问题

//动画问题，和普通的方法实现差不多，重点只是修改约束后调用
    [view.superview layoutIfNeeded];
    
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(400);
        make.left.mas_equalTo(100);
        make.size.mas_equalTo(CGSizeMake(100, 100));
        
    }];
    //如果其约束还没有生成的时候需要动画的话，就请先强制刷新后才写动画，否则所有没生成的约束会直接跑动画
    [view.superview layoutIfNeeded];
    [UIView animateWithDuration:3 animations:^{
        [view mas_updateConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(200);
            
        }];
        [view.superview layoutIfNeeded];
        //强制绘制
        
    }];

设置约束优先级
Masonry为我们提供了三个默认的方法，priorityLow()、priorityMedium()、priorityHigh()，这三个方法内部对应着不同的默认优先级。
除了这三个方法，我们也可以自己设置优先级的值，可以通过priority()方法来设置。

[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.width.equalTo(self.view).priorityLow();
        make.width.mas_equalTo(20).priorityHigh();
        make.height.equalTo(self.view).priority(200);
        make.height.mas_equalTo(100).priority(1000);
        
    }];

Masonry也帮我们定义好了一些默认的优先级常量，分别对应着不同的数值，优先级最大数值是1000。

static const MASLayoutPriority MASLayoutPriorityRequired = UILayoutPriorityRequired; 
static const MASLayoutPriority MASLayoutPriorityDefaultHigh = UILayoutPriorityDefaultHigh; 
static const MASLayoutPriority MASLayoutPriorityDefaultMedium = 500; 
static const MASLayoutPriority MASLayoutPriorityDefaultLow = UILayoutPriorityDefaultLow; 
static const MASLayoutPriority MASLayoutPriorityFittingSizeLevel = UILayoutPriorityFittingSizeLevel;

5、Masonry的注意事项

1. 使用 mas_makeConstraints方法的元素必须事先添加到父元素的中，例如

[self.view addSubview:view];

1. multipliedBy的使用只能是设置同一个控件的，比如这里的bottomInnerView，

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

1. 对label约束必须设置最大约束的宽度

self.titleLabel.preferredMaxLayoutWidth = w - 100 - 15;

1. contentView的冲突
  如果遇到和contentView的冲突，基本原因是因为cell的content view有一个系统的约束（高度），而masonry是不会去管理非自己产生的约束，因此在使用label imageview等情况下，增加以下属性设置，确保优先级以防止冲突

[_contentLabel setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];

1. Masonry使用问题、修改冲突
  当约束冲突发生的时候，我们可以设置view的key来定位是哪个

viewredView.mas_key =@"redView";greenView.mas_key = @"greenView";blueView.mas_key = @"blueView";

若是觉得这样一个个设置比较繁琐，怎么办呢，Masonry则提供了批量设置的宏

MASAttachKeysMASAttachKeys(redView,greenView,blueView); //一句代码即可全部设置。

如果出现什么疑难杂症的话，基本都是AutoLayout在iOS的不适用，所以搜索问题的话，各位直接搜索Autolayout 关键字便可，不必搜索Masonry的问题。

FlexLib是用Obj-c语言编写的ios布局框架。该布局框架基于flexbox模型，这个模型是web端的布局标准。基于flexbox模型，FlexLib提供了强大的布局能力，并且易于使用。

Masonry 源码解读（上）

Masonry 源码解读（下）

iOS Masonry的简单实用

1、Masonry的基本API

2、关于更新约束布局相关的API

3、Masonry的属性

4、Masonry的简单使用

5、Masonry的注意事项

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读