swift - 根据最大的 subview 使用自动布局调整 super View 的大小

Question

如果我们有具有动态高度的内部 NSView 列，使用自动布局调整 super View 大小的最佳做法是什么？

例如。如果我们有两列布局，其中左列高度大于右列，父 View 高度应与右列高度相同。那么，如果我们将右列高度更改为大于左列高度，则 super View 高度应更改为右列高度。如何实现？

我做了示例项目来测试这个:

1. 最初我们有两列的布局，其中 .Bottom 左侧 NSView 的约束附加到父 View 的底部。

1. 如果我们按下 Make Right Bigger 按钮，我会使右侧 NSView 的高度大于左侧的高度。

所以我希望这里的 superview 根据更大的列(右列)改变高度。这样做有什么好的做法吗？

代码:

import Cocoa

class ViewController: NSViewController {

    let leftView = NSView()
    let rightView = NSView()
    let button = NSButton()

    var rightViewHeightConstraint: NSLayoutConstraint?

    override func loadView() {
        self.view = TestView()
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        leftView.backgroundColor = NSColor.redColor()
        rightView.backgroundColor = NSColor.orangeColor()

        layoutLeft(view, insertView: leftView)
        layoutRight(view, insertView: rightView)

        button.title = "Make Right Bigger"
        button.target = self
        button.action = "makeBigger:"
        ViewControllerLayout.layoutBotton(view, insertView: button, bottom: -20)
    }

    func makeBigger(sender: AnyObject) {
        rightViewHeightConstraint?.animator().constant = 150.0
    }

    func layoutLeft(containerView: NSView, insertView: NSView) {
        insertView.translatesAutoresizingMaskIntoConstraints = false

        containerView.addSubview(insertView)

        let c1 = NSLayoutConstraint(item: insertView, attribute: .Left, relatedBy: .Equal, toItem: containerView, attribute: .Left, multiplier: 1.0, constant: 0.0)
        let c2 = NSLayoutConstraint(item: insertView, attribute: .Width, relatedBy: .Equal, toItem: containerView, attribute: .Width, multiplier: 0.5, constant: 0.0)
        let c3 = NSLayoutConstraint(item: insertView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 100.0)
        let c4 = NSLayoutConstraint(item: insertView, attribute: .Top, relatedBy: .Equal, toItem: containerView, attribute: .Top, multiplier: 1.0, constant: 0.0)
        let c5 = NSLayoutConstraint(item: insertView, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1.0, constant: -60.0)

        containerView.addConstraint(c1)
        containerView.addConstraint(c2)
        containerView.addConstraint(c3)
        containerView.addConstraint(c4)
        containerView.addConstraint(c5)
    }

    func layoutRight(containerView: NSView, insertView: NSView) {
        insertView.translatesAutoresizingMaskIntoConstraints = false

        containerView.addSubview(insertView)

        let c1 = NSLayoutConstraint(item: insertView, attribute: .Right, relatedBy: .Equal, toItem: containerView, attribute: .Right, multiplier: 1.0, constant: 0.0)
        let c2 = NSLayoutConstraint(item: insertView, attribute: .Width, relatedBy: .Equal, toItem: containerView, attribute: .Width, multiplier: 0.5, constant: 0.0)
        let c3 = NSLayoutConstraint(item: insertView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 50.0)
        let c4 = NSLayoutConstraint(item: insertView, attribute: .Top, relatedBy: .Equal, toItem: containerView, attribute: .Top, multiplier: 1.0, constant: 0.0)
        let c5 = NSLayoutConstraint(item: insertView, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1.0, constant: -60.0)

        containerView.addConstraint(c1)
        containerView.addConstraint(c2)
        containerView.addConstraint(c3)
        containerView.addConstraint(c4)
        // containerView.addConstraint(c5) // Cant add .Bottom constraint here, because of different column sizes.

        rightViewHeightConstraint = c3
    }
}

struct ViewControllerLayout {

    static func layoutBotton(containerView: NSView, insertView: NSView, bottom: Double) {
        insertView.translatesAutoresizingMaskIntoConstraints = false

        containerView.addSubview(insertView)

        containerView.addConstraint(NSLayoutConstraint(item: insertView, attribute: .CenterX, relatedBy: .Equal, toItem: containerView, attribute: .CenterX, multiplier: 1.0, constant: 0.0))
        containerView.addConstraint(NSLayoutConstraint(item: insertView, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1.0, constant: CGFloat(bottom)))
    }
}

下载测试项目:GitHub

Answer 1

设法仅在约束条件下完成此任务。刚刚添加了列的容器 View ，并将其高度设置为 GreaterThanOrEqual 到左列和右列。

view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Height, relatedBy: .GreaterThanOrEqual, toItem: leftView, attribute: .Height, multiplier: 1, constant: 0))
view.addConstraint(NSLayoutConstraint(item: containerView, attribute: .Height, relatedBy: .GreaterThanOrEqual, toItem: rightView, attribute: .Height, multiplier: 1, constant: 0))