AutoLayout的基本使用

最新推荐文章于 2018-01-31 17:28:54 发布

iOS开发_小朱

最新推荐文章于 2018-01-31 17:28:54 发布

阅读量306

点赞数

分类专栏： ios 文章标签： iOS 初级iOS 布局控件

本文链接：https://blog.csdn.net/qq_33030123/article/details/49977703

版权

ios 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1.AutoLayout的基本使用

通过代码计算 frame

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

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

Auto Layout

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

Size Classes

通过 Size Classes + Auto Layout实现针对不同屏幕为控件设置不同的约束

2.AtutoLaout的常见错误

警告
控件的frame不匹配所添加的约束, 比如
比如约束控件的宽度为100, 而控件现在的宽度是110

错误
缺乏必要的约束, 比如
只约束了宽度和高度, 没有约束具体的位置

两个约束冲突, 比如

1个约束控件的宽度为100, 1个约束控件的宽度为110

3.简单实现一

需求：设置一个宽150，高30的按钮始终显示在屏幕的正中央（水平居中对齐、垂直居中对齐）

思路：设置水平居中约束、垂直居中约束、高和宽的约束

4.简单实现二

设置一个 UIView 无论在任何屏幕下距离上下左右四个边的距离都是50。思路：设置距离四周的 margin 为50.设置一个 UIView 无论在任何屏幕下距离上下左右四个边的距离都是50。思路：设置距离四周的 margin 为50.

5.简单实现三

距离左右间距20, 两个 View 之间间隔始终是20, 两个 View 的高度都是50。宽度不定(两个宽相等)。（演示使用多种方式都可以实现）

注意：设置右边相对于某个控件的margin （间距）的时候, 如果当前控件的右边没有那个控件，则无法选择。

6.简单实现四

在控制器view顶部添加2个view，1个蓝色，1个红色

2个view高度永远相等, 50

红色view和蓝色view右边对齐

蓝色view距离父控件左边、右边、上边间距相等，30

蓝色view距离红色view间距固定，30

红色view的左边和父控件的中点对齐(或者红色 View的宽度是蓝色 View 的一半)

7.史上最难游戏的button的按钮适配

完成“史上最牛的游戏”首页

添加对应的6个button和背景图片，适配3.5 inch、4.0 inch

8.注意事项

注意：按钮、开关、文本框等控件不设置高、宽的约束也可以，因为这些控件的高、宽都有默认值。

9.约束

1.添加约束的规则

在创建约束之后，需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则：

1）对于两个同层级view之间的约束关系，添加到它们最近的父view上

2添加约束的规则2

2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上

3.约束总结

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

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

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

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

9.代码实现AtutoLaout

代码实现Auto Layout的步骤
1.利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

代码实现Auto Layout的注意点
1》要先禁止Autoresizing功能，设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
2》添加约束之前，一定要保证相关控件都已经在各自的父控件上

3》不用再给view设置frame

2. 一个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 ：常量

自动布局有个核心公式

obj1.property1 =（obj2.property2 * multiplier）+ constant value

3.VFL语言

什么是VFL语言
VFL全称是Visual Format Language，翻译过来是“可视化格式语言”

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

4.VFL语言代码实现

H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton宽72，acceptButton宽50，它们之间间距12

H:[wideView(>=60@700)]
wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

V:[redBox][yellowBox(==redBox)]
竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

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

水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

5.VFL的使用

使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
format ：VFL语句
opts ：约束类型
metrics ：VFL语句中用到的具体数值
views ：VFL语句中用到的控件

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

NSDictionaryOfVariableBindings(...)

6.基于Autolayout的动画

在修改了约束之后，只要执行下面代码，就能做动画效果
[UIView animateWithDuration:1.0 animations:^{
[添加了约束的view layoutIfNeeded];
}];

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

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

7.Size Classes 介绍

从 iOS8开始才支持 Size Classes。
Size Classes本质就是对所有的屏幕进行了分类, 我们可以为不同类型的屏幕设置不同的约束
仅仅是对屏幕进行了分类, 真正排布UI元素还得使用Auto Layout
不再有具体尺寸的概念, 只有抽象尺寸的概念
把宽度和高度各分为3种情况
1> any(任意, 表示既可以是 compact, 也可以是 regular), 一般用 * 表示
2> compact(紧凑, 小), 一般用 - 表示