首先清除一切事物中的所有限制,这样我们就有了一个全新的状态。
第 1 步:构建视图层次结构。在这个例子中,我们想要这样的东西:
视图控制器的视图,我们称之为parentView
有一个子视图,我们称之为redView
. That redView
有一个孩子,一个文本字段,我们称之为textField
.
层次结构如下所示:
步骤 2:设置特定于任何单个视图的任何约束。在这种情况下,我们可能只想在文本视图上设置宽度约束。现在,我只设置 200pts 的宽度。
步骤 3:设置之间的约束textView
及其父级,redView
。假设我们想要一个 10pt 的边框。让我们添加这些约束:
添加这些约束后,我们将收到一些自动布局警告和错误。对于初学者来说,因为我为超级视图添加的 with 和 space 约束与实际大小不匹配,所以我会收到如下警告:
还会有一些错误描述缺少 X 和 Y 位置redView
并为textView
。这里的错误实际上是必要的两倍。textView
知道自己相对于什么位置redView
。我们不需要更多的约束来解决textView
的立场。然而,redView
还不知道该把自己定位在哪里……所以最终,textView
也有点不太清楚。
我们可以更新textView
的框架来消除警告,但让我们继续修复实际的错误。
第 5 步:设置redView
的约束相对于superView
. redView
已经知道尺寸是多少。请注意,我们没有错误redView
的宽度。它只是不知道要去哪里。在这种情况下,我会简单地说我们想要redView
居中。所以我们要添加这些约束:
现在我们已经解决了一些问题。唯一剩下的问题是height
对于一切。
为了解决这个问题,我们必须设置内容大小优先级textView
。将这些全部设置为 1000 并将“固有大小”属性更改为“占位符”。
到目前为止,所有自动布局错误都应该消失,我们应该只留下警告,因为我们的故事板框架与我们的约束条件不匹配。
我们可以通过选择来解决这个问题parentView
并更新所有框架:
当涉及到根据内容大小自动调整大小时,这个自动布局难题有一个最后的警告:如果我们的文本视图没有内容会发生什么?
如果我们的文本视图没有内容,自动布局将选择高度 0,我们的用户甚至看不到那里有文本视图,更不用说点击它来添加内容(并使其展开)。当使用自动布局和基于内容的大小调整时,我们几乎应该始终确保已为内容视图设置显式大小或最小大小。
我们不必担心我们的textView
的宽度,因为我们将其明确设置为 200。所以让我们添加一个最小高度约束。首先添加任何高度约束:
现在去尺寸检查员那里检查textView
,找到我们添加的这个高度约束,并将其编辑为大于或等于约束:
故事板不会反映我们的内容变化textView
并适当调整其大小,但您的约束现在已正确设置,并且这将在您的设备或模拟器中正常运行。