使用Storybord或Xib 的 AutoLayout入門晉階

AutoLayout晉階

AutoLayout是一種基於約束的，描述性的佈局系統。是一種相對性佈局，區別以前的Autoresizing 來講，它的擴張性更大。在iOS6中發佈的一種佈局方法，在iOS7中官方熱烈推崇使用AutoLayout進行佈局。

 

想使用AutoLayout須要打開一個開關：（在Xcode4.6以上版本默認選中）

 

1. 打開storybord或xib

                       

點擊後，會在中間的編輯區域就會顯示。

 

在下方的幾個按鈕是Xcode4.6以上版本纔出現的。

 

以上按鈕是用Autolayout可視化佈局按鍵

 

 ：多視圖校準約束佈局按鈕

：單視圖約束佈局按鈕

：自動約束佈局按鈕

 

在iOS7裏控制器根視圖的兩條佈局線

 

開發過iOS7的人都知道，在iOS7的狀態欄是沒有那20點，都是視圖狀態條一體化，因此官方提供了兩條參考線，爲了解決iOS6&7屏幕適配問題。

能夠點擊它，觀看他們在視圖中是在那裏佈線，以下：

 

Top Layout Guide

這個是用具在iOS7中沒有狀態的20px中使用的一條約束線用法，按緊ctrl鍵，鼠標點擊Top Layout Guide 連接對於視圖以下操做

 

 

 

horizontal spacing：水平間距

vertical spacing：垂直間距

 

由於Top的參考線在上面，選中垂直間距。

 

操做後，在iOS7會空出狀態欄的20px高度。在iOS6中則約束不變。

在視圖中出現對應的垂直參考線，能夠雙擊或在右側屬性欄中進行設置。

 

 

或者

 

1選中約束

2點擊右側屬性欄中第4個選項卡

3進行對約束的設置

約束屬性

Relation: 約束模式

     Equal:相等（經常使用）

     Less Tran or Equal: 小於等於 <=

     Greater Tran or Equal: 大於等於 >=

Constant:約束距離，也能夠說是間距（經常使用）

     Standard:標準

Priority:約束優先級（經常使用）

假設有兩條相同的類型的約束，一條約束優先級1000的，另外一條是800的，它會優先執行1000的那條約束。

Placeholder: 佔位符

 

 

在這裏能夠看獲得約束不完整，

1. 點擊上方剪頭能夠查看錯誤信息
2. 能夠查看在此視圖中有多少約束

約束成立規則：

1. 寬高要須要固定
2. 在垂直和水平中，最少有一條間距約束

 

例子：假設我有一種需求：

1. Button於根視圖左側要有10px
2. Button於根視圖上方要有20px
3. 寬高不拉伸
4. 在iOS6&7適配

 

那麼已經垂直上方有一條約束，雙擊那一條約束，將約束間距設置成20，以下圖：

 

 

 

 

1.選中Button

2.點擊

3.點擊水平左側添加一條約束（約束的添加於Autoresizing,用法同樣，固定你須要想固定的位置，比Autoresizing，更好的地方是能夠約束固定的位置大小尺寸）

4.建立約束

 

那麼就成功建立了一條約束。約束線的顏色問題，橘色：表明約束有問題，藍色：表明約束已成立。

如上垂直約束線設置，將約束間距設置成20，以下

 

 

固定尺寸寬高

 

 

1.選中Button

2.點擊

3. 固定尺寸寬高，防止iPhone4,5尺寸不拉伸或壓縮

4.建立約束