Masonry

  • Masonry是公认非常简单优美之一款Autolayout框架
  • 自己推荐大家要上是框架
  • 自身会见拿Autolayout的想融合这框架一起教

Masonry的使用

  • 想使以第三正Masonry要么要错过GitHub上下载原代码下来拖上路面临,要么就是直采用cocoapods,pod
    search Masonry,下载最新版本
  • cocoapods的运用非是本文讨论的限制,大家可以百度一眨眼哈,安装非常简单

Masonry的讲解

  • 因前面的一模一样首关于VFL的文章我自我感觉写的不是太好,其实要缘由是VFL的羁绊创建好宏观,如果既要照料语法讲解,又比方照看约束理解,反而介绍会如文章增加多口水话,长而乏味
  • Masonry的律添加思维其实与苹果原API的长思维是一模一样之,只是Masonry语法更精简,代码更美妙
  • 于此,为了融合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是坏死板的,必须把每个控件的约添加到饱位置尺寸,再夺加加任何控件的束缚,这样才不会见拧
  • 实在不是这般的,的确,在装有控件添加了约束后,得享好的位置尺寸,但是有时就简单单必须极好应用相对来满足
  • 连接下去自己就就此例子来诠释吧
  • 事先让2018正版葡京赌侠诗大家看一下效图

竖屏

横屏

  • 凑巧而大家以图所观看底,我要两独当极富高之新民主主义革命方块能够在屏幕旋转的时节,间距等比例缩放,它们的对立位置是固定的,绝对位置就屏幕的富裕改变如果变更
  • 另外三单灰色的方,它们的富足是未确定,这便是自思只要跟大家说的相对概念
  • 自家连从未一定死灰色方块的涨幅,只要求它同革命方块的间隔为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地图