Center Vertically Three UILabels inside UIStackView

Question

I have three UILabels inside an UIStackView . One of them has multiline (last one) and others has only one line. I want them to be centered inside UIStackView so that top and bottom spaces can be dynamic. What am I doing wrong?

headingLabel.translatesAutoresizingMaskIntoConstraints = false
headingLabel.textAlignment = .center
subHeadingLabel.translatesAutoresizingMaskIntoConstraints = false
subHeadingLabel.textAlignment = .center
subHeadingLabel.numberOfLines = 0
bodyLabel.translatesAutoresizingMaskIntoConstraints = false
bodyLabel.textAlignment = .center
bodyLabel.numberOfLines = 0
bodyLabel.text = "My very very long text \n to make it multiline"
textStackView.axis = .vertical
textStackView.distribution = .fillProportionally
textStackView.alignment = .center
textStackView.translatesAutoresizingMaskIntoConstraints = false

textStackView.addArrangedSubview(headingLabel)
textStackView.addArrangedSubview(subHeadingLabel)
textStackView.addArrangedSubview(bodyLabel)

How It is seen now:

How It Should be:

EDIT: I also try to do with fillEqually, but It doesn't change anything. I also set top and bottom anchors of UIStackView. What I want to achieve in here is that for example UIStackView has a height of 100 and all three labels has height of 40. That 60 more space should be equally distributed like 30 - 30 on to and bottom.

Constraints of the UIStackView

myStackView.anchor(contentImageView.bottomAnchor, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)

One Solution: I solve it by putting UIStackView inside an UIView and doesn't give height to UIStackView. Just center X and Y anchors. It solve my problem but I'm not sure If It is a proper solution.

Answer 1

Make sure the UIStackView bottom constraint should be greater than equal to zero from UIViewController 's view. So that, the UIStackView height will be increased based on the content inside it.

Try this.

let myStackView = UIStackView()
view.addSubview(myStackView)
myStackView.translatesAutoresizingMaskIntoConstraints = false
myStackView.topAnchor.constraint(greaterThanOrEqualTo: view.topAnchor, constant: 0.0).isActive = true
myStackView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0.0).isActive = true
myStackView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0.0).isActive = true
myStackView.bottomAnchor.constraint(greaterThanOrEqualTo: view.bottomAnchor, constant: 0.0).isActive = true
myStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0).isActive = true
myStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0).isActive = true

Answer 2

What I want to achieve in here is that for example UIStackView has a height of 100 and all three labels has height of 40. That 60 more space should be equally distributed like 30 - 30 on to and bottom.

That is not how a stack view works. If you want three labels with a height of 40 centered then just do that, with no need for a stack view. Or set the stack view height to 40 and center it.