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

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

固有内容尺寸视图

以下的例子展示了Auto Layout如何与带有固有内容尺寸(intrinsic content size)的视图一起使用。总的来说,intrinsic content size简化了排版,减少了你需要的约束(constraints)。然而,使用intrinsic content size通常需要设置view的content-hugging(译者:hug意为紧身,即使得控件的尺寸不大于内容的尺寸)和content-resistance(译者:resistance意为抵抗,即使得控件的尺寸不小于内容的尺寸)(CHCR)参数。这些参数可能导致额外的复杂度。

参考Auto Layout Cookbook工程来查看相关源码。

简单的Label和Text Field

这个例子将一个简单的label和text field进行排版。例子中,label的宽度取决于它的text参数的长度,而text field将自动伸缩来填满剩下的空间。

由于这个例子使用了view的Intrinsic content size,你只需要五个约束来设定一个独一无二的版式。然而,你必须保证你设置了正确的CHCR参数来得到正确的尺寸调整行为。

更多有关intrinsic content size和CHCR参数的信息,请参阅Intrinsic Content Size

视图和约束

在Interface Builder中,拉出一个label和一个text field。设置label的text和text field的placeholder,并设置约束为如下所示:

  1. Name Label.Leading = Superview.LeadingMargin
  2. Name Text Field.Trailing = Superview.TrailingMargin
  3. Name Text Field.Leading = Name Label.Trailing + Standard
  4. Name Text Field.Top = Top Layout Guide.Bottom + 20.0
  5. Name label.Baseline = Name Text Field.Baseline

属性

要使得text field拉伸并填充剩余的空间,它的content hugging的优先级必须低于label的优先级。默认情况下,interface builder会设置label和text field的content hugging分别为251和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

说明

注意,这个排版只用了两个约束(4和5)来定义垂直版式,3个约束(1,2,3)来定义水平版式。根据Creating Nonambiguous, Satisfiable Layouts一文的经验,我们对每个视图需要设置两个水平约束和两个垂直约束。然而,label和text field的intrinsic content size提供了他们的高度和Label的宽度,使得这三个约束不再被需要。

这个版式使用了简化了的假设,那就是text field总是比label的文字来的高。所以这里用了text field的高度来定义(label和text field)距离top layout guide的高度。由于两个控件都是用来显示文字的,这个例子使用了基线(baseline)来对齐它们。

在水平方向上,你依然需要定义哪个视图需要拉伸以便填满剩余的空间。你可以通过视图的CHCR参数来修改这些。在本例中,interface builder应该已经设置label的horizontal和vertical hugging参数为251。由于这个值比text feild的默认值250要大,所以text field会拉伸并填满其余的空间。

注意
如果显示区域对控件来说太小了的话,你必须同时修改compression resistance的值。这个参数定义了空间不够时哪个视图应该被截短。

在这个例子里,修改compression resistance的工作留给读者作为练习。如果name label的文字够长或者字体够大,那么就不会有足够的空间,所以会导致不确定的版式。这时,系统会选择违反一个约束,text field或者label的其中一个会被截断。

理想情况下,你会希望新建一个从来都不会比可用空间大的版式,并且按需为compact size classes建立另外一个版式。然而,如果你要为视图增加多语言和动态类型支持的话,你就很难预测每一行到底会多大。设置compression resistance是一个很好的以防万一的值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容