Why is my UIStackView's fill proportionally distribution property not working as expected?

122 Views Asked by At

I have two buttons in a vertical stack view with the exact same title, font and font size. They should thus have the same intrinsic size along the vertical direction and UIStackView.Distribution.fillProportionally should give them both the same height but when I check their respective frames in the size inspector one button's height is larger than the other's, why? UIStackView.Distribution.fillProportionally One buttons height is 94 while the other's is 86. Fill equally works as expected however.enter image description here enter image description here

I printed the frames' heights and they come out the same as in the storyboard 94 and 86 which don't match.

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    print("button 1 height: \(button1.frame.height)")
    print("button 2 height: \(button2.frame.height)")
  }

Terminal output

button 1 height: 94.0
button 2 height: 86.0
button 1 height: 94.0
button 2 height: 86.0

Code to reproduce the situation

import UIKit

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    
    var buttonOne = UIButton()
    
    buttonOne.titleLabel?.font = UIFont(name: "Marker Felt Wide", size: 17.0)
      buttonOne.backgroundColor = .red
    buttonOne.setTitle("Pirate Handbook", for: [])
    var buttonTwo = UIButton()
    
    buttonTwo.titleLabel?.font = UIFont(name: "Marker Felt Wide", size: 17.0)
      buttonTwo.backgroundColor = .blue
    
    buttonTwo.setTitle("Pirate Handbook", for: [])
    
    buttonTwo.translatesAutoresizingMaskIntoConstraints = false
    buttonOne.translatesAutoresizingMaskIntoConstraints = false
    var stackView = UIStackView()
    stackView.axis = .vertical
    
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.distribution = .fillProportionally
    stackView.alignment = .fill
    
    
    stackView.addArrangedSubview(buttonTwo)
    stackView.addArrangedSubview(buttonOne)
    stackView.backgroundColor = .green
    
    view.addSubview(stackView)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.distribution = .fillProportionally
    stackView.alignment = .fill
    stackView.spacing = 8
    
    NSLayoutConstraint.activate([
        stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 110),
        stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 23),
        stackView.widthAnchor.constraint(equalToConstant: 154),
        stackView.heightAnchor.constraint(equalToConstant: 188)
    ])
    
    
  }

  override func viewDidLayoutSubviews() {
    var views = view.subviews.first?.subviews
    views?.forEach{
      print($0.frame.height)
    }
  }

}

Terminal output when I created the views in code as opposed to storyboard

> height 0.0 
> height 0.0
> height 84.33333333333333
> height 95.66666666666667

I am using a standard spacing of 8.0 points both in the storyboard and in the code. When I make the spacing in the stack view 0 points it works as expected with both buttons having an equal height of 94.0

0

There are 0 best solutions below