Auto Layout - 固有内容尺寸视图(2)

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

动态的Label和Text Field高度

之前的例子中,通过假设text field的高度永远高于label的高度,我们简化了排版逻辑。然而事实上这个假定不一定一直是对的。当你将label的font size调大到一定程度,它就会扩张到text field上面。

接下来的例子将会在运行时动态地根据最高的控件来设定垂直空间。在使用一般情况的系统字体时,这个方法和之前的"简单的Label和Text Field"提到的一样(见截图)。然而如果你增加label的字体大小到36.0pt的话,排版中的垂直距离将会根据label的top计算得到。

这个例子或多或少是生造出来的。毕竟在一般情况下,如果你增加label的字体大小的话,你也会同时增加text field的字体大小。然而由于iPhone的无障碍设置中提供了“XXXL”字体大小的选项,这个技巧在混合了动态类型和固定大小控件(比如图片)的情况下很有用。

Views和Constraints

我们先建立和简单的Label和Text Field中一样的视图结构,但使用更加复杂的一系列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的。默认情况下,interface builder应该会设置label的content hugging为251,设置text field的content hugging为250。你可以从size inspector验证这些。

Name Horizontal hugging Vertical hugging Horizontal resistance Vertical resistance
Name Label 251 251 750 750
Name Text Field 250 250 750 750

说明

上面的范例对每个控件都使用了一对constraints。一个必要的greater-than-or-equal(>=) constraints定义了控件和layout guide之间的最小距离,而一个可选的constraint试着将控件拉到距离layout guide正好20.0pt的地方。

对较高的控件来说,两个constraints都是可满足的,于是系统会将它放置在距离layout guide正好20pt的地方。然而,对矮一点的控件而言,只有最小距离constraint是可满足的。于是另外一个constraint被忽略了。这就能让控件变动时,Auto Layout系统动态地重新计算排版。

小贴士
必须确保可选的constraints的优先级数值低于content hugging constraint的值(250)。否则系统会违反content hugging constraint,并且拉伸该View而不是重新定位它。
当和用了baseline对齐的layout一起使用时,这就会非常让人迷惑。因为baseline对齐只有在带文字的view以它们的固有高度显示时才有效。当系统调整其中一个view的大小时,文字可能不会被正确地排列,即便是设置了required baseline constraint。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容