IOS開發之Autolayout自動佈局

1、簡介

在之前的iOS程序中，是如何設置佈局UI界面的？
常常編寫大量的座標計算代碼
爲了保證在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果，有時還須要分別爲2種屏幕編寫不一樣的座標計算代碼（即傳說中的「屏幕適配」）

二、什麼是Autolayout
Autolayout是一種「自動佈局」技術，專門用來佈局UI界面的
Autolayout自iOS 6開始引入，因爲Xcode 4的不給力，當時並無獲得很大推廣
自iOS 7（Xcode 5）開始，Autolayout的開發效率獲得很大的提高
蘋果官方也推薦開發者儘可能使用Autolayout來佈局UI界面
Autolayout能很輕鬆地解決屏幕適配的

三、Autoresizing
在Autolayout以前，有Autoresizing能夠做屏幕適配，但侷限性較大，有些任務根本沒法完成
相比之下，Autolayout的功能比Autoresizing強大不少

Autolayout的2個核心概念
參照
約束

Autolayout的警告和錯誤

警告
控件的frame不匹配所添加的約束, 好比
好比約束控件的寬度爲100, 而控件如今的寬度是110

錯誤
缺少必要的約束, 好比
只約束了寬度和高度, 沒有約束具體的位置

兩個約束衝突, 好比
1個約束控件的寬度爲100, 1個約束控件的寬度爲110

2、使用Autolayout佈局View

使view居中，並在不一樣屏幕都處於居中位置。
一、先在Xcode中取消 use Auto Layout勾選選項

二、在自定義view的大小和位置欄目中，對Autosizing中的線所有去掉，這樣就能夠自適應各類尺寸大小的屏幕了。

取消連線：

取消以後的結果能夠看出，若是橫屏，裏邊的view塊也處於中間位置。

使用storyboard給View添加約束

要求：使中間紅色的view水平邊距都爲10,view的高度爲100，如何約束？

實現方法：
先點擊添加約束條件，而後更新frame ：Update Frames

3、代碼實現Autolayout

代碼實現Autolayout的步驟:
一、利用NSLayoutConstraint類建立具體的約束對象
二、添加約束對象到相應的view上

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

代碼實現Autolayout的注意點
①、要先禁止autoresizing功能，設置view的下面屬性爲NO

view.translatesAutoresizingMaskIntoConstraints = NO;

②、添加約束以前，必定要保證相關控件都已經在各自的父控件上
③、不用再給view設置frame

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 ：常量

自動佈局有個核心公式

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

4、添加約束的規則

在建立約束以後，須要將其添加到做用的view上
在添加時要注意目標view須要遵循如下規則：
1）對於兩個同層級view之間的約束關係，添加到它們的父view上

2）對於兩個不一樣層級view之間的約束關係，添加到他們最近的共同父view上

3）對於有層次關係的兩個view之間的約束關係，添加到層次較高的父view上

5、VFL語言

什麼是VFL語言

VFL全稱是Visual Format Language，翻譯過來是「可視化格式語言」
VFL是蘋果公司爲了簡化Autolayout的編碼而推出的抽象語言

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的邊緣）

使用VFL來建立約束數組

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

format ：VFL語句
opts ：約束類型
metrics ：VFL語句中用到的具體數值
views ：VFL語句中用到的控件

建立一個字典（內部包含VFL語句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)

有了Autolayout的UILabel

在沒有Autolayout以前，UILabel的文字內容老是居中顯示，致使頂部和底部會有一大片空缺區域

有Autolayout以後，UILabel的bounds默認會自動包住全部的文字內容，頂部和底部再也不會有空缺區域

基於Autolayout的動畫

在修改了約束以後，只要執行下面代碼，就能作動畫效果

[UIView animateWithDuration:1.0 animations:^{
    [添加了約束的view layoutIfNeeded];
}];

6、小試牛刀

應用所學的Autolayout來實現下邊的練習：

在控制器view底部添加2個view，1個藍色，1個紅色
2個view寬度、高度永遠相等
距離父控件左邊、右邊、下邊間距和2個view之間的間距相等

練習2：
在控制器view頂部添加2個view，1個藍色，1個紅色
2個view高度永遠相等
紅色view和藍色view右邊對齊
藍色view距離父控件左邊、右邊、上邊間距相等
藍色view距離紅色view間距固定
紅色view的左邊和父控件的中點對齊

怎麼實現呢？

代碼實現：

//
//  IWViewController.m
//  0729autoLayout-VFL
//
//  Created by kaiyi on 16-7-29.
//  Copyright (c) 2016年 kaiyi. All rights reserved.
//

#import "IWViewController.h"

@interface IWViewController ()

@end

@implementation IWViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.添加控件
    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];
    
    // 2.利用VFL約束
    NSArray *consts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView":blueView}];
    [self.view addConstraints:consts];
    
    NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(40)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
    [self.view addConstraints:conts2];
    
    /*
    NSArray *conts3 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[blueView][redView(==blueView)]" options:0 metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
    [self.view addConstraints:conts3];
     */
    
    // 紅色寬度等於藍色寬度的一半
    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    
     [self.view addConstraint:redWidth];
    
    
}


@end

效果展現：