VFL(Visual Format Language)是一種用于定義自動布局視圖約束的說明性語言泌参。Auto Layout的約束有很多屬性霎桅，比如水平垂直布局旅择，大小宣赔，間距预麸，都可以通過VFL實現(xiàn)。以Visual Format String做為參數(shù)傳給NSLayoutConstraint這個類的方法constraintWithVisualFormat(format:_,options:_,metrics:_,views:_)儒将。這篇博客分為5個部分：VFL語法吏祸，layout options，metrics椅棺，layout guides和VFL的局限性.

VFL

#1 Visual Format String語法

1.Visual Format String由5個部分組成

Visual Format Language

除了3是必要部分犁罩，其余都是可選部分齐蔽。下面來解釋一下這5個部分

1表示view的方向。H：表示水平方向床估，V：表示垂直方向含滴，如果沒有指明，默認的是水平方向

2表示view與superview的關(guān)系丐巫。垂直方向上谈况，view的top edge與superview的top edge之間的距離；水平方向上递胧，view的leading edge與superview的leading edge之間的距離

3表示你正在布局的view

4表示與另外的view之間的聯(lián)系

5表示view與superview的關(guān)系碑韵。垂直方向上，view的bottom edge與superview的bottom edge之間的距離缎脾；水平方向上祝闻，view的trailing edge與superview的trailing edge之間的距離

2.常見的symbol含義

| 表示superview

-表示standard spacing，通常是8 points遗菠；-20-表示spacing為20 points

@250表示約束的優(yōu)先級联喘，范圍在0-1000。250表示低優(yōu)先級辙纬，750表示高優(yōu)先級豁遭，1000表示required priority

例子：

H:|-[icon(==iconDate)]-20-[iconLabel(120@250)]-20@750-[iconDate(>=50)]-|

H：表示水平方向

|-[icon表示icon的leading edge與superview的leading edge之間的距離是standard spacing（8 points）

==iconDate表示icon的寬度與iconDate的寬度一樣

]-20-[iconLabel表示icon的trailing edge與iconLabel的leading edge之間的距離是20 points

[iconLabel(120@250)]表示iconLabel的寬度是120points，它的約束優(yōu)先級是低優(yōu)先級贺拣，如果發(fā)生約束沖突蓖谢，以auto layout為準

-20@750-表示iconLabel的trailing edge與iconDate的leading edge之間的距離是20 points，它的優(yōu)先級是高優(yōu)先級譬涡，如果發(fā)生約束沖突闪幽，還是僅此約束，auto layout無法改變

[iconDate(>=50)]表示iconDate的寬度應(yīng)該>=50 points

-|表示iconDate的trailing edge與superview的trailing edge之間的距離為standard spacing（8 points）

3.約束練習(xí)

練習(xí)一：這個約束比較簡單昂儒，直接看代碼吧沟使，我就不解釋了委可。

simulator

viewDidLoad()

練習(xí)二：

simulator

--添加這幾個view到views字典中

viewDidLoad()

--補充添加這幾個constraint.為summaryLabel和welcomeLabel添加水平約束渊跋；另外，添加iconImageView和appImageView之間的着倾，appImageView和welcomeLabel之間的拾酝，welcomeLabel和summaryLabel之間的，summaryLabel和pageControl之間的垂直約束卡者。imageControl的高度設(shè)為9 points蒿囤。

viewDidLoad()

但此時，位置還是有所偏移仍然沒有達到預(yù)期效果崇决。

預(yù)期效果是這樣的材诽！

#2 Layout Options

NSLayoutFormatOptions的作用：操控垂直于當前方向布局的約束底挫。什么意思？我的理解是脸侥，如果已知a的水平約束建邓，a與b的垂直約束，那么就可以用layout options可以求b的水平約束睁枕，它的水平約束和a一樣（當前方向布局是垂直的官边，所以操控的是水平方向的約束）。

好處在于外遇，使得代碼更簡潔注簿；

看練習(xí)：

1.更新iconImageView，appNameLabel跳仿，skipButton的約束诡渴。

移除nameLabel和skipButton的vertical constraints

這里，options的參數(shù)是[.AlignAllCenterY],作用是根據(jù)icon的位置菲语，水平方向中心對齊nameLabel玩徊，skipButton和icon。

2.更新welcomeLabel和summaryLabel的約束谨究。刪掉welcomeHorizontalConstraints恩袱。

更新welcomeToSummaryVerticalConstraints

options的參數(shù)[.AlignAllLeading, .AlignAllTrailing]的意思是welcomeLabel和summaryLabel的前后與superview的前后部間隔都是15 points。為什么胶哲？因為對summaryLabel已經(jīng)設(shè)置了horizontal constraints,它與superview的前后間距是15points畔塔。welcomeLabel和summaryLabel在水平方向上的約束是一樣的。

summaryHorizontalConstraints

3.更新summaryToPageVerticalConstraints

根據(jù)summaryLabel的水平中心給pageControl加水平約束

更新imageToWelcomeVerticalConstraints

同上

#3 Metrics

Metrics說白了就是VFL字符串里的一個字典鸯屿。

添加常量澈吨，更新約束。hp寄摆，iconImageViewWidth的作用就是占位符谅辣。

在變量前聲明此常量

在viewDidLoad()里聲明

更新約束

#4 Layout Guides

之前我的博客中對layout guide有介紹：UIButton，UILabel婶恼，UIImage與Auto Layout

Layout Guides分為兩種：top layout guide和bottom layout guide桑阶，用來指出bar的下/上界，它們繼承自UILayoutSupport勾邦，而不是UIView蚣录。

更新iconVerticalConstraints和views字典

viewDidLoad（）

#5 VFL局限性

局限一 ：中心對齊問題

回顧一下，在layout options中眷篇，我們用到了.AlignAllCenterY和.AlignAllCenterX引谜。在水平方向中心對齊icon菇民，nameLabel和skipButton時激况，我們也就是在根據(jù)icon的垂直約束來確定nameLabel和skipButton的垂直中心位置。這個的前提是玛歌，icon的約束能確定它的垂直中心位置。換句話說擎椰，如果icon的約束不能確定它的垂直中心位置沾鳄，.AlignAllCenterY就不起作用。

局限二：multiplier問題

比方說确憨，你想設(shè)定一個label的寬度是superview寬度的60%译荞，multiplier就無法設(shè)定.只能用constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:。

參考博客：

Auto Layout Visual Format Language Tutorial

初識Auto Layout的VFL

Auto Layout Guide: Visual Format Language