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

Question

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

我有一个视图，其中包含四个不的高度相同的按钮。

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

我能想到的唯一选择是手动迭代我的按钮并找到最高的存储在变量中，并在制定约束时使用它，但我想知道是否有这样做的方法PureLayout更简单，无需遍历所有这些对象。是否有一种方法我没有注意到类似于＆＃34;使这个值尽可能小，同时满足其他约束条件＆＃34;我可以应用于视图的高度，而不是？

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

我为这种邋iness道歉，但这是我瞄准的目标形象。忽略水平间距。矩形是视图，圆圈是按钮，大小不一。视图需要在这些按钮的最高/最低上方/下方具有8.0点填充，即在这种情况下为蓝色。它们都在视图中垂直居中，我不知道它们的大小，直到我在实例化视图时动态设置图像。

Answer 1

我能理解的是，这是你想要实现的目标，对吧？

要实现此目的，您可以使用具有相等间距的UIStackView作为容器，并将所有按钮作为子项添加到其中。堆栈视图将自动呈现最高按钮的高度，并且您可以从顶部空出8px。

Answer 2

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

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课程只是将角半径设置为圆形按钮。

<强>结果：