iOS-Auto Layout[5]-Views with Intrinsic Content Size

发表于 | 分类于 | |

本文列举了一些利用CHCR进行布局控制的例子。

Simple Label and Text Field

设计如下的布局效果时:

AutoLayout-CHCR

Constraint为：

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

Label的宽度首先满足，其次TextField填充剩余的空间，所以，CHCR设置为：

AutoLayout-CHCR

Dynamic Height Columns

当要实现多行的效果时：

AutoLayout-CHCR

建立Constraints如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
First Name Label.Leading = Superview.LeadingMargin
Middle Name Label.Leading = Superview.LeadingMargin
Last Name Label.Leading = Superview.LeadingMargin
First Name Text Field.Leading = First Name Label.Trailing + Standard
Middle Name Text Field.Leading = Middle Name Label.Trailing + Standard
Last Name Text Field.Leading = Last Name Label.Trailing + Standard
First Name Text Field.Trailing = Superview.TrailingMargin
Middle Name Text Field.Trailing = Superview.TrailingMargin
Last Name Text Field.Trailing = Superview.TrailingMargin
First Name Label.Baseline = First Name Text Field.Baseline
Middle Name Label.Baseline = Middle Name Text Field.Baseline
Last Name Label.Baseline = Last Name Text Field.Baseline
First Name Text Field.Width = Middle Name Text Field.Width
First Name Text Field.Width = Last Name Text Field.Width
First Name Label.Top >= Top Layout Guide.Bottom + 20.0
First Name Label.Top = Top Layout Guide.Bottom + 20.0 (Priority 249)
First Name Text Field.Top >= Top Layout Guide.Bottom + 20.0
First Name Text Field.Top = Top Layout Guide.Bottom + 20.0 (Priority 249)
Middle Name Label.Top >= Top Layout Guide.Bottom + Standard
Middle Name Label.Top = Top Layout Guide.Bottom + Standard (Priority 249)
Middle Name Text Field.Top >= Top Layout Guide.Bottom + Standard
Middle Name Text Field.Top = Top Layout Guide.Bottom + Standard (Priority 249)
Last Name Label.Top >= Top Layout Guide.Bottom + Standard
Last Name Label.Top = Top Layout Guide.Bottom + Standard (Priority 249)
Last Name Text Field.Top >= Top Layout Guide.Bottom + Standard
Last Name Text Field.Top = Top Layout Guide.Bottom + Standard (Priority 249)

这里，用不等式实现了，动态调节距离顶部的高度，CHCR设置与上方相同。

Two Buttons with Equal Spacing

当要实现两个Button与左右两边的间距都相等的效果时：

AutoLayout-CHCR

由于，没办法对空的区域建立Constraints，所以，需要引入辅助的Dummy View：

AutoLayout-CHCR

建立Constraints如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Leading Dummy View.Leading = Superview.LeadingMargin
Short Button.Leading = Leading Dummy View.Trailing
Center Dummy View.Leading = Short Button.Trailing
Long Button.Leading = Center Dummy View.Trailing
Trailing Dummy View.Leading = Long Button.Trailing
Trailing Dummy View.Trailing = Superview.TrailingMargin
Bottom Layout Guide.Top = Leading Dummy View.Bottom + 20.0
Bottom Layout Guide.Top = Short Button.Bottom + 20.0
Bottom Layout Guide.Top = Center Dummy View.Bottom + 20.0
Bottom Layout Guide.Top = Long Button.Bottom + 20.0
Bottom Layout Guide.Top = Trailing Dummy View.Bottom + 20.0
Short Button.Leading >= Superview.LeadingMargin
Long Button.Leading >= Short Button.Trailing + Standard
Superview.TrailingMargin >= Long Button.Trailing
Leading Dummy View.Width = Center Dummy View.Width
Leading Dummy View.Width = Trailing Dummy View.Width
Short Button.Width = Long Button.Width
Leading Dummy View.Height = 0.0
Center Dummy View.Height = 0.0
Trailing Dummy View.Height = 0.0

注意，引入的Dummy View的高度为0，但是其依然会造成内存消耗以及影响View结构树的响应链，可能导致一些难以定位的异常。