使用NSLayoutAnchor在两个标签之间创建约束？

Question

我正在以编程方式创建一个视图，需要在两个标签之间设置约束。我最近刚刚发现了NSLayoutAnchor，觉得使用它是一个不错的选择，但我不知道如何在两种不同的事物(即标签、imageViews等)之间创建约束。我知道一般的设置如下所示：

let codedLabel:UILabel = UILabel()
codedLabel.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
codedLabel.textAlignment = .center
codedLabel.text = alertText
codedLabel.numberOfLines=1
codedLabel.textColor=UIColor.red
codedLabel.font=UIFont.systemFont(ofSize: 22)
codedLabel.backgroundColor=UIColor.lightGray

self.contentView.addSubview(codedLabel)
codedLabel.translatesAutoresizingMaskIntoConstraints = false
codedLabel.heightAnchor.constraint(equalToConstant: 200).isActive = true
codedLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
codedLabel.centerXAnchor.constraint(equalTo: codedLabel.superview!.centerXAnchor).isActive = true
codedLabel.centerYAnchor.constraint(equalTo: codedLabel.superview!.centerYAnchor).isActive = true

如何在两个标签之间设置约束？

Answer 1

假设您有两个希望以两种方式中的一种方式水平布局的UIViews：

• 第一视图是从超级视图的边缘或安全区域的前缘20点，第2视图是从第1视图的另外20点。(想想左对齐的一行按钮。)
• 两个视图都要居中，每个视图之前/之间/之后的间距相等。(设想两个按钮间距相等，居中。)

例如，代码1将是：

// #1
let view1 = UIView()
view1.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(view1)
let view2 = UIView()
view2.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(view2)

// #2
let margins = view.layoutMarginsGuide
view.addLayoutGuide(margins)
view1.leadingAnchor.constraint(equalTo: margins.leadingAnchor, constant: 20).isActive = true

// #3
view2.leadingAnchor.constraint(equalTo: view1.trailingAnchor, constant: 20).isActive = true

// #4
view1.widthAnchor.constraint(equalToConstant: 100).isActive = true
view2.widthAnchor.constraint(equalToConstant: 100).isActive = true

注释1：注意到您不需要为每个视图提供一个框架，但是您确实需要将自动调整大小的掩码设置为false。这是一个错误，许多新程序员忘记了。

注释2： All UIViewController主视图有一个layoutMarginGuide，它产生垂直和水平的标准边距(在iOS 11中，特别是对于iPhone X，有一个新的垂直对齐safeAreaLayoutGuide )。我已经将view1的前缘设置为margin的前沿，并增加了20点的不变值。

注释3：就像我把view1与margin联系起来一样，我把view2与view1, but this time the leading edge ofview2is 20 points from the视图1‘后边联系起来。

注释4：水平放置最不需要做的事情是给每个视图一个宽度。在这种情况下，我想两者都是100分。

示例2基本上使用了与示例1相同的代码，因此我将只注意其中的关键区别：

let view1 = UIView()
view1.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(view1)
let view2 = UIView()
view2.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(view2)

let margins = view.layoutMarginsGuide
view.addLayoutGuide(margins)

// #1
let spacer1 = UILayoutGuide()
view.addLayoutGuide(spacer1)
let spacer2 = UILayoutGuide()
view.addLayoutGuide(spacer2)
let spacer3 = UILayoutGuide()
view.addLayoutGuide(spacer3)

// #2
spacer.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
view1.leadingAnchor.constraint(equalTo: spacer1.trailingAnchor).isActive = true
spacer2.leadingAnchor.constraint(equalTo: view1.trailingAnchor).isActive = true
view2.leadingAnchor.constraint(equalTo: spacer2.trailingAnchor).isActive = true
spacer3.leadingAnchor.constraint(equalTo: view2.trailingAnchor).isActive = true
spacer3.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true

// #3
view1.widthAnchor.constraint(equalToConstant: 100).isActive = true
view2.widthAnchor.constraint(equalToConstant: 100).isActive = true
spacer1.widthAnchor.constraint(equalTo: spacer2.widthAnchor).isActive = true
spacer2.widthAnchor.constraint(equalTo: spacer3.widthAnchor).isActive = true

评论1：在iOS 9中引入了UILayoutGuides的概念。在此之前，要创建“间隔器”，您必须实际创建一个不可见的UIView，并将其添加为子视图(包含与其相关的所有开销)。布局指南“行为”像视图，但没有这种开销。

注释#2:如果为，则为水平序列请注意，我没有使用任何常量，因为我希望让布局引擎提供相同的间距。

注释3：，当我给出两个视图的宽度值时，我不使用间隔。相反，我宣布它们的宽度相等。

请注意，我只使用水平约束。要使自动布局工作，还需要声明垂直约束。大多数概念都是一样的..。与前导/尾随、centerX和宽度锚不同，您有顶部/底部、centerY和高度锚。但!从iOS 11开始，您现在应该使用一个safeAreaLayoutGuide而不是layoutMarginsGuide。这只适用于垂直！所以我才把东西分开。下面是用于垂直对齐的代码：

let layoutGuideTop = UILayoutGuide()
let layoutGuideBottom = UILayoutGuide()
view.addLayoutGuide(layoutGuideTop)
view.addLayoutGuide(layoutGuideBottom)
if #available(iOS 11, *) {
    let guide = view.safeAreaLayoutGuide
    layoutGuideTop.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0).isActive = true
    layoutGuideBottom.bottomAnchor.constraintEqualToSystemSpacingBelow(guide.bottomAnchor, multiplier: 1.0).isActive = true
} else {
    layoutGuideTop.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true
    layoutGuideBottom.bottomAnchor.constraint(equalTo: bottomLayoutGuide.topAnchor).isActive = true
}

现在，无论运行的是什么版本，layoutGuideTop和layoutGuideBottom都应该工作。