0

我正在使用 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 点的填充，即本例中的蓝色按钮。它们都在视图中垂直居中，我不知道它们的大小，直到我在实例化视图时动态设置图像。

长方形

4

2 回答 2

1

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

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

图片

于 2017-08-16T21:42:39.560 回答
1

您可以像这样混合使用容器视图和堆栈视图：

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类只是设置圆角半径以使其成为圆形按钮。

结果： 结果

于 2017-08-16T22:32:09.263 回答