Masonry解析

作者: goyohol | 来源:发表于2016-12-01 01:10 被阅读385次

Masonry 、 AutoLayout 、约束、三方库、 iOS

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关于更新的几个方法的区别：

setNeedsLayout：告知页面需要更新，但是不会立刻开始更新。执行后会立刻调用layoutSubviews。
layoutIfNeeded：告知页面布局立刻更新。所以一般都会和 setNeedsLayout一起使用。如果希望立刻生成新的frame需要调用此方法，利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。
layoutSubviews：系统重写布局
setNeedsUpdateConstraints：告知需要更新约束，但是不会立刻开始
updateConstraintsIfNeeded：告知立刻更新约束
updateConstraints：系统更新约束

系统约束

如果使用系统的约束，大致造型如下：

//创建一个图片视图
UIImageView* imgV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Oggi.png"]];
//图片为多个狗狗 合成的不规则图片(不规矩：非圆形、非矩形😁😁)

imgV.backgroundColor = [UIColor redColor];//可见到背景色
imgV.translatesAutoresizingMaskIntoConstraints = NO;
imgV.contentMode = UIViewContentModeScaleAspectFit;
[self.view addSubview:imgV];

//imgV左侧与父视图左侧 多出10个PX
NSLayoutConstraint* leftConstraint = [NSLayoutConstraint constraintWithItem:imgV attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0f constant:10.0f];
//imgV右侧与父视图右侧对齐
NSLayoutConstraint* rightConstraint = [NSLayoutConstraint constraintWithItem:imgV attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0f constant:0.0f];
//imgV顶部与父视图顶部 多出20个PX
NSLayoutConstraint* topConstraint = [NSLayoutConstraint constraintWithItem:imgV attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0f constant:20.0f];
//imgV高度为父视图高度一半
NSLayoutConstraint* heightConstraint = [NSLayoutConstraint constraintWithItem:imgV attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.5f constant:0.0f];

//iOS 6.0或者7.0调用addConstraints
//[self.view addConstraints:@[leftConstraint, rightConstraint, topConstraint, heightConstraint]];
//iOS 8.0以后设置active属性值
leftConstraint.active = YES;
rightConstraint.active = YES;
topConstraint.active = YES;
heightConstraint.active = YES;

属性过多，代码冗余繁杂！！！
反正我是不想用。

iPhone6s 效果图

Xib 或者 StoryBoard </br> 😁lazy but so convenient

那么还有一个最懒的方法，xib和storyBoard拖以及设置约束。但是维护起来很繁杂。牵一发而动全身。(一点小失误几乎就得重头再来。。。😁😁)

storyBoard构建约束.png

作为一名Coder，还是多敲敲代码吧！享受指尖上的⌨️！😝😝

三方库Masonry

主角 Masonry登场了

Masonry是一个基于AutoLayout框架的轻量级布局框架。比系统自带
Masonry 源码：https://github.com/Masonry/Masonry

Masonry支持的一些属性：

make是MASConstraintMaker类型。MASConstraintMaker给我们提供了22种Attribute类型

  //Basic Attribute
  @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的对照表如下：

系统约束属性

⭐️其他属性：

  //Margin Attribute
  @property (nonatomic, strong, readonly) MASConstraint *leftMargin;
  @property (nonatomic, strong, readonly) MASConstraint *rightMargin;
  @property (nonatomic, strong, readonly) MASConstraint *topMargin;
  @property (nonatomic, strong, readonly) MASConstraint *bottomMargin;
  @property (nonatomic, strong, readonly) MASConstraint *leadingMargin;
  @property (nonatomic, strong, readonly) MASConstraint *trailingMargin;
  @property (nonatomic, strong, readonly) MASConstraint *centerXWithinMargins;
  @property (nonatomic, strong, readonly) MASConstraint *centerYWithinMargins;


  //Convenient Attribute
  @property (nonatomic, strong, readonly) MASConstraint *edges;
  @property (nonatomic, strong, readonly) MASConstraint *size;
  @property (nonatomic, strong, readonly) MASConstraint *center;

更多细节，参考：第三方 Masonry约束的使用

工程创建好

工程名：MasonryDemo

这里就不使用下载三方库，拖入工程的方式导入了。使用cocoapods在终端里导入Masonry 。( 记住vim Podlife前,先pod init创建pod文件本人精彩犯错😝 😝 😝 )

创建Podfile（配置文件）

键盘输入 i，进入编辑模式，输入

  platform :ios, '9.0' 
  pod 'Masonry' '~> 1.4'    #'~> 1.4'版本号 根据需求可要可不要

然后按Esc，并且输入“ ：”号进入vim命令模式，然后在冒号后边输入wq

pod install 成功安装Masonry库

安装Masonry库之后的工程（点击白色工程打开）.png

打开工程后即可看到Masonry所有东西（可谓倾家荡产~~~）都放入工程里了.png

导入成功后即可使用Masonry约束进行布局。

先介绍一个MACRO （因为使用了Block，需要弱引用）

  #define WS(weakSelf)  __weak __typeof(&*self)weakSelf = self;

首先在Masonry中能够添加autolayout约束有三个函数

  - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
  - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
  - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
  /*
         mas_makeConstraints 只负责新增约束 Autolayout不能同时存在  两条针对于  同一对象 的约束 否则会报错
         mas_updateConstraints 针对上面的情况 会  更新  在block中出现的约束 不会导致出现两个相同约束的情况
         mas_remakeConstraints 则会  清除 之前的 所有约束 仅保留最新的约束
         三种函数善加利用 就可以应对各种情况了
   */

其次 equalTo 和 mas_equalTo的区别在哪里呢? 其实 mas_equalTo是一个MACRO

  #define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))
  #define mas_greaterThanOrEqualTo(...)    greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
  #define mas_lessThanOrEqualTo(...)       lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
  #define mas_offset(...)                  valueOffset(MASBoxValue((__VA_ARGS__)))
  可以看到 mas_equalTo只是对其参数进行了一个BOX操作(装箱)    类似于宏
  MASBoxValue的定义具体可看看其源代码 

所支持的类型 除了NSNumber支持的那些数值类型之外
  就只支持CGPoint CGSize UIEdgeInsets

equalTo()的括号里放：视图、mas_width等属性、@100(对象)；
mas_equalTo()的括号里放：float(基本数据类型)。

首先导入库头文件

  #import <Masonry.h>

再写一些后面需要的常用定义宏

 #define WS(weakSelf)  __weak __typeof(&*self)weakSelf = self;   //block弱引用

 #define screen_W [UIScreen mainScreen].bounds.size.width       //屏宽
 #define screen_H [UIScreen mainScreen].bounds.size.height      //屏高

-(void)viewDidLoad {}里面

NSMutableArray * imgV_Arr = @[].mutableCopy;
for (int i = 0; i < 10; i ++) {  //构建10个图片试图
    UIImageView * imgV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Oggi.png"]];
    imgV.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.f green:arc4random()%256/255.f  blue:arc4random()%256/255.f  alpha:1];
  //随机色生成

    [imgV_Arr addObject:imgV];//数组 添加图片
  
    [self.view addSubview:imgV];
    imgV.frame = CGRectMake(i*screen_W/5.f, 0, screen_W/5.f, screen_H/10.f);
}


WS(ws);     //弱引用    __block修饰
[imgV_Arr[5] mas_makeConstraints:^(MASConstraintMaker *make) {  //第6张图片处理
    make.center.equalTo(ws.view);             //中心 对齐
    make.size.mas_equalTo(CGSizeMake(260, 160));//尺寸
}];


[imgV_Arr[6] mas_makeConstraints:^(MASConstraintMaker *make) {  //第7张图片处理
    make.edges.equalTo(imgV_Arr[5]).with.insets(UIEdgeInsetsMake(20, 20, 20, 20));      // 包含在内部   内嵌
    
    /* 等价于 */
    //  make.top.equalTo(imgV_Arr[5]).with.offset(20);
    //  make.left.equalTo(imgV_Arr[5]).with.offset(20);
    //  make.bottom.equalTo(imgV_Arr[5]).with.offset(-20);
    //  make.right.equalTo(imgV_Arr[5]).with.offset(-20);
    
    /* 也等价于 */
   //  make.top.left.bottom.and.right.equalTo(imgV_Arr[5]).with.insets(UIEdgeInsetsMake(20, 20, 20, 20));  
}];



UIView * backView = [UIView new];//纯色 背景视图
backView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:backView];

[backView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(ws.view).with.offset(30);
    make.bottom.equalTo(ws.view).with.offset(-10);
    make.right.equalTo(ws.view).with.offset(-50);
    
    make.size.mas_equalTo(CGSizeMake(screen_W, screen_H/3.f));
}];

    UIImageView * imgV7 = imgV_Arr[7];//第8张图片处理
    UIImageView * imgV8 = imgV_Arr[8];  //第9张图片处理
    UIImageView * imgV9 = imgV_Arr[9];//第10张图片处理
    //转换为 视图格式(⭐️  才对应.mas_left、.mas_right属性  ⭐️)

    [backView addSubview: imgV7];
    [backView addSubview: imgV8];
    [backView addSubview:imgV9];

    int padding = 10;   //左右间距
    [imgV7 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.mas_equalTo(backView.mas_centerY);
    make.left.equalTo(backView.mas_left).with.offset(padding);
    make.right.equalTo(imgV8.mas_left).with.offset(-padding);
    make.height.mas_equalTo(@100);//NSNumber类型
    make.width.equalTo(imgV8);
}];
[imgV8 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.mas_equalTo(backView.mas_centerY);
    make.left.equalTo(imgV7.mas_right).with.offset(padding);
    make.right.equalTo(backView.mas_right).with.offset(-padding);
    make.height.mas_equalTo(backView.mas_height);
    make.width.equalTo(imgV7);
}];


//    动画
[imgV9 mas_updateConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(backView).offset(30);
    make.bottom.equalTo(imgV7.mas_top).offset(-5);
    make.width.equalTo(@50);
}];
[UIView animateWithDuration:3 animations:^{ //三秒内 播放
    [backView layoutIfNeeded];
}];
//   因为布局约束就是要 脱离frame表达方式，可是动画是需要根据这个来执行，就会有
 矛盾，但根据前面说到布局约束的原理，在 某个时刻 约束也是会被 还原 成frame使视图
显示，这个时刻可通过 layoutIfNeeded这个方法来进行控制。

效果：

最终效果图.png

因为布局约束就是要脱离frame表达方式，可是动画是需要根据这个来执行，就会有矛盾，但根据前面说到布局约束的原理，在某个时刻约束也是会被还原成frame使视图显示，这个时刻可通过 layoutIfNeeded这个方法来进行控制。
```
[UIView animateWithDuration:3 animations:^{ //三秒内 播放
  [backView layoutIfNeeded];
}];
```

下方白色视图 Masonry动画.gif

Masonry的属性和类别

后续有时间继续更新！

之后有时间讨论UIScrollView的约束建立

一直说详细写一下“UIScrollView的约束建立”，没时间！！注意的一点就是：UIScrollView的contentSize尺寸大小：
1.若大于里面所有约束好的子控件的整体大小，那么直接显示完所有的子控件；
2.若大于里面所有约束好的子控件的整体(的宽度、高度)大小，则在其宽度、高度上面把UIScrollView的contentSize拉伸开来

🌰以后有空再举了~😂😂😂

goyohol's essay

Masonry解析

Masonry支持的一些属性：

后续有时间继续更新！

后续有时间继续更新！

后续有时间继续更新！

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员

iOS专题资源__工具专题

iOS

iOS_swift

masonry

iOS Developer

GitHub 中文社区