ios开发中关于约束的介绍

关于布局约束的发展史:

1.通过代码计算frame

2.Autoresizing(设置控件与父控件的相对关系,从而实现间接设置frame,iOS系统在运行时会根据设置的规则,计算出对应的frame,无需手动计算frame)

–通过设置子控件与父控件的关系来决定如何显示控件

3.AutoLayout

–通过设置某控件与任意其他控件间的关系来决定如何显示这个控件,不仅仅局限与父子控件

4.SizeClasses –通过SizeClasses+Auto

Layout实现针对不同屏幕为控件设置不同的约束

关于约束的总结:

Ø总结:如果添加的约束和其它控件没有关系,会添加到自己身上

Ø总结:如果是父子关系,设置子控件的约束,约束会添加到父控件上

Ø注意:两个控件是兄弟关系

Ø总结:如果是兄弟关系,设置两兄弟的约束,约束会添加到它们最近的共同父控件上

代码如何实现AutoLayout:

Layout的步骤

p利用NSLayoutConstraint类创建具体的约束对象

p添加约束对象到相应的view上

-(void)addConstraint:(NSLayoutConstraint *)constraint;

-(void)addConstraints:(NSArray *)constraints;

•一个NSLayoutConstraint对象就代表一个约束

•创建约束对象的常用方法

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

pview1:要约束的控件pattr1:约束的类型(做怎样的约束)prelation:与参照控件之间的关系pview2:参照的控件pattr2:约束的类型(做怎样的约束)pmultiplier:乘数

pc:常量

•自动布局有个核心公式

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

•代码实现Auto Layout的注意点

p1》要先禁止Autoresizing功能,设置view的下面属性为NO

view.translatesAutoresizingMaskIntoConstraints = NO;

p2》添加约束之前,一定要保证相关控件都已经在各自的父控件上

p3》不用再给view设置frame

VFL的使用

•使用VFL来创建约束数组

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

pformat:VFL语句popts:约束类型pmetrics:VFL语句中用到的具体数值pviews:VFL语句中用到的控件

n创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义

NSDictionaryOfVariableBindings(...)

基于Autolayout的动画

•在修改了约束之后,只要执行下面代码,就能做动画效果

[UIView animateWithDuration:1.0 animations:^{

[添加了约束的viewlayoutIfNeeded];}];

思路:通过添加约束后,在修改约束的值,来实现动画。

注意:调用 某个 view 的layoutIfNeeded方法, 会先更新这个 view 的约束, 这个 view 的子控件的约束。

•苹果强烈建议使用AutoLayout,所以在创建新的项目时已经默认帮我们选择使用AutoLayout,由于Autoresizing和AutoLayout二者是互斥的,同时只能使用其中一种,要想使用Autoresizing的时候必须先禁用AutoLayout,

pVFL全称是VisualFormatLanguage,翻译过来是“可视化格式语言”

pVFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

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

p水平方向上canelButton宽72,acceptButton宽50,它们之间间距12

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

p水平方向上,wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)

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

p竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox

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

水平方向上,Find距离父view左边间距为10,之后Find后面是FindNext它们之间是默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|”表示superview的边缘

他的使用

•使用VFL来创建约束数组

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

pformat:VFL语句popts:约束类型pmetrics:VFL语句中用到的具体数值pviews:VFL语句中用到的控件创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义

NSDictionaryOfVariableBindings(...)

关于约束

1.autoresizing

1.1 六根线

外边四根线,设置的是距离四周是否固定

中间两根线,设置的是子控件的宽高是否随着父控件的变化而变化(默认是按照一定比例变化)

1.2 中间两根线

先放一个控件,然后在这个控件里面添加一个自控件,改变外层控件的大小,让里面的子控件根据约束自动变化

1.3 autoresizing的弊端

autoresizing都是相对于父控件进行设置的,当想设置兄弟控件的大小和间距的时候,就会发现无法设置

1.4 代码使用autoresizing

self.redView.autoresizingMask

2.autolayout

四个按钮

1. stack 将控件按照类似于集装箱的样式堆起来

2. 按钮 设置的是多个按钮的相对位置

3. 设置控件具体的信息(距离左右 宽高具体的值是多少)

4. 更新约束或者frame(针对约束可能出现的问题,进行调整的按钮)

2.1 约束的使用(切记:以后frame仅仅在创建控件的时候使用,后期改变千万不要用)

当使用frame的时候,需要设置 x y w h 四个信息

当使用约束的时候,也必须包含 x y w h 四个信息

2.2 红色警告和黄色警告

红色警告出现的原因:

1. 约束条件不足(如果约束没有包含 x y 宽高 四个信息的时候)

增加约束

2. 约束有冲突(如果要增加约束,先删除掉之前的约束)

黄色警告出现的原因: X Y 宽高 都有设置,但是展现的位置与约束不一致

解决方式:updata frame

2.3 删除约束的四种方式

2.4 设置兄弟控件的约束

1. 建议,如果控件是出于界面的边界处,建议以父控件为基准进行设置

2. 如果控件中包含具体值的约束和相对的约束,先设置具体值的约束,最后在设置相对的约束

3. 设置约束的时候建议一个一个控件的进行设置,不要多个一起,

4. 另外如果控件已经设置了约束,建议不要直接复制,如果复制,也建议把复制后的约束都删除在添加

2.5 案例:

1.在界面上有一个蓝色View 距离屏幕上 左 右 各有20个距离 高度是70

2.在蓝色View的下方有一个红色View,红色View距离蓝色View 有20个距离

3.并且红色View和蓝色View右边对齐

4.红色View的高度 与蓝色一致,宽度是蓝色一半

2.6 重要(约束计算的核心公式)

firstItem = secondItem * multiplier + constant

2.7 当一个控件,如果控件里面有内容的时候,可以只设置X Y 不设置宽高

这个时候宽高会根据 内容自动获取

2.8 设置控件的某个位置是固定的

设置的时候有两个注意点:

1. 找到相对的控件是哪一个

2. 相对的约束要明确哪一个

2.9 代码添加约束

2.9.1. 先取消autoresizing

blueView.translatesAutoresizingMaskIntoConstraints = NO;

2.9.2. 设置约束 firstItem = secondItem * multiplier + constant

//第一个参数:WithItem :代表的是 firstItem

//第二个参数:attribute:NSLayoutAttributeTop 要做约束的线是那一条

//第三个参数:relatedBy  比较的方式  =  <= >=

//第四个参数:toItem 代表的是secondItem 第二个控件

//第五个参数:attribute:<#(NSLayoutAttribute)#> 相对于第二个控件的什么位置

NSLayoutConstraint *blueViewTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];

2.9.3. 添加约束(约束由哪个控件进行添加),如果不存在比较关系->放在自身

如果存在比较关系—>就去找比较控件它们相同的父控件然后添加

[self.view addConstraint:blueViewTop];

2.10 VFL的使用

2.11 Masonry的使用

2.11.1 导入第三方框架

#import "Masonry.h"

2.11.2 pch文件

如果多个文件,使用的资源是一样的,那就可以将相同的东西,作为宏命令定义的pch文件中

这样多个文件就可以共享

3. SizeClasses的作用

如果想让不同的尺寸界面,显示的内容不一样的话,就是用SizeClasses

3.1 QQ登陆

3.2 界面有一个图片,在横屏和竖屏下显示的图片不一样

1. 在不同的sizeClassses中,不同的屏幕中放入不同的控件

你可能感兴趣的:(ios开发中关于约束的介绍)