ios - 在此示例中，为什么布局引擎会启动？

Question

我创建了一个只有两个 View 的 Playground 项目:一个标签在屏幕中央，一个按钮贴在屏幕下方。当我启动该示例时，一切正常。

但是只要我向 Label View 添加 Layout Constraint，Button View 就会跳到屏幕顶部!

Nota Bene:我在两个 View 上都使用了 translateAutoresizingMaskIntoConstraints = false。

下面是没有约束的代码:

//: Playground - noun: a place where people can play

import UIKit
import PlaygroundSupport

let liveview = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 600))

let button = UIButton(frame: CGRect(x: 123.5, y: 566, width: 50, height: 50))
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("BUTTON", for: .normal)
button.backgroundColor = UIColor.darkGray
button.sizeToFit()
liveview.addSubview(button)

let label = UILabel(frame: CGRect(x: 134.75, y: 289.75, width: 50, height: 50))
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor.blue
label.text = "LABEL"
label.sizeToFit()
liveview.addSubview(label)

PlaygroundPage.current.liveView = liveview

这是结果。这是意料之中的，目前还没有限制。请注意按钮 View 的位置:它位于屏幕底部。

现在我要为 Label View 添加约束。添加的结果是 Button View 跳到了屏幕的顶部!下面是相应的代码，结果如下:

//: Playground - noun: a place where people can play

import UIKit
import PlaygroundSupport

let liveview = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 600))

let button = UIButton(frame: CGRect(x: 123.5, y: 566, width: 50, height: 50))
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("BUTTON", for: .normal)
button.backgroundColor = UIColor.darkGray
button.sizeToFit()
liveview.addSubview(button)

let label = UILabel(frame: CGRect(x: 134.75, y: 289.75, width: 50, height: 50))
label.translatesAutoresizingMaskIntoConstraints = false
label.textColor = UIColor.blue
label.text = "LABEL"
label.sizeToFit()
liveview.addSubview(label)

NSLayoutConstraint(item: label, attribute: .centerX, relatedBy: .equal, toItem: liveview, attribute: .centerX, multiplier: 1.0, constant: 0.0).isActive = true

print(liveview.constraints)

PlaygroundPage.current.liveView = liveview

如果你有兴趣，这里有打印约束列表的结果，它确认了 Button View 没有关联的约束:

[<NSLayoutConstraint:0x60000008d890 UILabel:0x7fc2c3f06c20'LABEL'.centerX == UIView:0x7fc2c3d030c0.centerX   (active)>]

我的问题如下:为什么布局引擎在没有关联约束的情况下移动 View 。

Answer 1

translateAutoresizingMaskIntoConstraints = false 告诉 Auto Layout 不要将 View 的 frame 转换为约束，因此您的 UIButton 具有没有约束。您的 UIButton 受到限制，Auto Layout 可以将它放在它认为最好的位置。通常这意味着 0 的水平和垂直偏移。

在您的第一个示例中，UIButton 和 UILabel 都是不受约束的，并且由于根本没有约束，所以布局引擎不会运行。

在您的第二个示例中，只要您向 UILabel 添加约束，布局引擎就会启动并开始放置内容。请注意，它按照您的要求将您的标签居中，但它也会将其移动到屏幕顶部，因为未指定垂直位置。然后它将您的按钮移动到水平偏移 0 和垂直偏移 0。同样，由于您的按钮没有任何限制，Auto Layout 可以自由地将其移动到任何地方。

如果您喜欢将按钮与框架放在一起的位置，则不要设置 translateAutoresizingMaskIntoContraints = false。将其设置为 true。

对于您的标签，一旦您开始对其施加约束，您应该确保它是完全指定的。如果您希望将它们设置为与其固有值不同的值，请为您的标签提供垂直约束和宽度和高度约束。

另请注意，当您通过设置 isActive = true 激活约束时，约束会添加到适当的 View 中。如果您要向按钮添加 height 和 width 约束，这些约束将被添加到 button.constraints 而不是 liveview .约束。如果您要创建一个约束，使按钮的宽度等于标签的宽度，那么这个约束将被添加到它们共同祖先的约束中。