以编程方式使用约束排列按钮

Question

我有一系列按钮，我正在迭代并将按钮添加到视图上。 每个按钮应该与前一个按钮相邻，所以我将前导约束设置为前一个按钮的尾随。 但按钮最终分层叠放在一起，只显示顶部的按钮。

for k in 0 ..< buttons.count {

    view.addSubview(buttons[k])

    if k > 0 {
        buttons[k].leadingAnchor.constraint(equalTo: buttons[k-1].trailingAnchor).isActive = true
    }
}

---

编辑：

我不知道这是否是问题的一部分，但这就是我如何创建按钮。 我将每个设置为（0,0）因为我不知道他们最终会在哪里。 我假设约束会根据需要重新定位它们（​​第一次使用程序化约束）。

let size = CGRect(x: 0, y: 0, width: buttonWidth, height: buttonHeight)
let button: UIButton = UIButton(frame: size)

Answer 1

这是一个与UIStackView一起使用的简单游乐场。 你可以玩一点，适应你的目标。

如果您想避免手动创建约束， UIStackView是非常灵活的组件。

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class MyViewController: UIViewController {

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        let buttons = createButtons()
        let stackView = createStackView(with: UILayoutConstraintAxis.vertical)

        buttons.forEach { button in
            stackView.addArrangedSubview(button)
        }

        view.addSubview(stackView)

        stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        self.view = view
    }

    func createStackView(with layout: UILayoutConstraintAxis) -> UIStackView {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = layout
        stackView.distribution = .equalSpacing
        stackView.spacing = 0
        return stackView
    }

    func createButtons() -> [UIButton] {
        var buttons = [UIButton]()
        for x in 0..<5 {
            let button = UIButton(type: .custom)
            button.backgroundColor = .red
            button.translatesAutoresizingMaskIntoConstraints = false
            button.widthAnchor.constraint(equalToConstant: 50).isActive = true
            button.heightAnchor.constraint(equalToConstant: 100).isActive = true
            button.setTitle("Title \(x)", for: .normal)
            buttons.append(button)
        }
        return buttons
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Answer 2

关键问题是你应该使用isActive来激活约束。
以下是示例

var buttons: [UIButton] = []
for index in 0...5 {
    let button = UIButton(frame: .zero)
    button.setTitleColor(.black, for: .normal)
    button.setTitle("button \(index)", for: .normal)
    button.layer.borderColor = UIColor.gray.cgColor
    button.layer.borderWidth = 1.0
    button.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(button)
    buttons.append(button)
}

for index in 0...5 {
    let button = buttons[index]
    if index == 0 {
        button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 8.0).isActive = true
        button.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 20.0).isActive = true
    } else {
        let preButton = buttons[index - 1]
        button.leadingAnchor.constraint(equalTo: preButton.trailingAnchor, constant: 8.0).isActive = true
        button.topAnchor.constraint(equalTo: preButton.topAnchor, constant: 0.0).isActive = true
    }
}