How do I make a Swift UIStackView size dynamically based on content?

Question

I have added the following UIStackView to my ViewController. As the views change the values of textOneLabel and textTwoLabel change.

With the following code the initial StackView is centered and the portions filled proportionally. However with subsequent text combinations the bounds of the StackView don't change, leaving the content off center. How can I change the StackView properties so it will adapt to the content and always stay centered?

headerStackView.axis = .horizontal
headerStackView.distribution = .fillProportionally
headerStackView.spacing = 8
headerStackView.layer.borderWidth = 1
headerStackView.layer.borderColor = UIColor.red.cgColor
    
headerStackView.translatesAutoresizingMaskIntoConstraints = false
headerStackView.topAnchor.constraint(equalTo: timerHeader.topAnchor, constant: 4).isActive = true
headerStackView.centerXAnchor.constraint(equalTo: timerHeader.centerXAnchor).isActive = true
    
headerStackView.addArrangedSubview(textOneLabel)
headerStackView.addArrangedSubview(textTwoLabel)

It's not clear what you're going for... Do you want the space between the labels to remain centered? Or do you want the center of the stack view to remain centered? That is, do you want it to look like the Top or Bottom examples here: i.sstatic.net/3qilC.png — DonMag
– DonMag, Commented Oct 5, 2021 at 13:58
Excellent example. I am trying to do your third option, where the stackView is centered in the view but the content on the right is longer than the content on the left. As noted above the initial view displays correctly, but when the words change, the stackView does not adapt to the new content size. — forrest
– forrest, Commented Oct 5, 2021 at 16:00
Let's try this again... do you want the stackView FRAME to remain centered? Or, do you want the gap BETWEEN labels to remain centered? i.sstatic.net/AEM36.png ... or, do you want something else? If so, show us an image of how you want it to look. — DonMag
– DonMag, Commented Oct 5, 2021 at 16:39
The StackView should always be centered in the view even if the content of the left and the content of the right are different length. — forrest
– forrest, Commented Oct 5, 2021 at 17:14

DonMag · Accepted Answer · 2021-10-05 17:36:26Z

1

First, forget you ever heard of .fillProportionally...

it doesn't do what you think it does
you'll encounter very unexpected layout issues if your stack view has spacing greater than Zero
if your stack view has no width (neither width anchor nor leading/trailing anchors), .fillProportionally doesn't do anything

So, change your .distribution to .fill.

Add these lines to control what auto-layout does with your labels:

    textOneLabel.setContentHuggingPriority(.required, for: .horizontal)
    textOneLabel.setContentCompressionResistancePriority(.required, for: .horizontal)

    textTwoLabel.setContentHuggingPriority(.required, for: .horizontal)
    textTwoLabel.setContentCompressionResistancePriority(.required, for: .horizontal)

Now, your stackView FRAME will remain centered.

answered Oct 5, 2021 at 17:36

DonMag

78.7k5 gold badges64 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

forrest Over a year ago

Thank you DonMag.

Collectives™ on Stack Overflow

How do I make a Swift UIStackView size dynamically based on content?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related