为什么布局引擎在这个例子中踢入？

Question

我创建了一个只有两个视图的游乐场项目：屏幕中心有一个标签，屏幕下方还有一个按钮。当我启动这个例子时，一切都很好。

但是，只要将布局约束添加到标签视图，那么按钮视图就跳转到屏幕顶部！

Nota Bene：我在两个视图上都使用了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 

这里是结果。这是预期的，没有限制。请注意按钮视图的位置：它位于屏幕的底部。

现在我增加了约束至标签视图。这个添加的结果是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 

如果你有兴趣，这里存在打印限制名单的结果，这证实了的按钮来查看有没有相关的约束：

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

我的问题是：为什么布局引擎移动的图，而没有相关的约束。

Answer 1

translateAutoresizingMaskIntoConstraints = false告诉自动布局不转换您的视图的frame条件的限制，让你的UIButton有没有限制。您的UIButton受约束，并且自动布局可以将其放在任何它认为最好的地方。通常这意味着水平和垂直偏移量为0。

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

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

如果你喜欢你的按钮，你把它与框架，然后只是不要设置translateAutoresizingMaskIntoContraints = false。将其设置为true。

对于您的标签，一旦您开始给出约束的路径，您应该确保它完全指定。如果您希望将其设置为与其内在值不同的东西，请为您的标签指定一个垂直约束，并限制宽度和高度。

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