Swift PureLayout：在最高垂直居中的子视图上方和下方添加x点填充

Question

我正在使用PureLayout框架，并在Swift中编写UIView。

我有一个观点，它包含四个按钮， 并不都是相同的高度。

我添加了约束以使这些按钮等距分布，并在视图中将它们垂直居中，并在最后在按钮的两侧添加了填充。 但是，我不确定如何设置视图的高度/顶部约束，以使其与最高按钮的顶部之间的距离为8.0点。 我可以将约束添加到每个按钮的顶部和底部，以使它们都距视图边缘> = 8.0像素，但这意味着视图可以垂直拉伸，同时仍保持这些约束。 在运行之前，我不知道其中哪个按钮最高。

我能想到的唯一选择是事先遍历按钮并找到要存储在变量中的最高值，并在进行约束时使用该选项，但我想知道是否有一种方法可以更简单地通过PureLayout进行此操作，无需遍历所有这些对象。 我是否缺少一种方法，说“可以在满足其余约束的同时使此值尽可能小”，而该方法可以应用于视图的高度？

let topOffset = CGFloat(8.0)
let bottomOffset = CGFloat(8.0)
button1.autoConstrainAttribute(.top, to: .top, of: self, withOffset: topOffset, relation: NSLayoutRelation.self.autoConstrainAttribute(.bottom, to: .bottom, of: button1, withOffset: topOffset, relation: NSLayoutRelation.greaterThanOrEqual)
button2.autoConstrainAttribute(.top, to: .top, of: self, withOffset: topOffset, relation: NSLayoutRelation.self.autoConstrainAttribute(.bottom, to: .bottom, of: button2, withOffset: topOffset, relation: NSLayoutRelation.greaterThanOrEqual)
button3.autoConstrainAttribute(.top, to: .top, of: self, withOffset: topOffset, relation: NSLayoutRelation.self.autoConstrainAttribute(.bottom, to: .bottom, of: button3, withOffset: topOffset, relation: NSLayoutRelation.greaterThanOrEqual)
button4.autoConstrainAttribute(.top, to: .top, of: self, withOffset: topOffset, relation: NSLayoutRelation.self.autoConstrainAttribute(.bottom, to: .bottom, of: button4, withOffset: topOffset, relation: NSLayoutRelation.greaterThanOrEqual)
//MISSING: Somehow make self's height as small as possible

我为您的草率表示歉意，但这是我要达到的目标的图像。 忽略水平间距。 矩形是视图，圆圈是按钮，大小各不相同。 视图需要在这些按钮的最高按钮上方/下方有8.0个填充点，在这种情况下为蓝色按钮。 它们全部在视图中垂直居中，在实例化视图时动态设置图像之前，我不知道它们的大小。

Answer 1

据我了解，这就是您要实现的目标，对吗？

为此，您可以使用间距相等的UIStackView作为容器，并将所有按钮作为子项添加到其中。 堆栈视图将自动假定最高按钮的高度，并且您可以从顶部隔开8像素。

Answer 2

您可以混合使用容器视图和堆栈视图，如下所示：

override func viewDidLoad() {
    super.viewDidLoad()

    let container = UIView()
    container.translatesAutoresizingMaskIntoConstraints = false

    container.backgroundColor = .lightGray

    view.addSubview(container)
    container.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    container.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

    let stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false

    stackView.axis = .horizontal
    stackView.alignment = .center
    stackView.distribution = .fillProportionally
    stackView.spacing = 8

    container.addSubview(stackView)
    stackView.topAnchor.constraint(equalTo: container.topAnchor, constant: 8).isActive = true
    stackView.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 8).isActive = true
    container.bottomAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 8).isActive = true
    container.trailingAnchor.constraint(equalTo: stackView.trailingAnchor, constant: 8).isActive = true

    let buttonHeights: [CGFloat] = [30, 50, 40, 60]

    for (i, buttonHeight) in buttonHeights.enumerated() {
        let button = RoundButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false

        button.backgroundColor = .darkGray
        button.setTitle("\(i)", for: .normal)
        button.setTitleColor(.white, for: .normal)

        stackView.addArrangedSubview(button)
        button.heightAnchor.constraint(equalToConstant: buttonHeight).isActive = true
        button.widthAnchor.constraint(equalTo: button.heightAnchor).isActive = true
    }
}

注意：我的自定义RoundButton类仅将拐角半径设置为一个圆形按钮。

结果：