美文网首页iOS专题
iOS第三方库Masonry解析

iOS第三方库Masonry解析

作者: 一剑孤城 | 来源:发表于2016-12-20 16:34 被阅读104次

一.前言

之前写了一篇关于Autoresizing和一篇关于Autolayout的文章,里面对于iOS系统自带的约束讲解的很详细,所以,这里就不会对此作过多的叙述,要明白一点,就是Masonry是基于NSLayoutConstraint的封装,在block里面写约束,更为直观,更易于理解就OK了。

二.Masonry的基本使用

效果图:


MasonryDemo1.PNG

核心代码:

UIView *testView = [UIView new];
testView.backgroundColor = [UIColor brownColor];
[self.view addSubview: testView];
    
[testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(self.view).offset(84);
    make.left.mas_equalTo(self.view).offset(20);
    make.width.mas_equalTo(80);
    make.height.mas_equalTo(80);
}];

代码非常简洁,易读,就算不知道实现的原理,也能看的出来,这几个约束是什么意思,Masonry的强大之处。

三.Masonry实现的原理

1.Masonry包含的所有文件

Masonry版本:1.0.2
-| Masonry    //引入Masonry所有的头文件
-| MASUtilities    //工具类
-| MASLayoutConstraint    //NSLayoutConstraint的子类,新增了mas_key属性,和当前的约束关联
-| MASConstraint    //创建约束的容器
  -| MASViewConstraint    //单个约束,MASConstraint的子类
  -| MASCompositeConstraint     //包含一个或者多个约束,MASConstraint的子类
-| MASConstraintMaker    //创建约束
-| MASViewAttribute    //主要让view和约束关联起来
-| MASConstraint+Private    
-| NSArray+MASAdditions    
-| NSArray+MASShorthandAdditions    
-| NSLayoutConstraint+MASDebugAdditions    
-| View+MASAdditions    //主要的类别
-| View+MASShorthandAdditions    
-| ViewController+MASAdditions    

2.详述Masonry设置约束的整个流程
以上面Masonry的基本使用为例:

[testView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(self.view).offset(84);
    make.left.mas_equalTo(self.view).offset(20);
    make.width.mas_equalTo(80);
    make.height.mas_equalTo(80);
}];

如下图:


图1
图2

从图1分析出:
1.View的扩展MASAdditions,里面有一个类方法mas_makeConstraints,该方法会返回该View的约束数组,传入一个block。
2.block传入MASConstraintMaker(负责管理两个View的约束)的实例make。
3.以make.top.equalTo(self.view.mas_top).with.offset(10)为例,make调用top属性再调用mas_equalTo方法,最后调用offset方法,完成一个约束的设置。这条语句最后会生成一个MASViewConstraint,然后存在MASConstraintMaker的constraints数组里,等block调用完毕,则会直接调用make的install方法。make的install方法里面会遍历constraints数组,然后逐条调用MASViewConstraint的install方法,最后在里面调用Object-C原生的方法设置两个View之间的约束。

四.使用Masonry的例子

🌰 1.二等分
效果图:


Masonry实现二等分.PNG

关键代码:

UIView *leftView = [UIView new];
leftView.backgroundColor = [UIColor greenColor];
[self.view addSubview: leftView];

UIView *rightView = [UIView new];
rightView.backgroundColor = [UIColor blueColor];
[self.view addSubview: rightView];

[leftView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(self.view).offset(20);    //leftView左边距离父控件20间距
    make.top.mas_equalTo(self.view).offset(84);
    make.height.mas_equalTo(100);
}];

[rightView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.mas_equalTo(self.view).offset(-20);    //rightView右边距离父控件20间距
    make.top.mas_equalTo(leftView.mas_top);
    make.height.mas_equalTo(leftView.mas_height);
    make.width.mas_equalTo(leftView.mas_width);    //关键leftView.width = rightView.width
    make.left.mas_equalTo(leftView.mas_right).offset(20);    //rightView左边距离leftView右边20间距
}];

🌰 2.约束动画
效果:


MasonryAnimate.gif

核心代码:

UIView *animateView = [UIView new];
animateView.backgroundColor = [UIColor greenColor];
[self.view addSubview: animateView];
    
[animateView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(self.view).offset(20);
    make.top.mas_equalTo(self.view).offset(84);
    make.height.mas_equalTo(100);
    make.width.mas_equalTo(100);    
}];

//通过更新约束触发动画
//只能更新已添加的约束,如果需要重设约束可以使用mas_remakeConstraints
[animateView mas_updateConstraints:^(MASConstraintMaker *make) {
    make.width.mas_equalTo(200);
}]; 

五.总结

总的来说,Masonry还是比原生的NSLayoutConstraint要好用的,毕竟,第三方库的初衷就是简化原生的操作。建议大家可以用一下,不过,了解实现原理会更好。

相关文章

  • Masonry

    iOS开发之Masonry框架源码解析

  • iOS第三方库Masonry解析

    一.前言 之前写了一篇关于Autoresizing和一篇关于Autolayout的文章,里面对于iOS系统自带的约...

  • 037、iOS项目迁移小结

    【背景】最近iOS端项目新增widget,为了让widget能够使用第三方库(AF、Masonry),同时与主Ap...

  • 一般常用的第三方库目录集

    1.Masonry:一个功能强大的约束第三方库,这个第三方库基本上能够实现iOS开发所需要的绝大部分的开发需求。 ...

  • 抛弃Masonry,拥抱NSLayoutAnchor

    iOS如果项目中不用xib或者storyboard的话,给view做约束一般都是用第三方库Masonry,为什么不...

  • YKAutolayout --- Make Masonry Ea

    项目Github地址 YKAutolayout Masonry 的 使用 做过iOS的对Masonry这个库应该都...

  • Masonry源码分析

    iOS 源代码分析 --- Masonry Masonry 是 Objective-C 中用于自动布局的第三方框架...

  • Masonry解析

    Masonry 、 AutoLayout 、 约束 、 三方库 、 iOS MagicNumber -> ...

  • Auto Layout

    自动布局 对齐矩形 ios设备的屏幕尺寸 xib 代码实现示例1:苹果原生示例示例2:第三方库Masonry简单示...

  • App架构方方面面

    布局 揭秘 iOS 布局 Masonry源码解析 自动布局&绝对布局autolayoutautolayout 动画...

网友评论

  • 舒马赫:Masory写的很棒,但是不喜欢纯代码写界面,太慢了,另外由于autolayout先天原因布局速度是比较慢的,会影响帧率。推荐使用xml的布局库FlexLib,采用前端布局标准flexbox(不使用autolayout),支持热刷新,自动计算高度等。可以到这里了解详细信息:

    https://github.com/zhenglibao/FlexLib

本文标题:iOS第三方库Masonry解析

本文链接:https://www.haomeiwen.com/subject/gsjsmttx.html