Search code examples
iosswiftautolayoutuistackview

What constraints/stack view settings are recommended when stacking label, image, text, buttons, and collection view

I am trying to use a vertical stack view (Stack View 1) to fill an entire screen where the elements in the stack are a horizontal stack view with 2 labels (Stack View2), an image view, a text View, a horizontal stack view with buttons to add content (Stack View3), and then a collection view to view the files uploaded. In xCode preview, everything looks right. I set constraints that the Stack View 1 be set to the safe area at the top and to the view area for left right and bottom, I set Stack View2 to be 20 in height so my text wouldn't clip, I set up constraints that the buttons in Stack View3 all be 40 by 40, and I set up constraints that the image view never bee more than 33% of the size of the view.

On Preview everything looks good... Preview in xCode

But then when I load it up on simulator everything is all over the place... My expectation was that the I would always get 33% of screen for image and then after the 40+20 for the stack views the text view and collection view would fill out the rest of the space.

Can anyone provide any hints as to which constraints I missed or what settings on the stack view I may have incorrect? I know its hard to help with constraints on a board like this. But any hint for something I may be missing would be greatly appreciated. The main thing I am perplexed by is why stack view3 didn't fill the 40x40 buttons correctly.

on preview looks good

Solution

  • Neither UITextView nor UICollectionView have intrinsic heights - so the stack view doesn't know what to do with their sizes.

    Most of what you have looks correct, but you need a couple changes.

    First, you want your image view to be 33% or less of the view height? If so, don't constrain the height of the image view to the height of view... constrain it to the OuterStackView.

    Second, constrain the Height of the collection view equal to the Height of the text view.

    Now, you'll have:

    • outer stack view constrained Top and Bottom (so, full height... and make sure you constrain to the safe-area)
    • top labels stack view Height: 40
    • image view 33% of the height of the outer stack view
    • buttons stack view Height: 40 (because the buttons are all Height: 40
    • text view and collection view will "split" the rest of the vertical space, because they have equal heights to each other.

    Here's how it looks in Storyboard:

    enter image description here

    Notes:

    StackView1 (the "Outer" stack view) is set to:

    Alignment: Fill
Distribution: Fill
Spacing: 8

    StackView2 (the labels stack view) is set to:

    Alignment: Fill
Distribution: Fill
Spacing: 8

    You'll want to set the labels' Hugging and Compression Resistance priorities to your liking.

    StackView3 (the buttons stack view) is set to:

    Alignment: Fill
Distribution: Equal Spacing
Spacing: 0

    That should do it.