How do I add fixed height views to vertical stack view?

Question

I have a vertical UIStackView and I am trying to add multiple views to the stack view all with a fixed height of 50.

I've set the alignment and distribution on the stack view to Fill for both in my xib.

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)

I expect the views to get added to the stack view with a fixed height of 50. Instead I get a view that has a height that fills the height of the stack view (the height is 200). I also get this in the console

[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)>

So it looks as if the constraint I added is being broken. I'm not sure which constraint I should remove to fix my problem.

Answer 1

You can try this one, it works for me. You have to take stack view height constraint

var numberOfButtonsYouWant = 10

@IBOutlet weak var stackViewHeightConstraint: NSLayoutConstraint!

If you don't want to repeat the buttons then you can remove all arranged subview of stack view before adding new one

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

Answer 2

You need a filler view at the bottom otherwise stackView will stretch the last view to fill the remaining space, look at this example:

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()