2 UIButton with dynamic text and font size

Question

I am using 2 UIButton in same y position. The one on the left is shorter in text than the one on the right:

I am adding

button.titleLabel?.adjustsFontSizeToFitWidth = true
button.titleLabel?.minimumScaleFactor = 0.5

for each button. The problem is that one button font size get smaller than the other. For example, they are both with font size 18, one might get 12 and the other will stay 18. I want them both to be 15 (the larger possible keeping both texts visible)

The text inserted to the buttons changes so i can't use aspect ratio.
Also, i don't want to use the font of the button with the smaller text because the difference is sometimes to high.

user_5575955 · Answer

You can do it programmatically with stack view, declare your buttons under your controller class:

let myButton: UIButton = {
    let b = UIButton()
    b.backgroundColor = .white
    b.setTitle("Short button", for: .normal)
    b.setTitleColor(.black, for: .normal)
    b.titleLabel?.font = .systemFont(ofSize: 17, weight: .regular)
    b.layer.cornerRadius = 12
    b.clipsToBounds = true
    b.titleLabel?.adjustsFontSizeToFitWidth = true
    b.titleLabel?.minimumScaleFactor = 0.5
    b.translatesAutoresizingMaskIntoConstraints = false

    return b
}()

let myButton2: UIButton = {
    let b = UIButton()
    b.backgroundColor = .white
    b.setTitle("Much Much Much longer button", for: .normal)
    b.setTitleColor(.black, for: .normal)
    b.titleLabel?.font = .systemFont(ofSize: 17, weight: .regular)
    b.layer.cornerRadius = 12
    b.clipsToBounds = true
    b.titleLabel?.adjustsFontSizeToFitWidth = true
    b.titleLabel?.minimumScaleFactor = 0.5
    b.translatesAutoresizingMaskIntoConstraints = false

    return b
}()

Now in viewDidLoad set stackView and constraints (I set 6 for space, but you can set your prefer space, look at the comment to do it):

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .darkGray
    
    let stackView = UIStackView(arrangedSubviews: [myButton, myButton2])
    stackView.distribution = .fillProportionally
    stackView.spacing = 6 // change space betwenn buttons
    stackView.translatesAutoresizingMaskIntoConstraints = false
    
    view.addSubview(stackView)
    stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
    stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
    stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
    stackView.heightAnchor.constraint(equalToConstant: 50).isActive = true
}

This is the result shortButton/shortButton and shortButton/longerButton, the width of the buttons changes dynamically according to the text:

2 UIButton with dynamic text and font size

1 Answers