iOS Storyboard約束詳解

標籤：去掉   png   文字   constant   row   水平   imageview   數值   拖動   

連結：http://www.jianshu.com/p/b88c65ffc3eb

約束，就是指……此處略去1萬字……都懂的，就不說了。直接進入實戰環節。

本文的控制項約束都是圍繞著UITableView展開的。

UITableView約束：

在UITableViewController中的tableView是不用添加約束的，已經被綁定了。

UITableViewCell的約束也是不用添加的，寬度都是跟其UITableView一致，高度由協議方法：

tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath)來決定。

約束的基本

約束基本內容為約束其位置、大小。

位置

位置基本可以靠約束x座標（左邊到父視圖的距離），y座標（上邊到父視圖的距離），也可以約束其中心位置。

大小

大小可以靠約束其寬（width）高（height），也在可在約束x座標，y座標的前提下，約束其右邊到父視圖的距離和下邊到父視圖的距離（前提都是父視圖已經約束好了）等。

約束類型

距離約束

下邊，在UIViewController中添加UITableView，並添加約束。

 

約束UITableView

首先，看這個彈出框

 

約束彈出框

一看就應該知道上邊四項內容分別指，上下左右到父視圖的距離。

下來這個Constrain to margains選項去掉，不去掉的話，即使你把間距設為零，它也不會緊貼著父視圖，會有一段間距。關於Constrain to margains，自己查一下資料吧。一般都不會勾選這個選項的。

接下來，添加其上下左右距離父視圖的約束，我們把值都設為0，注意要把紅色的虛線點一下變為實線才算加了，

 

添加距離約束

最後還有一步，點擊底部的Add constants，或者斷行符號。否則沒加上。

約束確定

 

很多時候，你會發現添加完約束之後，這裡會有一個黃色的箭頭，意思是你沒有Update Frames（更新位置大小），也就是說當前的位置大小跟加完約束之後的位置大小不一致。

 

黃色箭頭

點擊一下Update Frames即可，操作如

 

Update Frames

你就會發現其尺寸變了。

 

Update Frames菜單

第一個Update Frames是更新當前選中視圖的尺寸，第二個Update Frames
是更新全部（當前同一個父視圖上的）視圖的尺寸。

上邊的UITableView約束了上下左右到父視圖的距離，x座標，y座標，寬高是不是確定了呢？自己想想吧。

當約束沒加完，或者約束矛盾（比如約束其左邊到父視圖的距離為0，但你又重複添加一個其左邊到父視圖的距離為10的約束）了，這裡就會有一個紅色的箭頭

 

約束矛盾

點擊紅色箭頭會有錯誤提示，提示你缺少哪個約束，或者那裡矛盾了，如：

約束錯誤提示

寬高（width、height）約束

接下來我們在UITableView上添加一個Cell，然後在Cell上添加一個UIView，稱之為view1，給UIView約束左邊、上邊到父視圖的距離為0，寬高分別為100、44；

寬高約束

Width跟Height分別約束其寬高的具體值，我覺得沒有必要多講，記得添加的時候點上前邊的勾就好，不要以為光是填寫數值就好。

 

寬高

等高、等寬約束

在上邊的基礎上添加另一個UIView，稱之為view2，其約束為：左邊到view1的距離為10，上邊到父視圖的距離為0，寬高跟view1一致，操作如：

等高等寬約束

注意點：

1.view2放上去的時候，左邊跟view1要稍微留點距離，如果view2左邊遮住了view1一部分，那麼在添加左邊約束的時候，添加的是view2左邊到父視圖的距離，錯誤圖如下，切勿模仿：

錯誤圖

2.添加等寬等高兩個約束時，要同時選中view1跟view2（command鍵），

 

選中二圖

否則，功能表列這兩個選項為灰色：

 

灰色菜單

多個視圖等寬或等高，可同時選中多個，不一定是兩個，但至少兩個。

比例約束

在Cell上添加一個UIView，稱之為view3，約束為：左邊距離view2為10，上邊距父視圖為0，寬100，寬高比例4：1

示範如：

 

比例約束

注意點：

比例約束的前提是約束了寬高其中一項

然後，勾選Aspect Ratio

比例

最後修改比例值

 

比例值

邊對齊約束

添加UIView，稱之為view4，約束：其上邊到view3距離為10，與view3靠左對齊，寬高均為44

示範如：

 

靠左對齊約束

注意點：必須同時選中view3和view4才能添加對齊約束，菜單如：

對齊約束菜單

四個選項分別為靠左對齊、靠右對齊、上對齊，下對齊。用法一致。

中心對齊約束

添加UIView，稱之為view5，添加約束：view5與view4水平中心對齊，上邊距離view4為10，寬高分別為100，44；

示範圖如下：

中心對齊

注意點：跟邊對齊約束一樣，要選中兩個view，多個亦可。

菜單如下：

 

中心對齊菜單

三個選項分別為水平中心對齊、垂直中心對齊、基準對齊。感覺基準對齊跟底部對齊一致，沒有深究，也不常用，也許我的理解是錯誤的，甚至翻譯都是錯誤的，有問題請指正，謝謝。

父視圖中心對齊

添加UIView，稱之為view6，添加約束：跟父視圖水平中心對齊，上邊到view5距離為10，寬高分別為100、44

示範如下：

 

父視圖中心對齊

注意點：只需選中當前視圖即可添加跟父視圖中心對齊。

快捷約束

添加UIview，稱之為view7，約束：上邊距離view6為10，左右到父視圖的距離均為100，高44

示範如下：

 

快捷約束

注意點：在選中的view上按住滑鼠右鍵不放，拖動到對應的要添加約束的視圖上釋放即可，寬高（左右拖動，上下拖動）約束在本視圖內釋放即可。

常用控制項約束及約束常見問題

練習：

將三個UIView放到Cell上，三個view的上下距離父視圖均為0，左右相鄰，並且等寬，寬度均為Cell寬的1/3；

示範如：

 

練習

這個不用多講了。

UILabel、UIButton約束

在Cell上添加一個UILabel，約束：左邊到父視圖的距離為15，置中，

示範

 

label約束

你會發現，只約束了UILabel的位置，沒有約束寬高，上邊沒有紅色箭頭警告。這是因為UILabel的寬高可以隨著字數，字型大小而預設了，也可以隨之變化。UIButton與之類似。UILabel的右邊跟父視圖的距離一般是要約束的，防止因為字數過長跑到螢幕外邊去。其他的控制項視情況而定，用多了就會知道其特性。

常見問題：

1.添加一個UIView，其水平中心到父視圖的左邊距離為父視圖寬度的1/3，該怎麼添加呢？

 

1/3間距

Multiplier是一個係數，預設都為1。可以這麼理解，水平置中的時候其中心位置=1 × 1/2 × 父視圖寬。那要其中心為父視圖寬的1/3，只需將係數1改為2/3即可。

 

2.如，有時候希望圖片跟文字這個整體置中，而不是僅僅文字置中，怎麼半呢？

置中

示範如下：

 

置中示範

自己理解一下吧。

iOS Storyboard約束詳解