iOS Storyboard約束詳解(附gif圖)

約束,就是指……此處略去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,并添加約束。


約束UITableView

首先,看這個彈出框


約束彈出框

一看就應該知道上邊四項內(nèi)容分別指,上下左右到父視圖的距離。

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

接下來,添加其上下左右距離父視圖的約束,我們把值都設為0,注意要把紅色的虛線點一下變?yōu)閷嵕€才算加了,


添加距離約束

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

約束確定


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


黃色箭頭

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


Update Frames

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


Update Frames菜單

第一個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,居中,

演示如圖:


label約束

你會發(fā)現(xiàn),只約束了UILabel的位置,沒有約束寬高,上邊沒有紅色箭頭警告。這是因為UILabel的寬高可以隨著字數(shù),字體大小而默認了,也可以隨之變化。UIButton與之類似。UILabel的右邊跟父視圖的距離一般是要約束的,防止因為字數(shù)過長跑到屏幕外邊去。其他的控件視情況而定,用多了就會知道其特性。

常見問題:

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


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


最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容