Autolayout及VFL經驗分享，autolayoutvfl

Autolayout及VFL經驗分享，autolayoutvfl

隨著iPhone6與iOS8的臨近，適配的問題講更加複雜，最近學習了一下Auto Layout的使用，與大家分享。

什麼是Auto Layout？

Auto Layout是iOS6發布後引入的一個全新的布局特性，其目的是彌補以往Autoresizing在布局方面的不足之處，以及未來面對更多尺寸適配時介面布局可以更好的適應。

為什麼要用Auto Layout？

Autolayout能解決不同螢幕（iPhone4，iPhone5，iPad...）之間的適配問題。

在iPhone4時代開發人員只需要適配一種螢幕尺寸，相比與Android陣營的相對布局，iOS開發人員們最長用的做法是使用絕對布局，座標和大小隻要寫死就ok了。隨後iPhone5出了，對於兩種螢幕尺寸，就需要考慮一個新的問題，螢幕適配。蘋果其實很早就考慮到了這一點Autoresizing技術，誠然Autoresizing有所不足，蘋果在iOS6發布後引入了Autolayout特性，適應更廣泛情境下的布局需求。當然了iPhone5由於和iPhone4在螢幕寬度上一致，即便不用上這些技術適配起來也不麻煩（筆者再之前也只用到了Autoresizing），不過在iPhone6即將推出，即將面臨更複雜的螢幕適配時，Auto Layout能協助我們很好地解決這個問題，此外也能解決橫屏豎屏切換，iPad的適配問題。

如何使用Auto Layout？

Auto Layout的基本概念

Auto Layout的核心是約束（constraint），通過對view的約束（view的大小，view與view之間的關係）使得view能夠自己計算出尺寸和座標。

Visual Format Language，在AutoLayout中使用的形象描述約束的一種語言規則。

Auto Layout的使用還是比較複雜的，一開始用可能會感覺雲裡霧裡的，用的多了習慣VFL的寫法之後就會感覺到它的方便了。

Auto Layout的基礎理論：

al的核心出發點是：

1.view具有自我計算尺寸，布局的能力。通過它自身的內容，能夠得到尺寸。

2.view的布局位置，確定於它與superview及其他view的關係。

3.與傳統的autoresizingmask自適應相比，al更精確，能絕對的確定view的布局。

4.view不一定需要一個初始的rect。al中，view如果有足夠的constraint，便可以確定自己的尺寸和位置，並且知道自己和其他view的關係。即，想確定view的布局，就給它（們）添加constraint。

Visual Format Language　（應該不算語言）

Apple的工程師很有愛，發明了這種哭笑不得的表意字元。感覺它就是種解析方式。

使用 Visual Format Language定義水平和垂直約束，Visual Format Language可視格式語言，用來描述約束條件，這種語言是對視覺描述的一種抽象，大概過程看起來是這樣的：

[NSLayoutConstraint constraintsWithVisualFormat:

options:metrics:

views:

 ];

 constraintsWithVisualFormat:參數為NSString型，指定Contsraint的屬性，是垂直方向的限定還是水平方向的限定，參數定義一般如下：

 V:|-(>=XXX) :表示垂直方向上相對於SuperView大於、等於、小於某個距離

 若是要定義水平方向，則將V：改成H：即可

 在接著後面-[]中括弧裡面對當前的View/控制項 的高度/寬度進行設定；

 options：字典類型的值；這裡的值一般在系統定義的一個enum裡面選取

 metrics：nil；一般為nil ，參數類型為NSDictionary，從外部傳入 //衡量標準

 views：就是上面所加入到NSDictionary中的綁定的View

 在這裡要注意的是 AddConstraints  和 AddConstraint 之間的區別，一個添加的參數是NSArray，一個是NSLayoutConstraint

使用規則

 |   : 表示父視圖

 -   :表示距離

 V:  :表示垂直

 H:  :表示水平

>= :表示視圖間距、寬度和高度必須大於或等於某個值

<= :表示視圖間距、寬度和高度必須小宇或等於某個值

== :表示視圖間距、寬度或者高度必須等於某個值

@  :>=、<=、==  限制   最大為  1000

 

1.|-[view]-|:  視圖處在父視圖的左右邊緣內

2.|-[view]  :  視圖處在父視圖的左邊緣

3.|[view]   :  視圖和父視圖左邊對齊

4.-[view]- :  設定視圖的寬度高度

5.|-30.0-[view]-30.0-|:  表示離父視圖 左右間距  30

6.[view(200.0)] : 表示視圖寬度為 200.0

7.|-[view(view1)]-[view1]-|:表示視圖寬度一樣，並且在父視圖左右邊緣內

8. V:[view(50.0)] : 視圖高度為  50

9:V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示離父視圖的距離

為Padding,這兩個視圖間距必須大於或等於0並且距離底部父視圖為 padding。

10:  [wideView(>=60@700)] :視圖的寬度為至少為60 不能超過  700，最大為1000

11: 如果沒有聲明方向預設為水平  H: