Auto Layout - 固有內(nèi)容尺寸視圖(2)

翻譯自"Auto Layout Guide: View with Intrinsic Content Size"

動(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。

  1. Name Label.Leading = Superview.LeadingMargin
  2. Name Text Field.Trailing = Superview.TrailingMargin
  3. Name Text Field.Leading = Name Label.Trailing + Standard
  4. Name Label.Top >= Top Layout Guide.Bottom + 20.0
  5. Name Label.Top = Top Layout Guide.Bottom + 20.0 (Priority 249)
  6. Name Text Field.Top >= Top Layout Guide.Bottom + 20.0
  7. Name Text Field.Top = Top Layout Guide.Bottom + 20.0 (Priority 249)
  8. 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。

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

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

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