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的语法可读性很是强
  • 因此我不会在这里死板的一个单词一个单词的介绍
  • 你们在写的时候彻底就能够像写句子同样，而且Masonry添加约束都是mas_makeConstraints这个方法
  • 只须要在块中写上想好的约束
  • 好比下面的第一个约束
  • 翻译过来就是使左边等于self.view的左边，间距为0
  • 而在块中主语就是调用者，这里也就是redView
  • 因此使用Masonry，你就想着是用英语在造句就好了，哈哈
  • 还有一点，and与with其实就是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的使用语法或者是对约束的思想还有什么不理解，但愿您能够不吝惜的提出来，我但愿能把文章作得更通俗易懂，更深入！