如何将固定高度视图添加到垂直堆栈视图?

时间:2019-06-20 12:20:30

标签: ios swift uibutton uistackview

我有一个垂直的UIStackView,我试图将多个视图都以固定高度50固定添加到堆栈视图中。

在xib中,我已将堆栈视图上的对齐方式和分布设置为Fill。

let button = UIButton()
                    button.setTitle(card.title, for: .normal)
                    button.layer.cornerRadius = 10
                    button.layer.backgroundColor = UIColor.red.cgColor

                    let damageCardConstraint = button.heightAnchor.constraint(equalToConstant: 50)
                    damageCardConstraint.isActive = true

//                        let label = UILabel()
//                        label.text = $0.title
                    self?.damageCardView.addArrangedSubview(button)

我希望视图以固定的高度50添加到堆栈视图。相反,我得到的视图的高度可以填充堆栈视图的高度(高度为200)。我也在控制台中得到了

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600002288140 UIStackView:0x7f894df03c50.height == 400   (active)>",
    "<NSLayoutConstraint:0x60000228b0c0 UIButton:0x7f894dd0ed90'Wounded Pilot'.height == 50   (active)>",
    "<NSLayoutConstraint:0x60000228b070 'UISV-canvas-connection' UIStackView:0x7f894df03c50.top == UIButton:0x7f894dd0ed90'Wounded Pilot'.top   (active)>",
    "<NSLayoutConstraint:0x60000228b570 'UISV-canvas-connection' V:[UIButton:0x7f894dd0ed90'Wounded Pilot']-(0)-|   (active, names: '|':UIStackView:0x7f894df03c50 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x60000228b0c0 UIButton:0x7f894dd0ed90'Wounded Pilot'.height == 50   (active)>

所以看来我添加的约束已被破坏。我不确定应该删除哪个约束来解决我的问题。

2 个答案:

答案 0 :(得分:0)

您可以尝试这个,它对我有用。 您必须采用堆栈视图高度限制

var numberOfButtonsYouWant = 10

@IBOutlet weak var stackViewHeightConstraint: NSLayoutConstraint!

如果您不想重复按钮,则可以在添加新视图之前删除所有已排列的堆栈视图子视图。

stackViewHeightConstraint.constant = CGFloat(numberOfButtonsYouWant) * button.frame.size.height
damageCardConstraint.translatesAutoresizingMaskIntoConstraints = false
damageCardConstraint.addArrangedSubview(button)

答案 1 :(得分:0)

您需要在底部添加一个填充视图,否则stackView将拉伸最后一个视图以填充剩余空间,请看以下示例:

import UIKit
import PlaygroundSupport

class VC: UIViewController {

    override func loadView() {
        let views = [UIColor.red, .blue, .green]
            .map(viewWith)
        views.forEach {
            $0.heightAnchor.constraint(equalToConstant: 50).isActive = true
        }
        let filler = UIView()
        filler.backgroundColor = .white
        let stackView = UIStackView(arrangedSubviews: views + [filler])
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.alignment = .fill
        view = stackView
    }

    func viewWith(color: UIColor) -> UIView {
        let view = UIView()
        view.backgroundColor = color
        return view
    }
}

PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = VC()