代码加约束Masonry的使用(快速上手Autolayout)及MMPlaceHolder标尺插件的使用

Posted zlj_jeck

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了代码加约束Masonry的使用(快速上手Autolayout)及MMPlaceHolder标尺插件的使用相关的知识，希望对你有一定的参考价值。

      前言

       自己学习了一下Masonry这个代码加约束的第三方,发现确实很强大很方便,本来想把Masonry的介绍转载过来的,但是CSDN貌似没有转载功能,索性自己写一篇博客吧,顺便将自己的学习经验心得也分享出来,供大家参考,我自己也做了一个小demo放在了我的GitHub上边,有需要的朋友直接去拿就可以了( https://github.com/zlj-jeck/MasonryDemo).如果还有不明白的地方也可以去访问原作者,也是我写这篇博客参考的资料( http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/),好了,下面进入正题. 
1

MagicNumber -> autoresizingMask -> autolayout

以上是纯手写代码所经历的关于页面布局的三个时期

  • 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了

  • 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变

  • 在iphone5-iphone5s时代 window的size变了(320,568) 这时autoresizingMask派上了用场(为啥这时候不用Autolayout? 因为还要支持ios5呗) 简单的适配一下即可

  • 在iphone6+时代 window的width也发生了变化(相对5和5s的屏幕比例没有变化) 终于是时候抛弃autoresizingMask改用autolayout了(不用支持ios5了 相对于屏幕适配的多样性来说autoresizingMask也已经过时了)

那如何快速的上手autolayout呢? 说实话 当年ios6推出的同时新增了autolayout的特性 我看了一下官方文档和demo 就立马抛弃到一边了 因为实在过于的繁琐和啰嗦(有过经验的朋友肯定有同感)

直到iphone6发布之后 我知道使用autolayout势在必行了 这时想起了以前在浏览Github看到过的一个第三方库Masonry 在花了几个小时的研究使用后 我就将autolayout掌握了(重点是我并没有学习任何的官方文档或者其他的关于autolayout的知识) 这就是我为什么要写下这篇文章来推荐它的原因

介绍

Masonry 源码

Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X

我们先来看一段官方的sample code来认识一下Masonry

1
2
3

[view1 mas_makeConstraints:^(MASConstraintMaker *make) 
    make.edges.equalTo(superview).with.insets(padding);
];

看到block里面的那句话: make edges equalTo superview with insets
通过链式的自然语言 就把view1给autolayout好了 是不是简单易懂? 

使用

看一下Masonry支持哪一些属性

1
2
3
4
5
6
7
8
9
10
11

@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;

这些属性与NSLayoutAttrubute的对照表如下

Masonry NSAutoLayout 说明
left NSLayoutAttributeLeft 左侧
top NSLayoutAttributeTop 上侧
right NSLayoutAttributeRight 右侧
bottom NSLayoutAttributeBottom 下侧
leading NSLayoutAttributeLeading 首部
trailing NSLayoutAttributeTrailing 尾部
width NSLayoutAttributeWidth 宽
height NSLayoutAttributeHeight 高
centerX NSLayoutAttributeCenterX 横向中点
centerY NSLayoutAttributeCenterY 纵向中点
baseline NSLayoutAttributeBaseline 文本基线

其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文?没有类似的经验) 则会对调 换句话说就是基本可以不理不用 用left和right就好了

在ios8发布后 又新增了一堆奇奇怪怪的属性(有兴趣的朋友可以去瞅瞅) Masonry暂时还不支持(不过你要支持ios6,ios7 就没必要去管那么多了)

下面进入正题(为了方便 我们测试的superView都是一个size为(300,300)的UIView)

下面 通过一些简单的实例来简单介绍如何轻松愉快的使用Masonry:

1. [基础] 居中显示一个view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

- (void)viewDidLoad

    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIView *sv = [UIView new];
    [sv showPlaceHolder];
    sv.backgroundColor = [UIColor blackColor];
    [self.view addSubview:sv];
    [sv mas_makeConstraints:^(MASConstraintMaker *make) 
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(300, 300));
    ];

代码效果

使用我之间写的MMPlaceHolder 可以看到superview已经按照我们预期居中并且设置成了适当的大小

那么先看看这几行代码 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16


//从此以后基本可以抛弃CGRectMake了
UIView *sv = [UIView new];

//在做autoLayout之前 一定要先将view添加到superview上 否则会报错
[self.view addSubview:sv];

//mas_makeConstraints就是Masonry的autolayout添加函数 将所需的约束添加到block中行了
[sv mas_makeConstraints:^(MASConstraintMaker *make) 

    //将sv居中(很容易理解吧?)
    make.center.equalTo(self.view);
    
    //将size设置成(300,300)
    make.size.mas_equalTo(CGSizeMake(300, 300));
];

这里有两个问题要分解一下