約束,就是指……此處略去1萬字……都懂的,就不說了。直接進入實戰(zhàn)環(huán)節(jié)。
本文的控件約束都是圍繞著UITableView展開的。
UITableView約束:
在UITableViewController中的tableView是不用添加約束的,已經(jīng)被綁定了。
UITableViewCell的約束也是不用添加的,寬度都是跟其UITableView一致,高度由協(xié)議方法:
tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath)來決定。
約束的基本
約束基本內(nèi)容為約束其位置、大小。
位置
位置基本可以靠約束x坐標(左邊到父視圖的距離),y坐標(上邊到父視圖的距離),也可以約束其中心位置。
大小
大小可以靠約束其寬(width)高(height),也在可在約束x坐標,y坐標的前提下,約束其右邊到父視圖的距離和下邊到父視圖的距離(前提都是父視圖已經(jīng)約束好了)等。
約束類型
距離約束
下邊,在UIViewController中添加UITableView,并添加約束。

首先,看這個彈出框

一看就應該知道上邊四項內(nèi)容分別指,上下左右到父視圖的距離。
下來這個Constrain to margains選項去掉,不去掉的話,即使你把間距設為零,它也不會緊貼著父視圖,會有一段間距。關于Constrain to margains,自己查一下資料吧。一般都不會勾選這個選項的。
接下來,添加其上下左右距離父視圖的約束,我們把值都設為0,注意要把紅色的虛線點一下變?yōu)閷嵕€才算加了,

最后還有一步,點擊底部的Add constants,或者回車。否則沒加上。

很多時候,你會發(fā)現(xiàn)添加完約束之后,這里會有一個黃色的箭頭,意思是你沒有Update Frames(更新位置大?。簿褪钦f當前的位置大小跟加完約束之后的位置大小不一致。

點擊一下Update Frames即可,操作如下圖

你就會發(fā)現(xiàn)其尺寸變了。

第一個Update Frames是更新當前選中視圖的尺寸,第二個Update Frames
是更新全部(當前同一個父視圖上的)視圖的尺寸。
上邊的UITableView約束了上下左右到父視圖的距離,x坐標,y坐標,寬高是不是確定了呢?自己想想吧。
當約束沒加完,或者約束矛盾(比如約束其左邊到父視圖的距離為0,但你又重復添加一個其左邊到父視圖的距離為10的約束)了,這里就會有一個紅色的箭頭

點擊紅色箭頭會有錯誤提示,提示你缺少哪個約束,或者那里矛盾了,如下圖:

寬高(width、height)約束
接下來我們在UITableView上添加一個Cell,然后在Cell上添加一個UIView,稱之為view1,給UIView約束左邊、上邊到父視圖的距離為0,寬高分別為100、44;

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

等高、等寬約束
在上邊的基礎上添加另一個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上按住鼠標右鍵不放,拖動到對應的要添加約束的視圖上釋放即可,寬高(左右拖動,上下拖動)約束在本視圖內(nèi)釋放即可。
常用控件約束及約束常見問題
練習:
將三個UIView放到Cell上,三個view的上下距離父視圖均為0,左右相鄰,并且等寬,寬度均為Cell寬的1/3;
演示如下圖:

這個不用多講了。
UILabel、UIButton約束
在Cell上添加一個UILabel,約束:左邊到父視圖的距離為15,居中,
演示如圖:

你會發(fā)現(xiàn),只約束了UILabel的位置,沒有約束寬高,上邊沒有紅色箭頭警告。這是因為UILabel的寬高可以隨著字數(shù),字體大小而默認了,也可以隨之變化。UIButton與之類似。UILabel的右邊跟父視圖的距離一般是要約束的,防止因為字數(shù)過長跑到屏幕外邊去。其他的控件視情況而定,用多了就會知道其特性。
常見問題:
1.添加一個UIView,其水平中心到父視圖的左邊距離為父視圖寬度的1/3,該怎么添加呢?

Multiplier是一個系數(shù),默認都為1??梢赃@么理解,水平居中的時候其中心位置=1 × 1/2 × 父視圖寬。那要其中心為父視圖寬的1/3,只需將系數(shù)1改為2/3即可。
2.如下圖,有時候希望圖片跟文字這個整體居中,而不是僅僅文字居中,怎么半呢?

演示如下:

自己理解一下吧。
3.如圖綠色框中怎么利用約束巧妙實現(xiàn)呢?思考一下吧。累了,今天就更新到這先。

歡迎提出意見和建議,有錯誤的地方請指正,謝謝!
歡迎關注我的
CSDN:http://blog.csdn.net/luoyuant
新浪博客:http://blog.sina.com.cn/memoriesofsnows
網(wǎng)易博客:http://memoriesofsnows.blog.163.com/
簡書:http://www.itdecent.cn/users/f4284f2cc646/latest_articles