Masonry

  • 梅森ry是公认万分简洁精彩的一款Autolayout框架
  • 自家推荐大家根本学习那一个框架
  • 本身会把Autolayout的考虑融合这些框架一起讲解

Masonry的使用

  • 想要使用第三方梅森ry要么要去GitHub上下载原代码下来拖进项目中,要么就径直选拔cocoapods,pod
    search Masonry,下载最新版
  • cocoapods的应用不是本文钻探的范围,大家可以百度时而哈,安装极度简单

Masonry的讲解

  • 因为事先的一篇关于VFL的稿子我自我感觉写的不是太好,其实根本缘由是VFL的约束创制充足宏观,要是既要照顾语法讲解,又要照料约束领会,反而介绍会使作品增添很多口水话,长而乏味
  • Masonry的自律添加思维其实与苹果原API的增进思维是平等的,只是梅森ry语法更简明,代码更雅观
  • 在那里,为了融合Autolayout的思想,我依然要说下边几点
    • Autolayout所倡导的四个宗旨词是约束,参照
    • 而自己觉着,Autolayout其实主题境想如故为了设置frame
    • 不管大家什么样添加约束,最终依旧为了确定其位置尺寸
    • 为此,Autolayout的最紧要就是哪些设置约束,让空间满意位置,尺寸那多少个要求条件
    • 还有就是,当一个控件的牢笼已经能够满足上述七个标准化了,就绝不再添加多余的自律了,很不难会照成约束争辩
    • 只有您想设置任何优先级的约束
    • 优先级会在例子中证实其用途

事例讲解

  • 由于Masonry是至关主要引进的,我会分别用七个例证来讲诉它
先是个例证
  • 其一例子很粗略,仅仅是为了向我们介绍Masonry的语法
  • 比起文字演讲必要,我不如直接上图让咱们看得更直接精通
  • 落实后的效劳是那样的

图1

  • ok,接下去看看怎么用代码去达成那一个功效
  • 先添加三个View

    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    UIView *blueView = [[UIView alloc]init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *yellow = [[UIView alloc]init];
    yellow.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:yellow];

    UIView *green = [[UIView alloc]init];
    green.backgroundColor = [UIColor greenColor];
    [self.view addSubview:green];
  • 创办添加黄色View的束缚
    • 先来探望语法
    • Masonry的语法可读性格外强
    • 故此自己不会在那里粗笨的一个单词一个单词的牵线
    • 大家在写的时候完全就足以像写句子一样,并且Masonry添加约束都是mas_makeConstraints本条点子
    • 只须求在块中写上想好的封锁
    • 譬如说下边的首个约束
    • 翻译过来就是使左边等于self.view的左边,间距为0
    • 而在块中主语就是调用者,那里也就是redView
    • 所以拔取Masonry,你就想着是用保加多哥洛美语在造句就行了,哈哈
    • 再有少数,andwith实际就是get调用者本身,里面独自是return
      self

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(0);//使左边等于self.view的左边,间距为0
        make.top.equalTo(self.view.mas_top).offset(0);//使顶部与self.view的间距为0
        make.width.equalTo(self.view.mas_width).multipliedBy(0.5);//设置宽度为self.view的一半,multipliedBy是倍数的意思,也就是,使宽度等于self.view宽度的0.5倍
        make.height.equalTo(self.view.mas_height).multipliedBy(0.5);//设置高度为self.view高度的一半

    }];
  • 地点我早已添加了redView的封锁,它曾经具备了宽和高,还有水平方向和垂直方向的地点,也就是frame中的x,y,width,height,都有了
  • 故而redView的牢笼就添加成就了,无需再添加过多的自律
  • 其余的view将要以它为锚点,来添加约束,确定自身的位置尺寸
  • 接下去设置blueView的自律
  • 世家在看下边代码从前可以协调想想,根据图1中的blueView的功用,大家应当怎么着添加约束呢?
  • 很明显,只须要与辛酉革命等宽高,并且与革命左间距为0,顶部对齐,就可以了

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.and.height.equalTo(redView);//使宽高等于redView
        make.top.equalTo(redView.mas_top);//与redView顶部对齐
        make.leading.equalTo(redView.mas_right);//与redView的间距为0
    }];
  • 剩余的多少个View的束缚自己就只是多的论述了,我们可以友善先想转手怎么添加约束,再来看本身代码是怎么落到实处的
  • 自然,很可能你的想法和自家的落实分裂,那是很正常的,约束的完毕格局有太多了
  • 而是万变不离其宗!一定得有限支持最后设置截至后,所有的控件都兼备了位置尺寸

[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(redView);//与redView左对齐
        make.top.equalTo(redView.mas_bottom);//与redView底部间距为0
        make.width.and.height.equalTo(redView);//与redView宽高相等
    }];
    [green mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(yellow.mas_right);//与yellow右边间距为0
        make.top.equalTo(blueView.mas_bottom);//与blueView底部间距为0
        make.width.and.height.equalTo(redView);//与redView等宽高
    }];
第四个例子
  • 这么些事例我盼望大家能对约束的见识有个更深的领悟
  • 因为自身联合写下去,平素用的都是永恒尺寸的例子,或者是稳定位置的例子,我怕误导大家觉得Autolayout是卓殊鲁钝的,必须把每个控件的约束添加到知足位置尺寸,再去添加别的控件的牢笼,那样才不会出错
  • 骨子里不是如此的,的确,在所有控件添加完约束后,得拥有和谐的位置尺寸,不过有时那七个必须规范可以接纳相对来满足
  • 接下去自己就用例子来分解啊
  • 先让大家看一下成效图

竖屏

横屏

  • 正如我们在图纸所见到的,我期望七个等宽高的革命方块可以在屏幕旋转的时候,间距等比例缩放,它们的相对地方是定点的,相对地方随着显示器的宽改变而更改
  • 其他多少个黄色的方框,它们的宽是不确定,这就是自身想要和豪门说的相对概念
  • 自我并没有固定死藏黄色方块的增幅,只须求它们与粉色方块的区间为0,并且黑色方块的涨幅相等
  • 不过紫色方块的小幅是稳定的,黄色方块就会相互相等的宽度,填充着紫色方块间的空子
  • 接下去看看代码是怎么落到实处的吗
  • 添加View的代码我就不上了,直接看增加约束的代码

//代码中View的顺序与图中从左到右的View的顺序一致
//例子中,唯一不确定的就是灰色View的宽度,我们先把确定的约束给一个一个的添加上来

//灰1左间距、高度、垂直位置(因为和红1底部对齐)是确定的,添加约束
[gray1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(20);
        make.leading.equalTo(self.view.mas_leading).offset(0);
        make.bottom.equalTo(red1.mas_bottom);
    }];

//红1,宽高、左间距、底间距是确定的,添加约束
    [red1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.mas_equalTo(100);
        make.height.mas_equalTo(50);
        make.left.equalTo(gray1.mas_right);
        make.bottom.equalTo(self.view.mas_bottom).offset(-50);
    }];
//灰2,左间距、高度、垂直位置是确定的,宽度要与灰1一致,是为了能均匀填充,添加约束
    [gray2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.and.width.equalTo(gray1);
        make.leading.equalTo(red1.mas_right);
        make.bottom.equalTo(red1.mas_bottom);
    }];
//红2,宽高、左间距、底间距是确定的,添加约束
    [red2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.and.width.equalTo(red1);
        make.leading.equalTo(gray2.mas_right);
        make.bottom.equalTo(red1.mas_bottom);
    }];
//灰3,左间距、右间距、高度、垂直位置是确定的,添加约束
    [gray3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.and.width.equalTo(gray1);
        make.leading.equalTo(red2.mas_right);
        make.trailing.equalTo(self.view.mas_right);
        make.bottom.equalTo(red1.mas_bottom);
    }];
  • 大家看了地点的讲课后,会发现多个青色方块都未曾设置一定的宽
  • 不过它们三个都等宽,藏蓝色方块又是稳定的,那么在那5个View间距都为0的景观下,粉黄色方块不就会去挤压黄色方块,直到粉黄色方块宽度相等,那么灰色方块也处在了应有的地点么
  • 那就是自家想说的相对,粉红色方块宽度是原则性的,那么水平方向上的间隔就需要剩下的多个粉黄色方块去填充,当界面横屏时,四个紫色方块为了相对自我宽度要平等,相对革命边界,self.view边界,间距保持为0,那么就得捐躯自己宽度的乌海久安,去维持那一个相对的约束
  • 盼望自己这个话能协助大家更深远的了然约束,越多的事物要求大家去做项目逐步体会
其四个例证
  • 说到底那些事例是老例子了,我想给大家看看实际Masonry做动画也和此外的Autolayout方法一致,不过添加约束的代码却卓殊的少,可以和本身在此以前的另一篇小说相比一下
  • 其间的束缚自身就不上课了,看了上面的代码,上边的羁绊对您来说肯定是小菜一碟
  • 自律代码

 UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    UIView *greenView = [[UIView alloc]init];
    greenView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:greenView];
    UIView *blueView = [[UIView alloc]init];
    blueView.backgroundColor  = [UIColor blueColor];
    [self.view addSubview:blueView];

    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(20);
        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
        make.width.equalTo(self.view.mas_width).multipliedBy(0.2);
        make.height.equalTo(self.view.mas_height).multipliedBy(0.2);
    }];
    [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(redView.mas_right).offset(20);
        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
        make.width.equalTo(self.view.mas_width).multipliedBy(0.2);
        make.height.equalTo(self.view.mas_height).multipliedBy(0.2);
    }];
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(greenView.mas_right).offset(20);
        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
        make.width.equalTo(self.view.mas_width).multipliedBy(0.2);
        make.height.equalTo(self.view.mas_height).multipliedBy(0.2);
        make.left.equalTo(redView.mas_right).offset(20).priority(250);
    }];
  • 动画片代码

[self.greenView removeFromSuperview];
    [UIView animateWithDuration:1.0f animations:^{
        [self.view layoutIfNeeded];
    }];

动画前

动画后

  • 好了,Masonry就为大家讲解到这里,假诺对Masonry的运用语法或者是对约束的盘算还有哪些不清楚,希望您可以不爱慕的提出来,我期望能把小说做得更通俗易懂,更深厚!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图