美文网首页
ios开发中关于约束的介绍

ios开发中关于约束的介绍

作者: 4d49353c3819 | 来源:发表于2017-05-27 01:28 被阅读266次

    关于布局约束的发展史:

    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开发中关于约束的介绍

          本文链接:https://www.haomeiwen.com/subject/zisffxtx.html