Set multiple UIButton's font size to be equal when using fit to width

Question

I have 2 UIButtons in a view controller that have a certain fixed width. Because the app needs to support multiple languages, I need to be able to adjust their font size so the text will always fit in that fixed width.

However, when I use: button.titleLabel?.adjustsFontSizeToFitWidth = true , one button's font size will be larger than the other.

Thus, I need both font sizes to be at their minimum font size, based on the fit to width.

I found this question but was unable to convert it to Swift: Adjust the font size to fit for several UIButton's so that they all have the same font size

I tried:

func customizeFontSize() {
        button1.setTitle("text 1", for: .normal)
        button2.setTitle("text 2", for: .normal)
        let minFont1: Float = self.idealFontSize(for: button1)
        let minFont2: Float = self.idealFontSize(for: button2)
        let fontSize: Float = min(minFont1, minFont2)
        let tailoredFont = button1.titleLabel!.font.withSize(CGFloat(fontSize))
        self.button1.titleLabel!.font = tailoredFont
        self.button2.titleLabel!.font = tailoredFont
    }

    func idealFontSize(for button: UIButton) -> Float {
        let label = button.titleLabel!
        let temp: Float = 10.0
        let width: Float = Float(button.bounds.size.width) - temp
        assert(button.bounds.size.width >= label.bounds.size.width)
        let actualFontSize: CGFloat

        //unavailable in swift
        label.text!.size(with: label.font, minFontSize: label.minimumFontSize, actualFontSize: actualFontSize, forWidth: width, lineBreakMode: label.lineBreakMode)
        debug("idealFontSizeForButton %f", actualFontSize)

        return Float(actualFontSize)
    }

Any help would be immensely appreciated!

Answer 1

Just had the same problem. Figured out that much better approach is to put buttons in UIStackView and set its distribution mode to proportional. That way if there's not enough space to fit full-size content, each element will be sized down proportionally.

Example code:

let stackview = UIStackView(arrangedSubviews: [leftButton, rightButton])
stackview.translatesAutoresizingMaskIntoConstraints = false
stackview.spacing = 16
stackview.axis = .horizontal
stackview.distribution = .fillProportionally
stackview.alignment = .center
addSubview(stackview)
stackview.widthAnchor.constraint(lessThanOrEqualToConstant: 
UIScreen.main.bounds.width - 80).isActive = true

The code above misses 2 things:

1. Layout constraints that would set stackview's position on x and y axis
2. Proper width anchor - that should be set on layoutSubviews or be driven by some other autolayout constraint

Hope this helps!

Answer 2

A possible solution is to compare both font sizes and use the smaller one. Untested example:

In viewDidLoad

//let button1 = UIButton()
//var button2 = UIButton()

button1.titleLabel?.adjustsFontSizeToFitWidth = true
button2.titleLabel?.adjustsFontSizeToFitWidth = true

In viewDidAppear:

let size1: CGFloat = (button1.titleLabel?.font.pointSize)!
let size2: CGFloat = (button2.titleLabel?.font.pointSize)!

if size1.isLess(than: size2) {
    button2.titleLabel?.font = button1.titleLabel?.font
} else if size2.isLess(than: size1) {
    button1.titleLabel?.font = button2.titleLabel?.font
}