自动布局约束第一项和第二项如何工作？

Question

如果我的 UIView 前 100 左 120 右 120 第一项和第二项关系如何工作。浏览 Apple 文档后，每个关系都有一个线性方程，表达式为。

firstItem.firstItemAttribute == secondItem.secondItemAttribute * multiplier + constant

用这个方程表示 topleading 约束关系

• 第一项Safe Area.Leading
• 关系 =
• 第二项 = MyView.Leading
• 常数120

我理解的第一项和第二项等式。但是当我执行 reverse 时，第二项常量更改为 - 120 并且布局在更改后没有效果，这对我来说是个问题。为什么负面没有效果，它的用途是什么？ Xcode 为 FirstItem 和 SecondItem 提供了一组属性，如前导、居中、尾随，当我们需要切换这些属性时。

Answer 1

• First Item = Safe Area.Leading --- 那是 Safe Area 的“左边缘”
• Second Item = MyView.Leading --- 那是视图的“左边缘”

所以，安全区域的“左边缘”到您的视图的“左边缘”等于120，或者，您的视图是120 pts 来自安全区（右侧）。

• First Item = MyView.Leading --- 那是视图的“左边缘”
• Second Item = Safe Area.Leading --- 那是 Safe Area 的“左边缘”

所以，视图的“左边缘”到安全区域的“左边缘”等于-120，或者，安全区域的左边缘是@ 987654326@ pts 从您的视图（左侧）。

如果您将-120 更改为120，这会将安全区域的左边缘+120 pts 或120 pts 放在视图左边缘的右侧，这会将视图推离屏幕向左。

编辑：

为了更清楚一点...

使用“SafeArea.Leading -> myView.Leading”，您是在说“将 myView 的左边缘距离安全区域的左边缘 120 分”

当您将它们交换为“myView.Leading -> SafeArea.Leading”时，您是在说“将 SafeArea 的左边缘 minus 距离 myView 的左边缘 120 分” em>。

---

一般来说，在使用 Interface Builder 时，您不必理会顺序...因为您在视觉上布置元素，而 IB 知道如何定义约束。

您会看到更多不同之处在于在代码中设置约束时。

例如，将子视图（红色）放在包含视图（蓝色）中，在所有四个边上都有 20 点的填充，如下所示：

您的代码可能如下所示：

    let myContainerView = UIView()
    myContainerView.translatesAutoresizingMaskIntoConstraints = false
    myContainerView.backgroundColor = .blue

    // add container view to self view
    view.addSubview(myContainerView)

    // constrain container view center X and Y, width and height both 240-pts
    NSLayoutConstraint.activate([

        myContainerView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0),
        myContainerView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0),
        myContainerView.widthAnchor.constraint(equalToConstant: 240.0),
        myContainerView.heightAnchor.constraint(equalToConstant: 240.0),

        ])

    let myInnerView = UIView()
    myInnerView.translatesAutoresizingMaskIntoConstraints = false
    myInnerView.backgroundColor = .red

    // add inner view to container view
    myContainerView.addSubview(myInnerView)

    // constrain inner view with 20-pts padding on all four sides
    NSLayoutConstraint.activate([

        // top and left are 20-pts from superview top and left
        myInnerView.topAnchor.constraint(equalTo:
            myContainerView.topAnchor, constant: 20.0),
        myInnerView.leadingAnchor.constraint(equalTo:
            myContainerView.leadingAnchor, constant: 20.0),

        // bottom and right are *minus* 20-pts from superview bottom and right
        myInnerView.bottomAnchor.constraint(equalTo:
            myContainerView.bottomAnchor, constant: -20.0),
        myInnerView.trailingAnchor.constraint(equalTo:
            myContainerView.trailingAnchor, constant: -20.0),

        ])

您会注意到内部视图的 trailing 和 bottom 约束必须为负，因为您希望它们与容器视图的尾边和底边相距 20 分。