How to shrink font size to fit in the stackview but remain the same fontsizes in the whole stackview?a

Question

How can I shrink the font size to fit in a stackview of 3 items? It's important to note that the font-sizes should be the same across all views in the Stackview.

Please have a look at the issue below. The My Orders tab has a smaller font than the rest of the Stackview.

What would I like to achieve?

Spread all items evenly in the Stackview with the same fontsizes.

What did I already tried?

Setting the following properties on the labels.

label.adjustsFontSizeToFitWidth = true
label.minimumScaleFactor=0.75

Setting the following properties on the Stackview.

 stackView.axis = .horizontal
    stackView.distribution = .equalSpacing
    stackView.alignment = .center
    stackView.spacing = 16.0

Thanks for any advise.

Answer 1

did you try using fillEqually instead? that should give you equal size for both items.

Answer 2

The way I solved this was to calculate what the percentage of the total width of the stack view each item should take based on the number of characters in the label and using that information to set a width constraint on the labels. Something like this:

let totalCount = labels(into: 0) { $0 += $1.text.count }
labels.forEach { label in
    let widthRatio = CGFloat(label.text.count) / CGFloat(totalCount)
    label.widthAnchor.constraint(equalTo: label.superview!.widthAnchor, multiplier: widthRatio).isActive = true
}