2018正版葡京赌侠诗iOS Autolayout之Masonry解读

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的语法可读性分外强
    • 就此我不会在此地古板的一个单词一个单词的牵线
    • 我们在写的时候完全就足以像写句子一样,并且梅森ry添加约束都是mas_makeConstraints以此办法
    • 只需求在块中写上想好的封锁
    • 譬如说上面的首先个约束
    • 翻译过来就是使左边等于self.view的左边,间距为0
    • 而在块中主语就是调用者,那里也就是redView
    • 故而选用Masonry,你就想着是用斯洛伐克共和国(The Slovak Republic)语在造句就行了,哈哈
    • 还有某些,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];
    }];

动画前

动画后

  • 好了,梅森ry就为大家讲解到那边,如果对Masonry的行使语法或者是对约束的怀恋还有何样不领悟,希望你可以不怜惜的提议来,我愿意能把稿子做得更通俗易懂,更深厚!

相关文章