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

Question

我正在以编程方式创建 View ，需要在两个标签之间设置约束。我最近刚刚发现 NSLayoutAnchor 并觉得使用它是一个不错的选择，但我不确定如何在两个不同的事物(即标签、 ImageView 等)之间创建约束。我知道一般设置看起来像这样:

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

假设您有两个 UIView，您希望以以下两种方式之一水平布局:

• View #1 距离父 View 的边缘或安全区域的前缘 20 points，View #2 距离 view #1 另外 20 points。 (想想一排左对齐的按钮。)

• 两个 View 都应居中，每个 View 之前/之间/之后的间距相等。 (假设两个按钮等距且居中。)

例如 #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:请注意，您不需要给每个 View 一个框架，但是您确实需要设置自动将掩码大小调整为 false。这是许多新编码员忘记的错误。

评论 #2:所有 UIViewController 主视图都有一个 layoutMarginGuide 产生标准的垂直和水平边距(在 iOS 11 中，特别是对于 iPhone X，有一个新的 safeAreaLayoutGuide 用于垂直对齐)。我已将 view1 的前缘设置为 margin 的前缘，并从中增加一个 20 点的常量。

评论 #3: 就像我将 view1 与 margin 相关联一样，我将 view2 与 view2 相关联view1，但这次view2的前沿距离view1` trailing 边缘 20 点。

评论 #4:对于水平放置，您需要做的最后一件事是为每个 View 指定一个宽度。在这种情况下，我希望两者都是 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 中，Apple 引入了 UILayoutGuides 的概念。在此之前，要创建“间隔器”，您实际上必须创建一个不可见的 UIView 并将其添加为 subview (以及与之相关的所有开销)。布局指南“表现”得像 View ，但没有那种开销。

评论#2:水平序列如果是“margin...spacer1...view1...spacer2...view2...spacer3...margin”。请注意，我没有使用任何常量，因为我希望让布局引擎提供相等的间距。

评论 #3:虽然我为两个 View 都提供了宽度值，但我并没有使用间隔符。相反，我声明它们的宽度相等。

请注意，我只使用了水平 约束。要使自动布局起作用，您还需要声明垂直 约束。大多数概念都是相同的……您拥有顶部/底部、中心 Y 和高度 anchor ，而不是前导/尾随、centerX 和宽度 anchor 。但!从 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，无论运行的是什么 iOS 版本，它们都应该可以正常工作。