AutoLayout 自动布局

Autolayout 简介

• Autolayout 是一种“自动布局”技术，专门用来布局 UI 界面的
• Autolayout 自iOS 6 开始引入，由于Xcode 4的不给力，当时并没有得到很大推广
• 警告：控件的frame不匹配所添加的约束
  比如：约束控件的宽度为100, 而控件现在的宽度是110
• 错误：缺乏必要的约束 或 两个约束冲突
  比如：只约束了宽度和高度, 没有约束具体的位置

Autoresizing 简介

• Autolayout 之前，Autoresizing 可以作屏幕适配
• Autoresizing 局限性较大，有些任务根本无法完成

Autolayout 对 UILabel 的影响

• 无 Autolayout，UILabel 的文字内容总是居中显示，导致顶部和底部会有一大片空缺区
• 有 Autolayout，UILabel 的 bounds 默认会自动包住所有的文字内容，顶部和底部不再会有空缺区域

1. 基于 Autolayout 的动画

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

// 改变通过拖线获得的 约束对象的值
self.leftMargin.constant = 100;
self.width.constant = 200;

// 并不需要将改变的值放进去，而是只执行 layoutIfNeeded 函数
[UIView animateWithDuration:1.0 animations:^{
    [添加了约束的 view layoutIfNeeded];
}];

2. 添加约束的规则

创建约束后，需要将 约束 添加到 作用的 view 上

• 对于同层级 view 之间的约束关系，添加到它们的父 view 上

Paste_Image.png

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

Paste_Image.png

• 对于有层次关系的两个 view 之间的约束关系，添加到层次较高的父 view 上

Paste_Image.png

3. 自动布局的普通方法

• 利用 NSLayoutConstraint 类创建具体的约束对象
  1个 NSLayoutConstraint 对象代表 1 个约束
• 创建约束
  以下方法的实现原理：obj1.property1 =（obj2.property2 * multiplier）+ constant value

+(id)constraintWithItem:(id)view1                  // 要约束的控件
              attribute:(NSLayoutAttribute)attr1   // 约束的类型（做怎样的约束）
              relatedBy:(NSLayoutRelation)relation // 与参照控件之间的关系
                 toItem:(id)view2                  // 参照的控件
              attribute:(NSLayoutAttribute)attr2   // 约束的类型（做怎样的约束）
             multiplier:(CGFloat)multiplier        // 倍数
               constant:(CGFloat)c;                // 约束常量

• 添加约束

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

注意

• 一定要在拥有父控件之后再添加约束

• 关闭 Autoresizing 功能
  view.translatesAutoresizingMaskIntoConstraints = NO;

• 不用给 view 设置 frame

4. 使用 VFL 语言自动布局

VFL 语言简介

• 全称 Visual Format Language 可视化格式语言
• 苹果公司为了简化 Autolayout 的编码而推出的 抽象语言

使用 VFL 创建约束数组

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format          // VFL语句格式
                                 options:(NSLayoutFormatOptions)opts // 约束类型
                                 metrics:(NSDictionary *)metrics     // VFL语句中用到的具体数值
                                   views:(NSDictionary *)views;      // VFL语句中用到的控件

// 创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义，可以自动生成 views 和 metrics 参数
NSDictionaryOfVariableBindings(...)

5. 使用 Masonry 框架自动布局

步骤

• 添加Masonry文件夹的所有源代码到项目中
• 添加 2 个宏、导入主头文件

// 只要添加了这个宏，就不用带mas_前缀
#define MAS_SHORTHAND

// 只要添加了这个宏，equalTo就等价于mas_equalTo
#define MAS_SHORTHAND_GLOBALS

// 这个头文件一定要放在上面两个宏的后面
#import "Masonry.h"

约束的类型

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

添加约束的方法

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

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

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