iOS開發之Autolayout

非盈利無廣告開發者專用網址導航：www.dev666.com

1、概述

在之前的iOS程序中，是如何設置佈局UI界面的？

（1）常常編寫大量的座標計算代碼

（2）爲了保證在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果，有時還須要分別爲2種屏幕編寫不一樣的座標計算代碼（即傳說中的「屏幕適配」）

什麼是Autolayout？

（1）Autolayout是一種「自動佈局」技術，專門用來佈局UI界面的

（2）Autolayout自iOS 6開始引入，因爲Xcode 4的不給力，當時並無獲得很大推廣

（3）自iOS 7（Xcode 5）開始，Autolayout的開發效率獲得很大的提高

（4）蘋果官方也推薦開發者儘可能使用Autolayout來佈局UI界面

（5）Autolayout能很輕鬆地解決屏幕適配的問題

Autoresizing

（1）在Autolayout以前，有Autoresizing能夠做屏幕適配，但侷限性較大，有些任務根本沒法完成

（2）相比之下，Autolayout的功能比Autoresizing強大不少

Autolayout的2個核心概念：

（1）參照

（2）約束

2、Autolayout的警告和錯誤

警告：

控件的frame不匹配所添加的約束, 好比：

約束控件的寬度爲100, 而控件如今的寬度是110

錯誤：

缺少必要的約束, 好比：

只約束了寬度和高度, 沒有約束具體的位置

兩個約束衝突, 好比：

1個約束控件的寬度爲100, 1個約束控件的寬度爲110

3、代碼實現Autolayout

代碼實現Autolayout的步驟：

第一步：利用NSLayoutConstraint類建立具體的約束對象

第二步：添加約束對象到相應的view上

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

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

代碼實現Autolayout的注意點：

（1）要先禁止autoresizing功能，設置view的下面屬性爲NO

view.translatesAutoresizingMaskIntoConstraints = NO;

（2）添加約束以前，必定要保證相關控件都已經在各自的父控件上

（3）不用再給view設置frame

4、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

例如：實現下面效果：

- (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.約束藍色
    // 2.1.高度
NSLayoutConstraint *blueHeight =
[NSLayoutConstraint constraintWithItem:blueView attribute:
NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:
nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0
constant:40];
    [blueView addConstraint:blueHeight];
    // 2.2.左邊間距
    CGFloat margin = 20;
NSLayoutConstraint *blueLeft =
[NSLayoutConstraint constraintWithItem:blueView attribute:
NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:
self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:
margin];
    [self.view addConstraint:blueLeft];
    // 2.3.頂部間距
NSLayoutConstraint *blueTop =
[NSLayoutConstraint constraintWithItem:blueView attribute:
NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:
self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:
margin];
    [self.view addConstraint:blueTop];
    // 2.4.右邊間距
NSLayoutConstraint *blueRight =
 [NSLayoutConstraint constraintWithItem:blueView attribute:
NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:
self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:
-margin];
    [self.view addConstraint:blueRight];
   
    // 3.約束紅色
    // 3.1.讓紅色右邊 == 藍色右邊
NSLayoutConstraint *redRight =
[NSLayoutConstraint constraintWithItem:redView attribute:
NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:
blueView attribute:NSLayoutAttributeRight multiplier:1.0
constant:0.0];
    [self.view addConstraint:redRight];
 
    // 3.2.讓紅色高度 == 藍色高度
NSLayoutConstraint *redHeight =
[NSLayoutConstraint constraintWithItem:redView attribute:
NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:
blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:
0.0];
    [self.view addConstraint:redHeight];
   
    // 3.3.讓紅色頂部 == 藍色底部 + 間距
NSLayoutConstraint *redTop =
[NSLayoutConstraint constraintWithItem:redView attribute:
NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:
blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:
margin];
    [self.view addConstraint:redTop];
   
    // 3.4.讓紅色寬度 == 藍色寬度 * 0.5
NSLayoutConstraint *redWidth =
[NSLayoutConstraint constraintWithItem:redView attribute:
NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:
blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:
0.0];
    [self.view addConstraint:redWidth];
}

5、添加約束的規則

在建立約束以後，須要將其添加到做用的view上。

在添加時要注意目標view須要遵循如下規則：

（1）對於兩個同層級view之間的約束關係，添加到它們的父view上

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

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

6、VFL語言

什麼是VFL語言？

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

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

8、VFL的使用

使用VFL來建立約束數組：

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

format ：VFL語句

opts ：約束類型

metrics ：VFL語句中用到的具體數值

views ：VFL語句中用到的控件

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

NSDictionaryOfVariableBindings(...)

例如：

NSDictionary *views =

NSDictionaryOfVariableBindings(blueView, redView);

NSArray *conts2 =

[NSLayoutConstraint constraintsWithVisualFormat:

@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:

@{@"blueHeight" : @40, @"margin" : @20} views:views];

示例代碼：

- (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 *conts =
 [NSLayoutConstraint constraintsWithVisualFormat:
@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:
@{@"blueView" : blueView}];
    [self.view addConstraints:conts];
   
NSArray *conts2 =
 [NSLayoutConstraint constraintsWithVisualFormat:
@"V:|-20-[blueView(40)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:conts2];
   
NSLayoutConstraint *redWidth =
 [NSLayoutConstraint constraintWithItem:redView attribute:
NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:
blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:
0.0];
    [self.view addConstraint:redWidth];
}}

運行效果圖：

9、有了Autolayout的UILabel

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

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

10、基於Autolayout的動畫

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

[UIView animateWithDuration:1.0 animations:^{

    [添加了約束的view layoutIfNeeded];

}];

例如：

self.leftMargin.constant = 100;
self.width.constant = 200;
[UIView animateWithDuration:2.0 animations:^{
     //父控件和redView都添加了約束
     [self.view layoutIfNeeded];
     [self.redView layoutIfNeeded];
}];

更多內容與學習交流請關注我的微信公衆帳號：極客峯