iOS-masonary布局

最新推荐文章于 2020-07-07 09:27:09 发布
最新推荐文章于 2020-07-07 09:27:09 发布
阅读量1.1k 收藏 1
点赞数

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的使用语法或者是对约束的思想还有什么不理解，希望您可以不吝惜的提出来，我希望能把文章做得更通俗易懂，更深刻！
董其林
关注
iOS调研——Masonry与SDAutoLayout相比较
吹泡泡的星星
09-19 3107
相比较Masonry与SDAutoLayout，使用心得使用方法官方demo 都非常清晰，本文仅从原理及对比角度来看使用。目录： 相比较Masonry与SDAutoLayout 及时刷新依赖性 基本原理 使用便易性 思想 SDAutoLayout基本原理 Masonry基本原理 相比较Masonry与SDAutoLayout 及时刷新：SDAutoLayout需要依赖顺序，调换相对位置的控件，需要
ios 使用Masonary创建等间距排列的控件
fsdf1151的博客
05-26 393
UIView *backView = [[UIView alloc] init]; backView.backgroundColor = [UIColor grayColor]; [self.view addSubview:backView]; [backView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.equalTo(self.view); make.top.
iOS Autolayout之Masonry解读
齐恒毅－博客专栏
10-20 568
原文地址：http://www.jianshu.com/p/10a250cc5018 Masonry Masonry是公认非常简洁优美的一款Autolayout框架我推荐大家重点学习这个框架我会把Autolayout的思维融合这个框架一起讲解 Masonry的使用 想要使用第三方Masonry要么要去GitHub上下载原代码下来拖进项目中，要么就直接使用cocoapods，po
AutoLayout的一些基本概念
zhongmin_li的博客
09-28 675
可使用的框架首推Masonry，关于为啥选择Masonry看看官方文档就明白了https://github.com/SnapKit/Masonry，官方称AutoLayout所有功能Masonry都支持。 AutoLayout的一些基本概念 利用约束来控制视图的大小和位置，系统会在运行时通过设置的约束计算得到frame再绘制屏幕两个属性Content Compression Resista
有趣的Autolayout示例-Masonry实现
chaoyuan899的专栏
05-25 1万+
文章转自：http://tutuge.me/2015/05/23/autolayout-example-with-masonry/?comefrom=http://blogread.cn/news/ 有趣的Autolayout示例-Masonry实现 前言 好久没有写Blog了，这段时间有点忙啊=。= 本文举了3个比较有“特点”的Autolayout例子，源于微博上好友的提
AutoLayout －Masonry
jin的专栏
08-28 5538
AutoLayout － MasonryHistory and Something Insteresting手写代码的UI的自动布局在iOS6中引入的新特性iOS 6 brings an awesome new feature to the iPhone and iPad: Auto Layout， 以取代之前的 autoresizingMask Masonry
ios-masonary的插件设置约束.zip
07-11
在iOS开发中，Masonry是一款非常流行的自动布局库，它基于AutoLayout，但提供了一种更简洁、链式的方式来设置视图的约束。这个“ios-masonry的插件设置约束.zip”文件似乎包含了一个关于如何在本地项目中集成并使用...
Masonary-简化自动布局
ioSugar
06-11 1501
Masonary的价值在iOS中,AutoLayout是一种灵活且高效的布局视图的方法,它通过约束简单明确的实现了多屏适配的功能,但是如果不用storyboard而使用,纯代码开发时,使用NSContraints就显得有些繁琐了,而Masonary就是创建自动布局的轻量级框架。如何安装 新建一个xcode工程 在Podfile中 添加 pod ‘Masonry’ (提示:最好在vim下编辑,关闭中文
Masonry自动布局详解七：ScrollView循环布局
热门推荐
标哥
11-30 1万+
Masonry自动布局详解七：ScrollView循环布局 说到iOS自动布局，有很多的解决办法。有的人使用xib/storyboard自动布局，也有人使用frame来适配。对于前者，笔者并不喜欢，也不支持。对于后者，更是麻烦，到处计算高度、宽度等，千万大量代码的冗余，对维护和开发的效率都很低。笔者在这里介绍纯代码自动布局的第三方库：Masonry。这个库使用率相当高，在全世界都有大量的开发者在使用
iOS使用Masonry时进行动画操作方法
01-05
前言 最近稍微闲了一些，决定把之前漏掉的知识再补充一下，然后发现在使用Masonry的时候动画怎么实现呢？于是经过练习和查找相关方法，终于找到了正确的做法，希望能够对有需要的人提供一些帮助。...
IOS 自动布局Auto Layout，masonry
煮酒Shae
08-04 733
文章目录简介工作原理Masonry安装Masonry常用方法Masonry中定义的关系举例 简介 在苹果推出iPhone5之前，苹果的屏幕分辨率只有一种，因此对于iOS开发者来说，是不需要像Android工程师一样去考虑屏幕适配问题的。但随着iPhone5的发布，iPhone的屏幕出现了3.5寸和4.0寸两种尺寸，这种情况下，仍然可以分别为两种尺寸编写各自的界面布局样式，但随着iPhone6以及i...
Autolayout（使用Masonry库）
晓鱼儿的专栏
02-06 4231
在使用自动布局之前一直对自动布局的动画实现有怀疑。 有文章说不断更改布局带来的内存消耗很大。于是做了个测试动画的demo，发现完全木有问题啊 原生的约束写起来很麻烦，还好有Masonry和UIView-Autolayout这些库。 另外看了这位大神对使用Masonry介绍的文章，加上Masonry的demo，很快就会用了，多亏有这些大神们的分享精神。 #import "MASExample
Masonry介绍与使用实践(快速上手Autolayout)
u010944926的专栏
11-05 871
Masonry介绍与使用实践(快速上手Autolayout) 前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相
关于Masonry框架(AutoLayout)的用法--面向初学者
bingchu2401的博客
12-29 343
Masonry作为目前较为流行的自动布局第三方框架，简单易用，大大减少了程序员花在UI布局和屏幕适配的精力与时间。 1 基本用法 1.1 事例1： 图1-1 // ps: 无图莫看 // 首先是view1自动布局 [view1 mas_makeConstraints:^(MASConstraintMaker *make) {     // view1左边与superV
Masonary
小小程序猿
03-05 850
title: Masonry技巧 date: 2016-1-23 17:40 categories: IOS tags: Masonry 小小程序猿 我的博客：http://daycoding.com Masonry调试 //you can attach debug keys to views like so: // greenView.mas_key = @"greenV
Masonry的实现原理
07-07 1077
核心 是基于NSLayoutConstraint自动布局来实现的 NSLayoutConstraint如何进行约束布局？ 1、要实现自动布局，必须把该属性设置为NO view.translatesAutoresizingMaskIntoConstraints = NO 2、然后使用 addConstraint添加约束 [self.view addConstraint: [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttri
iOS开发之Masonry使用详解
首字母大写-博客
01-11 879
文章来自http://www.brighttj.com/ios/ios-masonry-demo.html#comment-353 如果说自动布局解救了多屏幕适配，那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。 在Github上，Masonry已经得到6000+个star，用法上也比较简单灵活，很大程度上替代了传统的NSLayoutConstraint布局方式。
Masonary简单使用
lzq1993dn的博客
10-30 1184
Masonary注意：（若想适配ipad 在general 中 选择 devices -> Universal）引入Masonry 在github 上搜索 就可以了引入头文件 @“Masonry”在viewDidLoad 中写入 UIView *myView = [[UIView alloc] init]; myView.backgroundColor = [UIColor blueC
ios Masonary的使用
qq_19697705的专栏
08-14 555
iOS http://www.cocoachina.com/ios/20141219/10702.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值