動(dòng)態(tài)的Label和Text Field高度
之前的例子中,通過假設(shè)text field的高度永遠(yuǎn)高于label的高度,我們簡(jiǎn)化了排版邏輯。然而事實(shí)上這個(gè)假定不一定一直是對(duì)的。當(dāng)你將label的font size調(diào)大到一定程度,它就會(huì)擴(kuò)張到text field上面。
接下來的例子將會(huì)在運(yùn)行時(shí)動(dòng)態(tài)地根據(jù)最高的控件來設(shè)定垂直空間。在使用一般情況的系統(tǒng)字體時(shí),這個(gè)方法和之前的"簡(jiǎn)單的Label和Text Field"提到的一樣(見截圖)。然而如果你增加label的字體大小到36.0pt的話,排版中的垂直距離將會(huì)根據(jù)label的top計(jì)算得到。
這個(gè)例子或多或少是生造出來的。畢竟在一般情況下,如果你增加label的字體大小的話,你也會(huì)同時(shí)增加text field的字體大小。然而由于iPhone的無(wú)障礙設(shè)置中提供了“XXXL”字體大小的選項(xiàng),這個(gè)技巧在混合了動(dòng)態(tài)類型和固定大小控件(比如圖片)的情況下很有用。
Views和Constraints
我們先建立和簡(jiǎn)單的Label和Text Field中一樣的視圖結(jié)構(gòu),但使用更加復(fù)雜的一系列constraints。
- Name Label.Leading = Superview.LeadingMargin
- Name Text Field.Trailing = Superview.TrailingMargin
- Name Text Field.Leading = Name Label.Trailing + Standard
- Name Label.Top >= Top Layout Guide.Bottom + 20.0
- Name Label.Top = Top Layout Guide.Bottom + 20.0 (Priority 249)
- Name Text Field.Top >= Top Layout Guide.Bottom + 20.0
- Name Text Field.Top = Top Layout Guide.Bottom + 20.0 (Priority 249)
- Name label.Baseline = Name Text Field.Baseline
屬性
要讓text field拉伸并充滿可用空間,它的content hugging必須要小于label的。默認(rèn)情況下,interface builder應(yīng)該會(huì)設(shè)置label的content hugging為251,設(shè)置text field的content hugging為250。你可以從size inspector驗(yàn)證這些。
| Name | Horizontal hugging | Vertical hugging | Horizontal resistance | Vertical resistance |
|---|---|---|---|---|
| Name Label | 251 | 251 | 750 | 750 |
| Name Text Field | 250 | 250 | 750 | 750 |
說明
上面的范例對(duì)每個(gè)控件都使用了一對(duì)constraints。一個(gè)必要的greater-than-or-equal(>=) constraints定義了控件和layout guide之間的最小距離,而一個(gè)可選的constraint試著將控件拉到距離layout guide正好20.0pt的地方。
對(duì)較高的控件來說,兩個(gè)constraints都是可滿足的,于是系統(tǒng)會(huì)將它放置在距離layout guide正好20pt的地方。然而,對(duì)矮一點(diǎn)的控件而言,只有最小距離constraint是可滿足的。于是另外一個(gè)constraint被忽略了。這就能讓控件變動(dòng)時(shí),Auto Layout系統(tǒng)動(dòng)態(tài)地重新計(jì)算排版。
小貼士
必須確??蛇x的constraints的優(yōu)先級(jí)數(shù)值低于content hugging constraint的值(250)。否則系統(tǒng)會(huì)違反content hugging constraint,并且拉伸該View而不是重新定位它。
當(dāng)和用了baseline對(duì)齊的layout一起使用時(shí),這就會(huì)非常讓人迷惑。因?yàn)閎aseline對(duì)齊只有在帶文字的view以它們的固有高度顯示時(shí)才有效。當(dāng)系統(tǒng)調(diào)整其中一個(gè)view的大小時(shí),文字可能不會(huì)被正確地排列,即便是設(shè)置了required baseline constraint。