14

So, I have a UIStackView that contains four (4) UIViews. If I remove one (1) of those UIViews, the other three (3) will fill the entire space in the UIStackView.

MY QUESTION:

How can I add a max height on a UIView so that it won't fill the entire space of the UIStackView even though the distribution is filled equally? I read something about adding a constraint but I'm not able to make it work. I'm using swift by the way.

Thank you.

Artem Stepanenko
  • 3,423
  • 6
  • 29
  • 51
Bnj
  • 143
  • 1
  • 11

4 Answers4

18

As a confirmation, this is the current behavior:

enter image description here

And this is required one:

enter image description here

You can follow this simple trick to achieve it:

P.S: I assume that you added the needed appropriate constraints for your stack view.

If your stack view doesn't have a "height" constraint, add one:

enter image description here

Now, add it as an IBOutlet to the assigned ViewController; In my example, I'm calling it stackHeight:

@IBOutlet weak var stackHeight: NSLayoutConstraint!

In the event that you want to hide the view (in my example, I'm hiding the orange button based on IBAction assigned to itself, when tapping on it, should be hidden), you need to get the height of the view that you want to hide and subtract from stackHeight.constant:

    @IBAction func orangeTapped(_ sender: AnyObject) {
        orange.isHidden = true
        
        // here we go:
        stackHeight.constant = stackHeight.constant - orange.frame.size.height
    }
Ahmad F
  • 30,560
  • 17
  • 97
  • 143
  • Your visual examples are exactly the problem I'm facing, Wow! Such a great idea Ahmad. I will try this trick and will keep you posted :) Thanks. – Bnj Oct 26 '16 at 23:31
  • 1
    glad to help, you can shoot a comment if needed. – Ahmad F Oct 27 '16 at 06:32
  • Hi, again Ahmad! I fixed the problem now. But I encounter another problem! So here is the scenario. I have a "ColumnContainerStackView" with "Column1StackView" and "Column2StackView" they're both have a 4 UIView inside of them. Once I removed 1 UIView in Column1 the Column 2 will follow the Column1 height. How can I avoid the Column2 not to follow Column1 height? Thanks. – Bnj Oct 28 '16 at 07:05
  • could you please explain it more? what I got is the same as the question... – Ahmad F Oct 28 '16 at 10:53
  • Hello Ahmad. I'm able to iterate the problem now. Thankyou so much :) – Bnj Oct 28 '16 at 23:06
5

Remove the constraint on the stack view's bottom edge. Then it will resize to just fit the visible controls.

phatmann
  • 18,161
  • 7
  • 61
  • 51
1

If you don't want to remove the bottom constraint, just set distribution as .fill and add a transparent UIView at the end of the stack.

This view will stretch while the others will keep stacked on top.

Allan
  • 308
  • 2
  • 7
0

Try changing the "Distribution" property in the Attributes inspector of the stack view to Equal spacing. It should work.

Or you can change it to fill equally to fill the remaining 3 views equally in the Stack view .

Ajil O.
  • 6,562
  • 5
  • 40
  • 72
  • @AhmadF Why not? I just tried that and it works fine for me! – Ajil O. Oct 26 '16 at 07:06
  • 1
    it keeps spaces between them, they are not sticking together, i.e spacing != 0, it distributes the width/height of the removed view as spaces between the other three views. – Ahmad F Oct 26 '16 at 07:14