iOS開發日記30-Autolayout

標籤：

今天博主有一個Autolayout的需求,遇到了一些困痛點,在此和大家分享,希望能夠共同進步.

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.0constant: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.0constant: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.5NSLayoutConstraint *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(>[email protected])]

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];}];

iOS開發日記30-Autolayout