• Masonry是公众承认极其简单雅观的一款Autolayout框架
  • 本人引入大家根本学习这几个框架
  • 本身会把Autolayout的思辨融入那一个框架一齐讲明

storyboard

  • 警告
    • 控件的frame不相配所增加的自律
      • 举例譬如约束控件的小幅度为100, 而控件未来的宽度是110
    • 点击右下角的小三角,选拔update frames就能够
    • 瞩目接纳update frames的时候,有三个组
      • selected views 当前被采纳的views
      • all views 所有views
      • 假设当前的控件还从未增添完充分的束缚,最佳是一个贰个创新frame,不然会发出控件消失的情事
  • 错误
    • 缺点和失误必得的自律
      • 只约束了上涨的幅度和惊人, 未有约束具体的岗位
    • 八个约束争论
      • 1个约束控件的肥瘦为100, 1个约束控件的肥瘦为110

适配

代码创制Autolayout

什么是适配?

  • 想要使用第三方Masonry要么要去GitHub上下载原代码下来拖进项目中,要么就直接运用cocoapods,pod
    search Masonry,下载最新版
  • cocoapods的选取不是本文研商的限制,我们能够百度时而哈,安装极度轻巧

步骤和静心点

  • 不用再给view设置frame
  • 第一关闭autoresizing自动转化成autolayout的成效

    • 易错的:必得是把加多约束的控件设置成NO,并不是他得父控件

      // 关闭Autoresizing转化成autolayout约束的功能
      blueView.translatesAutoresizingMaskIntoConstraints = NO;
      
  • 增添封锁以前,必须要确认保证相关控件都早就在分其余父控件上

  • 开创约束(官方文书档案)

// explicitly明确的.
// Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant"
// If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

公式:view1.attr1 = view2.attr2 * multiplier + constant
* view1 :要约束的控件
* attr1 :约束的类型(做怎样的约束)
* relation :与参照控件之间的关系
* view2 :参照的控件
* attr2 :约束的类型(做怎样的约束)
* multiplier :乘数
* c :常量
  • 自律准绳
    • 对此两个同层级view之间的自律关系,增多到它们的父view上
    • 对于四个差异层级view之间的牢笼关系,增加到她们最近的一道父view上
    • 对此有档次关系的三个view之间的羁绊关系,增多到档案的次序较高的父view上
  • 活动布局的主干总结公式

obj1.property1 =(obj2.property2 * multiplier)+ constant value

适于、包容种种差异的处境

VFL

挪动支付中,适配的常见种类

  • 因为事先的一篇关于VFL的稿子作者自笔者以为写的不是太好,其实主要缘由是VFL的封锁创制充裕宏观,假诺既要照料语法讲明,又要照应约束驾驭,反而介绍会使文章增添比较多口水话,长而乏味
  • Masonry的封锁加多思维其实与苹果原API的拉长思维是均等的,只是Masonry语法更简明,代码更加美观
  • 在那边,为了融入Autolayout的挂念,小编照旧要说下边几点
    • Autolayout所倡导的五个核心词是约束,参照
    • 而作者感到,Autolayout其实宗旨理想依旧为了设置frame
    • 任由大家什么样增添约束,最终依旧为了鲜明其位置尺寸
    • 故此,Autolayout的首要正是怎么设置约束,让空间满意位置,尺寸那七个要求条件
    • 还恐怕有就是,当七个控件的封锁已经能够满意上述多少个原则了,就无须再添扩充余的约束了,很轻松会照成约束争持
    • 除非您想设置任何优先级的约束
    • 优先级会在例子中证实其用途

骨干选取

  • 始建叁个高100,左右上都以20间距的view

UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
// 1、禁用autoresizing转化成autolayout约束的功能
blueView.translatesAutoresizingMaskIntoConstraints = NO;
// 2、添加子控件到父控件上
[self.view addSubview:blueView];

// 3、创建约束
// 3.1 创建水平方向的约束
NSArray *constraintH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(blueView)];
// 3.2 创建竖直方向的约束
NSArray *constraintV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(100)]" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(blueView)];

// 4、添加约束
[self.view addConstraints:constraintH];
[self.view addConstraints:constraintV];

系统适配

事例疏解

  • 是因为Masonry是非同一般引入的,小编会分别用四个例证来说诉它

用法详解

NSArray *constraintH = [NSLayoutConstraint
constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|"
options:kNilOptions metrics:nil
views:NSDictionaryOfVariableBindings(blueView)];
  • @”H:|-20-[blueView]-20-|”
    • H:水平方向
    • ‘|-20’ : 与父控件的左侧间距是20
    • ‘-20-|’: 与父控件的动手的间距是20
    • [blueView] : 一般写成当下足够约束的控件,必须用[]包起来
  • 假定options选项为空,最佳使用kNilOptions(本质正是0)
  • metrics : 传入字典,用到的参数
  • views : 传入字典,表示给什么控件增多约束
  • NSDictionaryOfVariableBindings(…),官方解释如下:

 NSDictionaryOfVariableBindings(v1, v2, v3)
 is equivalent to
 [NSDictionary dictionaryWithObjectsAndKeys:v1, @"v1", v2, @"v2", v3, @"v3", nil];
  • 创立五个等宽、等高、上、左、右间距都以20的view
    • @”H:|-20-[blueView]-20-[redView(==blueView)]-20-| 意思是
      blueView距离父控件左边20,距离redView左侧20,redView的宽等于blueView并离开父控件右侧20
    • NSLayoutFormat阿里gnAllTop|NSLayoutFormat阿里gnAllBottom:TOP和button都等于,正是代表高一样
    • @”V:|-20-[blueView(100)]
      blueView在竖直方向,距离最上部是20,高度是100

// 创建两个View,并关闭autoresizing转化成autolayout约束功能
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];

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

// 创建水平约束数组
NSArray *constraintH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-[redView(==blueView)]-20-|" options:NSLayoutFormatAlignAllTop|NSLayoutFormatAlignAllBottom metrics:nil views:NSDictionaryOfVariableBindings(blueView, redView)];
NSArray *constraintV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(100)]" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(blueView)];
[self.view addConstraints:constraintH];
[self.view addConstraints:constraintV];

本着差异版本的操作系统进行适配

先是个例证
  • 其一例子很简短,仅仅是为着向咱们介绍Masonry的语法
  • 比起文字演讲供给,笔者比不上直接上海体育场面让大家看得更加直白理解
  • 兑现后的意义是这么的

yzc579亚洲城官网 1图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;//使左边等于self.view的左边,间距为0 make.top.equalTo(self.view.mas_top).offset;//使顶部与self.view的间距为0 make.width.equalTo(self.view.mas_width).multipliedBy;//设置宽度为self.view的一半,multipliedBy是倍数的意思,也就是,使宽度等于self.view宽度的0.5倍 make.height.equalTo(self.view.mas_height).multipliedBy;//设置高度为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 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左对齐 make.top.equalTo(redView.mas_bottom);//与redView底部间距为0 make.width.and.height.equalTo;//与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等宽高 }];

Masonry

  • 下载地址
  • 脚下最流行的Autolayout第三方框架
  • 用优雅的代码方式编写Autolayout
  • 节约了苹果官方恶心的Autolayout代码
  • 大大升高了开采功用

荧屏适配

其次个例证
  • 本条例子作者期待大家能对约束的见识有个越来越深的精通
  • 因为自个儿一齐写下来,一贯用的都以固定尺寸的例子,也许是一定位置的例子,作者怕误导大家以为Autolayout是十一分愚笨的,必得把各样控件的羁绊增添到满足位置尺寸,再去增多另外控件的约束,那样才不会出错
  • 实质上不是如此的,的确,在全部控件增加完约束后,得具有本人的位置尺寸,然则有时这多个必需标准能够利用相对来满足
  • 接下去自个儿就用例子来分解啊
  • 先让大家看一下职能图

yzc579亚洲城官网 2竖屏yzc579亚洲城官网 3横屏

  • 正如大家在图纸所阅览标,笔者希望多少个等宽高的革命方块能够在荧屏旋转的时候,间距等比例缩放,它们的相对地点是定位的,绝对地点随着荧屏的宽改换而改造
  • 任何七个驼色的正方,它们的宽是不鲜明,那正是本身想要和咱们说的相对概念
  • 自作者并从未一定死鲜绿方块的宽度,只供给它们与革命方块的区间为0,並且黄绿方块的幅度相等
  • 可是浅浅蓝方块的增长幅度是定位的,暗紫方块就能够相互相等的上升的幅度,填充着黄褐方块间的空子
  • 接下去看看代码是怎么落到实处的吗
  • 加多View的代码小编就不上了,直接看增加约束的代码

//代码中View的顺序与图中从左到右的View的顺序一致//例子中,唯一不确定的就是灰色View的宽度,我们先把确定的约束给一个一个的添加上来//灰1左间距、高度、垂直位置(因为和红1底部对齐)是确定的,添加约束[gray1 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.mas_equalTo; make.leading.equalTo(self.view.mas_leading).offset; make.bottom.equalTo(red1.mas_bottom); }];//红1,宽高、左间距、底间距是确定的,添加约束 [red1 mas_makeConstraints:^(MASConstraintMaker *make) { make.width.mas_equalTo; make.height.mas_equalTo; make.left.equalTo(gray1.mas_right); make.bottom.equalTo(self.view.mas_bottom).offset; }];//灰2,左间距、高度、垂直位置是确定的,宽度要与灰1一致,是为了能均匀填充,添加约束 [gray2 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.and.width.equalTo; make.leading.equalTo(red1.mas_right); make.bottom.equalTo(red1.mas_bottom); }];//红2,宽高、左间距、底间距是确定的,添加约束 [red2 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.and.width.equalTo; make.leading.equalTo(gray2.mas_right); make.bottom.equalTo(red1.mas_bottom); }];//灰3,左间距、右间距、高度、垂直位置是确定的,添加约束 [gray3 mas_makeConstraints:^(MASConstraintMaker *make) { make.height.and.width.equalTo; 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基本选择

  • 下载框架后,解压
  • 下一场张开其解压目录中的 Masonry.xcworkspace
  • 貌似在其Masonry.xcworkspace中得以找到实例程序,运转实例程序,看看效果,并基于实例程序,选取自个儿想要的机能,并查阅如何贯彻

针对差异大小的显示屏尺寸进行适配

其四个例证
  • 末段这一个例子是老例子了,笔者想给我们看看实际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; make.bottom.equalTo(self.view.mas_bottom).offset; make.width.equalTo(self.view.mas_width).multipliedBy; make.height.equalTo(self.view.mas_height).multipliedBy; }]; [greenView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(redView.mas_right).offset; make.bottom.equalTo(self.view.mas_bottom).offset; make.width.equalTo(self.view.mas_width).multipliedBy; make.height.equalTo(self.view.mas_height).multipliedBy; }]; [blueView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(greenView.mas_right).offset; make.bottom.equalTo(self.view.mas_bottom).offset; make.width.equalTo(self.view.mas_width).multipliedBy; make.height.equalTo(self.view.mas_height).multipliedBy; make.left.equalTo(redView.mas_right).offset.priority; }];
  • 动画片代码

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

yzc579亚洲城官网 4动画前yzc579亚洲城官网 5动画后

  • 好了,Masonry就为大家讲授到此处,借使对Masonry的施用语法只怕是对约束的构思还也可以有如何不亮堂,希望您能够不保护的提议来,笔者梦想能把小说做得更简单明了,更长远!

如何Masonry用在大团结的体系中

  • 将与框架名一样(Masonry)的极度文件夹导入本身的门类中
  • 导入主头文件,梅森ry.h
  • 增多宏,切记:那五个宏绝对要在Masonry.h的后边

//define this constant if you want to use Masonry without the 'mas_' prefix
// 只要添加了这个宏,就不用带mas_前缀
#define MAS_SHORTHAND

//define this constant if you want to enable auto-boxing for default syntax
// 只要添加了这个宏,equalTo就等价于mas_equalTo
#define MAS_SHORTHAND_GLOBALS
// 这个头文件一定要放在上面两个宏的后面
#import "Masonry.h"
  • 累加封锁的不二等秘书诀

// 这个方法只会添加新的约束
 [view makeConstraints:^(MASConstraintMaker *make) {

 }];

// 这个方法会将以前的所有约束删掉,添加新的约束
 [view remakeConstraints:^(MASConstraintMaker *make) {

 }];

 // 这个方法将会覆盖以前的某些特定的约束
 [view updateConstraints:^(MASConstraintMaker *make) {

 }];
  • 封锁的门类

1.尺寸:width\height\size
2.边界:left\leading\right\trailing\top\bottom
3.中心点:center\centerX\centerY
4.边界:edges

iOS 4:autoResizing做显示器适配

iOS 6 autoLayout 使用最广泛的显示屏适配

iOS 8 sizeClass 最新的荧屏适配

显示器适配

iPhone的尺寸

3.5inch、4.0inch、4.7inch、5.5inch

iPad的尺寸

7.9inch、9.7inch

荧屏方向

竖屏

横屏

适配的野史:

4S以前:

坐标都是写死的

Uibutton *btn = nil;

Btn.frame = CGRectMake(20,20,320,480);

只顾:以前中度大幅都以写死的

点和像素

在客户眼中

显示屏是由众七个像素结合的

像素更多,显示器越清楚

在开采者眼中

显示器是由相当多个点构成的,点又是由像素结合的

像素更多,显示器越清楚

yzc579亚洲城官网 6

未命名图片.png

yzc579亚洲城官网 7

未命名图片.png

什么是Autolayout ?

Autolayout是一种“自动布局”技艺,特意用来布局UI界面的

Autolayout自iOS 6起始引进,由于Xcode 4的不给力,当时并未有取得极大推广

自iOS 7(Xcode 5)开头,Autolayout的支出作用得到不小的晋级换代

苹果官方也援引开辟者尽量使用Autolayout来布局UI分界面

Autolayout能很自在地消除显示屏适配的标题

简介

Autoresizing(局限性一点都不小无法很好的满意开垦者,所以有了Autolayou的发出)

在Autolayout在此以前,有Autoresizing可以作显示器适配,但局限性非常的大,有个别任务根本无法实现

相比较之下,Autolayout的法力比Autoresizing庞大相当多

Autolayout的2个大旨概念

参照

约束

yzc579亚洲城官网 8

未命名图片.png

yzc579亚洲城官网 9

未命名图片.png

yzc579亚洲城官网 10

未命名图片.png

yzc579亚洲城官网 11

未命名图片.png

Autolayout的警告和不当

警告

控件的frame不相称所增加的约束,
比如

举个例子约束控件的升幅为100,
而控件今后的小幅度是110

错误

贫乏必须的束缚, 譬如

只约束了小幅和冲天,
并未有约束具体的地点

(就是独有给这几个控件设置了上涨的幅度和惊人,可是没告知它实际展现在哪个地方,那时候会报错)

多少个约束争执, 比如

1个约束控件的增长幅度为100, 1个约束控件的升幅为110

代码达成Autolayout

代码达成Autolayout的步骤

动用NSLayoutConstraint类制造具体的封锁对象

增添封锁对象到对应的view上

(void)addConstraint:(NSLayoutConstraint *)constraint;

(void)addConstraints:(NSArray *)constraints;

例:

NSLayoutConstraint
*blueRightLc = [NSLayoutConstraint
constraintWithItem:blueView

attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual
toItem:redView attribute:NSLayoutAttributeLeft
multiplier:1.0 constant:-20];

[self.view

addConstraint:blueRightLc];

NSLayoutConstraint

多个NSLayoutConstraint对象就意味着一个封锁

创造约束对象的常用方法

+(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2 attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier constant:(CGFloat)c;

view1 :要封锁的控件

attr1 :约束的种类(做哪些的封锁)

relation :与参照控件之间的涉及

view2 :参照的控件

attr2 :约束的花色(做什么的自律)

multiplier :乘数

c :常量

代码实现Autolayout的小心点

要先禁止autoresizing功效,设置view的下面属性为NO,不安装不然不也许落到实处

view.translatesAutoresizingMaskIntoConstraints= NO;

增加封锁在此之前,必得求确认保证相关控件都早已在个其余父控件上

并不是再给view设置frame

机动布局的中坚总结公式

机关布局的着力计算公式

obj1.property1 =(obj2.property2 * multiplier)+ constant
value

yzc579亚洲城官网 12

未命名图片.png

yzc579亚洲城官网 13

未命名图片1.png

yzc579亚洲城官网 14

未命名图片2.png

yzc579亚洲城官网 15

未命名图片3.png

VFL示例

H:[cancelButton(72)]-12-[acceptButton(50)]

canelButton宽72,acceptButton宽50,它们之间间隔12

H:[wideView(>=60@700)]

wideView宽度大于等于60point,该约束原则优先级为700(优先级最大值为一千,优先级越高的约束越先被知足)

V:[redBox][yellowBox(==redBox)]

竖直方向上,先有叁个redBox,其下方紧接三个莫斯中国科学技术大学学等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

水平方向上,Find距离父view左侧缘暗中同意间隔宽度,之后是FindNext距离Find间隔暗许宽度;再然后是上涨的幅度十分的大于20的Find菲尔德,它和FindNext以及父view左侧缘的距离都以默许宽度。(竖线“|”
表示superview的边缘)

VFL的使用

使用VFL来创制约束数组

(NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts metrics:(NSDictionary
*)metrics views:(NSDictionary *)views;

format :VFL语句

opts :约束类型

metrics :VFL语句中用到的现实性数值

views :VFL语句中用到的控件

创立一个字典(内部含有VFL语句中用到的控件)的敏捷宏定义

NSDictionaryOfVariableBindings(…)

基于Autolayout的动画:

在修改了封锁之后,只要施行上边代码,就能够做动画效果

[UIView animateWithDuration:1.0 animations:^{

[添加了约束的view layoutIfNeeded];(强制自动布局)

}];

Masonry

最近最盛行的Autolayout第三方框架

用优雅的代码情势编写Autolayout

节省了苹果官方恶心的Autolayout代码

大大进步了开销功效

框架地址:
https://github.com/SnapKit/Masonry

mas_equalTo和equalTo

暗中认可情形下

mas_equalTo有活动包装功用,比方自动将20装进为@20

equalTo未有电动包装效用

一经增加了上面包车型地铁宏,那么mas_equalTo和equalTo就未有区分

define MAS_SHORTHAND_GLOBALS

// 注意:那个宏必须要增多到#import “Masonry.h”前面

mas_width和width

暗许情况下

width是make对象的三个天性,用来加多宽度约束用的,表示对步长实行约束

mas_width是贰个属性值,用来作为equalTo的参数,表示有个别控件的增加率属性

一经增多了上边包车型客车宏,mas_width也得以写成width

define MAS_SHORTHAND

mas_height、mas_centerX由此及彼

何足挂齿的用法

以下方法都仅仅是为着增强可读性,可有可无

  • (MASConstraint*)with {

    return
    self;

}

  • (MASConstraint*)and {

    return
    self;

}

***********************NO6******************************

***********************NO6******************************

  1. 适配的历史

4s 从前 不须要适配

  坐标都是写死的

[uiScreen mainScreen ].bounds.size

UIButton *btn = nil;

btn.frame = CGRectMake(20,20,320,480)

ios 4

autoResizing 做显示器适配

ios 6

autoLayout 使用最遍布的显示器适配

ios 8

sizeClass 最新的荧屏适配

  1. autoResizing

注意点 不能跟autoLayout 共存

惊人/宽度 跟着父控件的万丈/宽度实行缩放

四根线 固定那么些地点 一般两根线就能够明显一个地方

局限性 兄弟控件不能够设置间距 只可以是相对于父控件

利用代码 落成autoResizing 控件.autoresizingMask与storyboard中相反的
storyboard中是 固定那个样子 代码是拉伸那多少个样子

UIViewAutoresizingNone = 0,
UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
UIViewAutoresizingFlexibleRightMargin = 1 << 2,
UIViewAutoresizingFlexibleTopMargin = 1 << 3,
UIViewAutoresizingFlexibleBottomMargin = 1 << 5
UIViewAutoresizingFlexibleHeight = 1 << 4,
UIViewAutoresizingFlexibleWidth = 1 <<1,

  1. autoLayout:

概念

  1. 参照
      相对哪个控件设置约束
      哪个控件离当前空间最近,就参照哪个控件
  2. 约束
      尺寸
          宽高
      位置
      xy

trailing 右边
leading 左边

思路

  1. 若果是多少个控件的话 那么先消除三个

4.autoLayout使用代码布局

autoLayout 与 autoResizing 无法存活

view.translatesAutoresizingMaskIntoConstraints =
NO;(关闭autoResizing功能)

使用NSLayoutConstrain 调用 constrainWithItem

率先个参数 须求约束的控件

其次个参数 控件的品质

其三个参数 等于 / <= / 大于等于

第八个参数 相对非常控件的牢笼

第七个参数 相对哪个控件的习性

第八个参数 multiplier 乘以

第五个参数 常量 须求加依旧减

专一点 以上操作哪个控件最大
就增多到哪个控件上,借使是手足那么就加多到阿爸身上,
同四个伯公的两样的老爹
累加到曾祖父身上

"添加约束到最大的控件上"
  1. vfl 布局子控件

泛泛语言知道是神马东西就足以了
H:|(调节器左边)-20(间距)-redView-20(间距)-[blueView(呈现的控件)(==redView(控件的肥瘦等于彩虹色控件的肥瘦))]-20-|(调节器的右侧)

使用NSLayoutConstrain constraintsWithVisualFormat

第多个参数 水平依然是笔直方向的牢笼(字符串)

其次个参数 对齐的选料

其八个参数 使用到数字能够增添到字典中

第八个参数 将装有的控件的丰盛到字典中, 键值对
名字都以同一的
“增添数组到self.view”

6.masonry使用

利用手续

  1. 导入masonry的头文件


  2. A控件需要约束


      使用A 调用mas_makeConstrain


      在block中设置约束


      make 就相当于

调用者(控件)

  1. 优先级
    & 动画

优先级最高是的1000

  最低的是0

纵然是事先级小于一千的 那么就第三遍实施(当最高优先级不真实)

动画
当分界面产生变动的时候 假若急需动画重新布局
[self.view layoutIfNeeded]


**************************笔记****************************


注意:

若是选用autolayout来约束控件,
这fraem就失效了, 官方也不建议大家再设置frame了

宽度: 100

高度: 100

水平居中: X

笔直居中: Y

注意: 假如运用autolayout约束多少个控件, 和大家原先使用frame约束控件一样,
必需安装宽度/中度/X/Y , 借使缺乏某多个封锁就能报错,
报错有望会迷惑部分不解的bug

假诺有莲灰警戒:

代表缺乏约束

要是有桃色警告:

意味着控件当前的地点大小和束缚的岗位大小不平等

相距最上部: 20 约等于设置了Y

相差左边:20 相当于设置了X

距离左边:20 约等于设置了步长

相距底部:20 相当于设置了莫斯中国科学技术大学学

注意:

在选拔Autolayout时,最佳给每个控件起多个称谓, 方便阅读

红色:

相差侧面:20 X

相距尾部:20 Y

高度: 50

宽度:

辛卯革命距离水晶绿有20的空闲

设置铁灰的肥瘦和湖蓝的肥瘦一样

蓝色:

相差左侧:20 X

距离尾部:20 Y

高度: 50

宽度:

iOS8,默许情形下,
左右两侧会留出一段距离,,

红色:

相差尾巴部分和侧面20 x/y

高度: 50

庚辰革命距离紫灰20 ((自动依据显示屏的上涨的幅度- 红棕右边的20 + 水绿右侧的20 +
深灰和花青之间的20 ) / 2)

蓝色:

相差左边20 x

Y: 设置蓝绿的最上部和浅黄对齐

中度: 设置紫色的尾巴部分和栗褐对齐

宽度: 50

蓝色:

离开顶端:20 Y

相距左侧:20 X

距离左侧:20 宽

高度: 50

红色:

可观和紫铜色一样 中度

梅红左侧和墨红棕右侧对齐 X

相距血牙红20 Y

first
item 红色

relation
等于

second
item 蓝色

constant
增多某个

multiplier
乘以多少

priority
优先级

蓝色:

相距最上端:20 Y

离开右边:20 X

相距侧面:20 宽

高度: 50

红色:

可观和茶青同样 中度

革命右侧和铁灰左边对齐 X

离开葡萄紫20 Y

水平居中

图片:

水平居中

垂直居中

相距左右为0

高度: 568 == 4inch

设若设置浅绛红View的宽窄, 约束会自动增加到白色VIew中

假定是安装水晶色View和卡其灰View的左臂距离固定,约束会自行增加到黄褐中(父亲和儿子关系)

万一是设置淡蓝View和铁黑View之间的相距固定,
约束会自动增添到调节器的View上(兄弟)

Author

发表评论

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