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将自动伸缩来填满剩下的空间。

Auto Layout - 固有内容尺寸视图(1)_第1张图片

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

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

视图和约束

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

Auto Layout - 固有内容尺寸视图(1)_第2张图片
  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是一个很好的以防万一的值。

你可能感兴趣的:(Auto Layout - 固有内容尺寸视图(1))