UIStackview fill proportionally in a UITableviewCell takes incorrect frame

Question

Adding proportional fill setting in a UIStackview won't let the view stretch properly. Is this the expected behaviour?

Answer 1

Fill proportionally' distribution type works with intrinsic content size.

So if our vertical stack(height say 600) view has 2 views, ViewA (intrinsic content height 200) and ViewB(intrinsic content height 100), the stack view will size them to ViewA(height 400) and ViewB(height 200).

Here in IB what you see is not what you get. Dragging to make frames change is useless. Just run the app.

You will see the expected behaviour only when the child views somehow get the intrinsic/constrained height.

How it looks in IB Here the top stack view has views constrained to be of height minimum 10 and 30, i.e. ration 1:4.

What we really get Top stack view is what we had expected to look like. View with height in ratio 1:4. And bottom one with ratio 1:1, not expected.

Answer 2

You can fix this by creating a custom view

class CustomHeightView: UIView {
   var height = 1.0

  override public var intrinsicContentSize: CGSize {
    return CGSize(width: 0.0, height: height)
  }
}

Change the class of your UIView to CustomHeightView

So in the Controller create an outlet for the UIViews

@IBOutlet weak var header_one: CustomHeightView!
@IBOutlet weak var header_two: CustomHeightView!

Then in your viewDidLoad set the proportion the way you want it

override func viewDidLoad() {
    super.viewDidLoad()

    header_one.height = 1.8
    header_two.height = 1.2
}