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));
    }];

效果图:

iOS Masonry介绍与使用_第1张图片

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));
    }];
效果

iOS Masonry介绍与使用_第2张图片

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

你可能感兴趣的:(ios,masonry,界面适配)