A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 学习交流 › 免费资源 › iOS资源 › 正文

【iOS技术分享】Autolayout不用发愁：教你使用Masonry（一）

© Simpon 中级黑马   /  2016-5-6 17:43  /  4208 人查看  /  17 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 Simpon 于 2016-10-19 13:35 编辑

前言
MagicNumber -> autoresizingMask -> autolayout
以上是纯手写代码所经历的关于页面布局的三个时期
iphone1-iphone3gswindow的size固定为(320,480)，我们只需要简单计算一下相对位置就好了。
iphone4-iphone4s苹果推出了retina屏，但是给了码农们非常大的福利:window的size不变。
iphone5-iphone5swindow的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是一个轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了，并具有高可读性，而且同时支持 iOS 和 Max OS X。
我们先来看一段官方的sample code来认识一下Masonry。
  1. [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
  2.      make.edges.equalTo(superview).with.insets(padding);
  3. }];
复制代码

看到block里面的那句话: make edges equalTo superview with insets
通过链式的自然语言 就把view1给autolayout好了 是不是简单易懂?
使用
看一下Masonry支持哪一些属性
  1. @property (nonatomic, strong, readonly) MASConstraint *left;
  2. @property (nonatomic, strong, readonly) MASConstraint *top;
  3. @property (nonatomic, strong, readonly) MASConstraint *right;
  4. @property (nonatomic, strong, readonly) MASConstraint *bottom;
  5. @property (nonatomic, strong, readonly) MASConstraint *leading;
  6. @property (nonatomic, strong, readonly) MASConstraint *trailing;
  7. @property (nonatomic, strong, readonly) MASConstraint *width;
  8. @property (nonatomic, strong, readonly) MASConstraint *height;
  9. @property (nonatomic, strong, readonly) MASConstraint *centerX;
  10. @property (nonatomic, strong, readonly) MASConstraint *centerY;
  11. @property (nonatomic, strong, readonly) MASConstraint *baseline;
复制代码

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

其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文?没有类似的经验) 则会对调 换句话说就是基本可以不理不用 用left和right就好了
在ios8发布后 又新增了一堆奇奇怪怪的属性(有兴趣的朋友可以去瞅瞅) Masonry暂时还不支持(不过你要支持ios6,ios7 就没必要去管那么多了)
在讲实例之前 先介绍一个MACRO
#define WS(weakSelf)  __weak __typeof(&*self)weakSelf = self;
快速的定义一个weakSelf 当然是用于block里面啦 下面进入正题(为了方便 我们测试的superView都是一个size为(300,300)的UIView)
下面 通过一些简单的实例来简单介绍如何轻松愉快的使用Masonry:
1. [基础] 居中显示一个view
  1. - (void)viewDidLoad
  2. {
  3.     [super viewDidLoad];
  4.     // Do any additional setup after loading the view.
  5.      
  6.     WS(ws);
  7.      
  8.     UIView *sv = [UIView new];
  9.     [sv showPlaceHolder];
  10.     sv.backgroundColor = [UIColor blackColor];
  11.     [self.view addSubview:sv];
  12.     [sv mas_makeConstraints:^(MASConstraintMaker *make) {
  13.         make.center.equalTo(ws.view);
  14.         make.size.mas_equalTo(CGSizeMake(300, 300));
  15.     }];
  16.      
  17. }
复制代码


代码效果


使用我之间写的MMPlaceHolder 可以看到superview已经按照我们预期居中并且设置成了适当的大小
那么先看看这几行代码
  1. //从此以后基本可以抛弃CGRectMake了
  2. UIView *sv = [UIView new];
  3. //在做autoLayout之前 一定要先将view添加到superview上 否则会报错
  4. [self.view addSubview:sv];
  5. //mas_makeConstraints就是Masonry的autolayout添加函数 将所需的约束添加到block中行了
  6. [sv mas_makeConstraints:^(MASConstraintMaker *make) {
  7. //将sv居中(很容易理解吧?)
  8.     make.center.equalTo(ws.view);
  9.      
  10.     //将size设置成(300,300)
  11.     make.size.mas_equalTo(CGSizeMake(300, 300));
  12. }];
复制代码

这里有两个问题要分解一下
首先在Masonry中能够添加autolayout约束有三个函数
  1. - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
  2. - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
  3. - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
  4. /*
  5. mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
  6. mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
  7. mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
  8. 三种函数善加利用 就可以应对各种情况了
  9. */
复制代码

其次 equalTo 和 mas_equalTo的区别在哪里呢? 其实 mas_equalTo是一个MACRO
  1. #define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))
  2. #define mas_greaterThanOrEqualTo(...)    greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
  3. #define mas_lessThanOrEqualTo(...)       lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
  4. #define mas_offset(...)                  valueOffset(MASBoxValue((__VA_ARGS__)))
复制代码

可以看到 mas_equalTo只是对其参数进行了一个BOX操作(装箱) MASBoxValue的定义具体可以看看源代码 太长就不贴出来了
所支持的类型 除了NSNumber支持的那些数值类型之外 就只支持CGPoint CGSize UIEdgeInsets
介绍完这几个问题 我们就继续往下了 PS:刚才定义的sv会成为我们接下来所有sample的superView
2. [初级] 让一个view略小于其superView(边距为10)
  1. UIView *sv1 = [UIView new];
  2. [sv1 showPlaceHolder];
  3. sv1.backgroundColor = [UIColor redColor];
  4. [sv addSubview:sv1];
  5. [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {
  6.     make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
  7.      
  8.     /* 等价于
  9.     make.top.equalTo(sv).with.offset(10);
  10.     make.left.equalTo(sv).with.offset(10);
  11.     make.bottom.equalTo(sv).with.offset(-10);
  12.     make.right.equalTo(sv).with.offset(-10);
  13.     */
  14.      
  15.     /* 也等价于
  16.     make.top.left.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
  17.     */
  18. }];
复制代码

代码效果：


可以看到 edges 其实就是top,left,bottom,right的一个简化，分开写也可以，一句话更省事。
那么为什么bottom和right里的offset是负数呢? 因为这里计算的是绝对的数值 计算的bottom需要小鱼sv的底部高度，所以要-10，同理用于right。
这里有意思的地方是and和with，其实这两个函数什么事情都没做。
  1. - (MASConstraint *)with {
  2.     return self;
  3. }
  4. - (MASConstraint *)and {
  5.     return self;
  6. }
复制代码


但是用在这种链式语法中，就非常的巧妙和易懂 不得不佩服作者的心思(虽然我现在基本都会省略)。
Masonry 源码下载：
游客，如果您要查看本帖隐藏内容请回复



精华推荐:



17 个回复

倒序浏览
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马