iOS Masonry介绍与使用

由于苹果公司不断推出新的机型，所以大家都知道iOS开发中UI布局常常需要适配，同时也应该了解到苹果设备的适配主要是4，5，6，6plus这4种设备的适配。适配的方法有代码适配和使用xib添加约束，其中代码适配是用到autolayout但是官方推出的文档和Demo实在是繁琐，个人觉得还不如笨办法使用宽高比来的实在（但是计算宽高比以及获取设备需要的方法和代码太多），直到发现Masonry这个做适配的第三方真是颇为简单好用，所以简单记录一下。

iPhone的尺寸规格

设备	尺寸	逻辑分辨率	Scale Factor	设备分辨率
3GS	3.5inch	320*480	@1x	320*480
4(s)	3.5inch	320*480	@2x	640*960
5(s)	4inch	320*568	@2x	640*1136
5c	4inch	320*568	@2x	640*1136
6(s)	4.7inch	375*667	@2x	750*1334
6(s)plus	5.5inch	414*736	@3x	1242*2208

Masonry的源码：https://github.com/SnapKit/Masonry

Masonry是一个轻量级的布局框架，它拥有自己的描述语法，采用更优雅的链式语法封装自动布局，并简洁明了，具有高可读性。

Masonry支持的属性有：

//左侧，相当于NSAutoLayout的NSLayoutAttributeLeft
    @property (nonatomic, strong, readonly) MASConstraint *left;
    //上侧，相当于NSAutoLayout的NSLayoutAttributeTop
    @property (nonatomic, strong, readonly) MASConstraint *top;
    //右侧，相当于NSAutoLayout的NSLayoutAttributeRight
    @property (nonatomic, strong, readonly) MASConstraint *right;
    //下册，相当于NSAutoLayout的NSLayoutAttributeBottom
    @property (nonatomic, strong, readonly) MASConstraint *bottom;
    //首部，相当于NSAutoLayout的NSLayoutAttributeLeading
    @property (nonatomic, strong, readonly) MASConstraint *leading;
    //尾部，相当于NSAutoLayout的NSLayoutAttributeTrailing
    @property (nonatomic, strong, readonly) MASConstraint *trailing;
    //宽，相当于NSAutoLayout的NSLayoutAttributeWidth
    @property (nonatomic, strong, readonly) MASConstraint *width;
    //高，相当于NSAutoLayout的NSLayoutAttributeHeight
    @property (nonatomic, strong, readonly) MASConstraint *height;
    //横向中点（即x轴中点），相当于NSAutoLayout的NSLayoutAttributeCenterX
    @property (nonatomic, strong, readonly) MASConstraint *centerX;
    //纵向中点（即y轴中点），相当于NSAutoLayout的NSLayoutAttributeCenterY
    @property (nonatomic, strong, readonly) MASConstraint *centerY;
    //文本基线，相当于NSAutoLayout的NSLayoutAttributeBaseline
    @property (nonatomic, strong, readonly) MASConstraint *baseline;
           

了解了Masonry支持的属性后，我们大致也了解一下Masonry给我们提供的给控件添加约束的三个方法。

//    新增约束
    - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//    修改已有约束
    - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//    清除之前已有约束，只保留新的约束
    - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
           

简单的事例：

1.居中显示一个宽度和高度都为200的UIView

代码：

__weak typeof (self) weakSelf = self;//防止block中循环引用
    UIView *centerView = [[UIView alloc] init];
    centerView.backgroundColor = [UIColor redColor];
    [self.view addSubview:centerView];
    [centerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(weakSelf.view);
        make.size.mas_equalTo(CGSizeMake(200, 200));
    }];
           

效果图：

2.相框效果.即子UIView小于supview。

代码：

__weak typeof (self) weakSelf = self;//防止block中循环引用
    UIView *photoView = [[UIView alloc] init];
    photoView.layer.borderWidth = 1;
    photoView.layer.borderColor = [UIColor blackColor].CGColor;
    photoView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:photoView];
    
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:@"1"];
    [photoView addSubview:imageView];
    
    
    [photoView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(weakSelf.view);
        make.size.mas_equalTo(CGSizeMake(200, 200));
    }];
    
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
//        方式一：
//        make.top.equalTo(photoView).offset(10);
//        make.left.equalTo(photoView).offset(10);
//        make.bottom.equalTo(photoView).offset(-10);
//        make.right.equalTo(photoView).offset(-10);
//        方式二：
//        make.top.left.bottom.right.equalTo(photoView).insets(UIEdgeInsetsMake(10, 10, 10, 10));
//        方式三：
        make.edges.equalTo(photoView).insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];
           

效果

使用Masonry的添加约束的之前，必须先把View添加到视图中。