不同 UIStackView 的子視圖之間的等高約束

Question

我有一個約束場景，它在通過界面構建​​器構建時完美運行，但我無法通過代碼實現。 屏幕布局如下：

具有多個垂直UIStackView內聯的水平UIStackView 。 這些垂直UIStackView的每一個都有多個UIView 。 我想要實現的是以下內容：具有相同高度的內聯 UIView

通過界面構建​​器創建此類約束時，它可以完美運行：

但是當通過代碼創建這個約束時，我面臨以下錯誤：

'Unable to activate constraint with anchors <NSLayoutDimension:0x600002b9a6c0 "UIView:0x7f9e6f075c30.height"> and <NSLayoutDimension:0x600002b9a700 "UIView:0x7f9e6c423d50.height"> because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal.'

我嘗試使用以下方式創建這些約束：

1.

let heightConstraint = NSLayoutConstraint(item: view1,
                                          attribute: .height,
                                          relatedBy: .equal,
                                          toItem: view2,
                                          attribute: .height,
                                          multiplier: 1,
                                          constant: 0)
NSLayoutConstraint.activate([heightConstraint])

2.

let heightConstraint = NSLayoutConstraint(item: view1,
                                          attribute: .height,
                                          relatedBy: .equal,
                                          toItem: view2,
                                          attribute: .height,
                                          multiplier: 1,
                                          constant: 0)
horizontalStackView.addConstraint(heightConstraint)

其中horizontalStackView是包含所有垂直堆棧視圖的水平堆棧視圖。

我無法弄清楚在何處添加此約束以通過界面構建​​器工作以通過代碼創建它們。

Answer 1

以下是使用代碼獲取上述 UI 的方法，

1.使用相關的backgroundColors創建UIView's ，

    let v1 = UIView()
    v1.backgroundColor = #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1)
    v1.translatesAutoresizingMaskIntoConstraints = false

    let v2 = UIView()
    v2.backgroundColor = #colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)
    v2.translatesAutoresizingMaskIntoConstraints = false

    let v3 = UIView()
    v3.backgroundColor = #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)
    v3.translatesAutoresizingMaskIntoConstraints = false

    let v4 = UIView()
    v4.backgroundColor = #colorLiteral(red: 0.5058823824, green: 0.3372549117, blue: 0.06666667014, alpha: 1)
    v4.translatesAutoresizingMaskIntoConstraints = false

    let v5 = UIView()
    v5.backgroundColor = #colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)
    v5.translatesAutoresizingMaskIntoConstraints = false

    let v6 = UIView()
    v6.backgroundColor = #colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 1)
    v6.translatesAutoresizingMaskIntoConstraints = false

    let v7 = UIView()
    v7.backgroundColor = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
    v7.translatesAutoresizingMaskIntoConstraints = false

    let v8 = UIView()
    v8.backgroundColor = #colorLiteral(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1)
    v8.translatesAutoresizingMaskIntoConstraints = false

    let v9 = UIView()
    v9.backgroundColor = #colorLiteral(red: 0.06274510175, green: 0, blue: 0.1921568662, alpha: 1)
    v9.translatesAutoresizingMaskIntoConstraints = false

2.使用上面創建的UIViews創建horizontalStackViews UIViews 。 不要忘記將distribution設置為fillEqually

    let hStack1 = UIStackView(arrangedSubviews: [v1, v2, v3])
    hStack1.axis = .horizontal
    hStack1.distribution = .fillEqually
    hStack1.translatesAutoresizingMaskIntoConstraints = false

    let hStack2 = UIStackView(arrangedSubviews: [v4, v5, v6])
    hStack2.axis = .horizontal
    hStack2.distribution = .fillEqually
    hStack2.translatesAutoresizingMaskIntoConstraints = false

    let hStack3 = UIStackView(arrangedSubviews: [v7, v8, v9])
    hStack3.axis = .horizontal
    hStack3.distribution = .fillEqually
    hStack3.translatesAutoresizingMaskIntoConstraints = false

3.使用上面創建的horizontalStackViews創建verticalStackView並將其distribution設置為fillEqually

    let vStack = UIStackView(arrangedSubviews: [hStack1, hStack2, hStack3])
    vStack.axis = .vertical
    vStack.distribution = .fillEqually
    vStack.translatesAutoresizingMaskIntoConstraints = false

4.添加controller's view的vStack ，

    self.view.addSubview(vStack)

5.將以下constraints添加到vStack ，

    vStack.heightAnchor.constraint(equalToConstant: 200).isActive = true
    vStack.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    vStack.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    vStack.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

截屏：

Answer 2

你應該關注“因為他們沒有共同的祖先”部分。 問題可能與您的視圖未添加到同一個容器視圖有關。

我不知道你是如何創建視圖的，但在某個時候你需要做類似self.addSubview(yourView)事情，這可以解決你的問題。