1
  stackView
+------------+                +
|  topView   | height: 50     |
+------------+                |
|            |                |
|            |                | total height: 300
| bottomView | height: 250    |
|            |                |
|            |                |
+------------+                +

I would like to layout two views (topView and bottomView) in a UIStackView (stackView) with these conditions:

  • stackView has a height (let’s say 300)
  • topView’s and bottomView’s intrinsic content height is the same (let’s say 50)
  • topView’s should be rendered with its intrinsic content height (up to stackView’s height) (so 50)
  • bottomView should take the remaining space (so 250)
  • if topView’s intrinsic content height changes (let’s say to 100) the distribution should be 100/200

None of the distribution modes of UIStackView can cover this.

Setting a constraint with a constant wouldn’t help here, as the intrinsic content height of topView might change.

So I need some Auto Layout features here. I tried setting different content compression resistance priorities and content hugging priorities. Without success, I still feel like they could be a solution (if I knew how to use them correctly).

It doesn’t seem like a complex problem, I can’t find the right Auto Layout API for this. Any hints?

MichaelGillen
  • 33
  • 3

1 Answers1

2

You should set:

  • vertical content hugging priority of top view to be more than bottom view
  • alignment of stack view to fill
  • distribution of stack view to fill

You should add a width constraint as well, if the top and bottom views do not have intrinsic width.

Demo:

enter image description here enter image description here

Sweeper
  • 213,210
  • 22
  • 193
  • 313
  • Thx! My `stackView` has a variable height though. No way to do it with a variable stack view height? – MichaelGillen Apr 01 '21 at 10:22
  • It itself is contained in a variable height container (which can be resized by the user). – MichaelGillen Apr 01 '21 at 10:29
  • @MichaelGillen Well, whether the height is dynamic or constant doesn't really matter in the context of this question, as long as it is not ambiguous. The bolded part is the key. – Sweeper Apr 01 '21 at 10:32
  • If the container can be resized arbitrarily, you probably want to decide what happens when the stack view's width/height is not enough to contain its contents. Then set content compression resistance priority of the two views correspondingly, but that's another question. – Sweeper Apr 01 '21 at 10:36
  • @MichaelGillen So did setting the content hugging priority work? – Sweeper Apr 01 '21 at 11:07
  • The content hugging priority did not work. I guess then there is something in my layout that prevents this from working. Will have to investigate later. – MichaelGillen Apr 01 '21 at 11:33
  • @MichaelGillen I see. Try making a [mcve]. – Sweeper Apr 01 '21 at 11:34
  • Thx. I’ll accept your anwer as I assume the problem lies somewhere on my side ;) – MichaelGillen Apr 01 '21 at 11:35
  • @MichaelGillen - this answer is what you need. If you're not getting the same result, you may find it helpful to use 2 custom labels that allow you to specify the intrinsic height. Try it with this class: https://gist.github.com/DonMag/b0d839f5a4cffe4909a57541c9ee39d4 ... you will be able to set the `h` property for a specific intrinsic height, and the label will set its text to `IH: nnn` - the Intrinsic Height - and `AH: nnn` - the Actual Height. – DonMag Apr 01 '21 at 15:29