-2

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

Daniel Patriarca
  • 361
  • 3
  • 20

2 Answers2

1

The first thing I'd check is whether stackView3 has its distribution set to be equalSpacing.

Next I'd double check the image constraint is how you described it to be, it's cut off in your image so we cant tell if it's correct. If it's using an inequality constant you could temporarily change it to use equality and see if that improves things.

If it's neitth of those, I'd suspect the stack view is adding its own constraint into one of the buttons since it thinks the layout is ambiguous. That is probably breaking the width constraint you set on the first button so the console output would contain a big log message that starts with

Unable to simultaneously satisfy constraints

You can look at that and see if there's any constraint in there that you don't expect that could be causing the issue. Or you can post it here.

Craig Siemens
  • 12,942
  • 1
  • 34
  • 51
  • I do have equal spacing on stack view 3 and there is a conflicting constraint that says it is causing it to break the button width constraint. That answers why its getting broken, but it has a list of constraints I didn't set there as the conflicting ones... specifically one that says "fitingSizeHTarget' that is saying .width == 0. I thought by setting my button size inside stackView3 it would drive the height of the stack view filling space equally for width, and then the vertical stack would stretch the elements without a height set... very confused why that isn't working. – Daniel Patriarca Jan 15 '22 at 01:00
1

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.

DonMag
  • 69,424
  • 5
  • 50
  • 86