Auto Layout之建立布局限制

上篇文章給大家介紹了​

​AutoLayout​

​ 的由來及OC中關于​

​AutoLayout​

​ 的類。這篇文章将向大家介紹，在​

​iOS​

​ 程式設計中怎樣使用​

​Auto Layout​

​ 建構布局限制。

建立布局限制

建立布局限制的方式

在​

​iOS​

​ 中使用​

​Auto Layout​

​建構布局限制的方式有三種：

• 用IB設計界面。IB能夠生成幫助開發人員高速布局你的限制，你能夠在可視化編輯器中定制你的限制集合
• 為每個視圖提供一個限制，來建構​

  ​NSLayoutConstraint​

  ​類的執行個體對象
• 使用可視化格式語言（

  VFL

  ）描寫叙述限制，進行UI布局

  對于以上三種建立布局限制的方式，作者在開發中經經常使用到是

  VFL

  。

建立布局限制的規則

不管是哪有一種方式建立布局限制。讀者都應該明确哪些視圖之間是能夠建立限制的。

當限制引用兩個視圖的時候，這兩個視圖一定要屬于同一視圖層次結構。即：

1. 一個視圖是另外一個視圖的父視圖
2. 兩個視圖是必須是兄弟視圖

在Interface Builder上使用AutoLayout布局

對于厭煩手動編寫代碼的程式猿來講，在IB中使用來AutoLayout布局，無疑是喜聞樂見的。

其實。對于在IB中使用來AutoLayout布局效率也是極高，可是前提你要知道IB上的元素以及IB為開發人員提供的元件。

鑒于在IB中使用來AutoLayout布局。無法用文字描寫叙述。作者非常貼心的為各位讀者錄制了教學視訊。大家能夠觀看。

​​點選進入​​

VFL

對于為每個視圖提供一個限制。來建構​

​NSLayoutConstraint​

​類的執行個體對象，因而進行​

​AutoLayout​

​ 布局的這種方式，無疑會讓咱們代碼會非常長非常長，這種方式在實際開發中并不适用。蘋果官方的建議，相較于基于代碼的方案，優先使用IB。其次使用​

​VFL​

​,最後考慮建構​

​NSLayoutConstraint​

​類的執行個體對象來為每個視圖建構限制。

那麼什麼是​

​VFL​

​？

VFL介紹

可視化格式語言有一個描寫叙述視圖布局的文本字元串組成。

開發人員僅僅須要依據UI中視圖出現的順序依次列出它們，中間加上對應的符号。這些符号指定了視圖間的間隔、不等量和優先級。其實。可視化格式語言将我們的UI設計界面形象地表現為一個簡短的字元串。

以下我們來看一個代碼示範樣例：

NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1]-20-[view2(==width)]" options:0 metrics:@{@"width":[NSNumber numberWithFloat:44]} views:NSDictionaryOfVariableBindings(view1,view2)];
      

上面一段代碼就是向大家介紹怎樣使用​

​VFL​

​ 建構限制。

當中​

​H:[view1]-20-[view2(==width)]​

​ 就是​

​VFL​

​。那麼問題來了，這段火星文究竟是什麼意思呢？其實意思非常easy：在水準方向。即x軸方向，​

​view1​

​和​

​view2​

​的間隔20個像素點，且​

​view2​

​的寬度等于​

​width​

​，當中​

​width​

​為44。

VFL文法結構

(<orientation>:)?(<superView><connection>)?<view>(<connection><view>)*(<connection><superView>)?      

​

​?​

代表可選項

​*​

​代表該項會出現0次或者多次

從上面的文法結構定義來看，三個字：看不懂！然而其實寫起來灰常簡單。

1. 方向

   orientation

   :VFL的開始是從一個可選方向開始的，能夠是

   H:

   ，代表水準方向；也能夠是

   V:

   ,代表垂直方向。

   如這種一個文法格式：

   H:[view1]-30-[view2]

   ,表示在水準方向上，view1的右邊距離view2的左邊30個像素。又如這種一個文法格式：

   V:[view1]-30-[view2]

   ,表示在垂直方向上，view1的下邊距離view2的上邊30個像素。假設不寫

   H:

   或者

   V:

   ，那麼系統會默覺得

   H:

   ,可是作者并不建議這樣做。
2. 視圖名稱：視圖的名稱被一對方括号包圍。如:[view1]。當然view1不是随便取的。它須要和你控件對象的變量名要一樣。

   

3. 連結符：

   -

解釋到這裡大家對​

​VFL​

​文法依舊不是非常懂。那麼以下就列一個表格系統給大家解釋.

類型	格式	示範樣例
	​H:​ ​ ​ ​V:​	​H:​ ​表示水準方向 ​ ​V:​ ​表示垂直方向
視圖	[item]	[view1]
父視圖	​|​	​H:|-30-[view1]-30-|​ ​ 表示view1的前後距離父視圖的間距都為30
關系	​==​ ​ ​ ​<=​ ​>=​	​H:[view1]-(>=20)-[view2]​ ​ 表示view2的前面距離view1的後面至少20個像素
固定的寬度	​[item(width)]​	​H:[view1(44)]​
固定的高度	​[item(height)]​	​V:[view1(44)]​
最大或最小寬度/高度	​[item(<=size)]​ ​[item(>=size)]​	​H:[view1(>=44)]​ ​V:[view1(>=44)]​
與還有一個視圖比對寬度或高度	​[item1(==item2)]​ ​[item1(>=item2)]​ ​[item1(<=item2)]​	​H:[view1(==view2)]​ ​表示view1和view2的寬度相等 ​ ​V:[view1(==view2)]​ ​表示view1和View2的高度相等
優先級(0-100)	@value	​H:[view1(<=50@20)]​ ​ 表示view1的寬度不大于50像素。優先級為20