Problems with UIStackView constraints

Question

I have a horizontal stack view, with an empty UIView on the left side and a label on the right side. In storyboard builder, it looks perfect (just look at the green row):

However when I run the app on Sim or device, the color view just collapses and disappears:

I have the stack view set to center alignment and proportional distribution.

If I give the color view a set width, it works well in Sim/device, however I get a warning in the interface builder, which annoys me. I assume there's a more correct way, but I don't know what that is. With set width warning:

It only allows me to delete the width=50 (the one I entered). It won't allow me to remove width=0 (not set by me, seems to be default).

Anyone have any ideas?

I wouldn't worry too much about the error when you set the width, the stackview wants to control the possible widths of it's child subviews, so unless the view has a physical width (and possibly even a height) set then the stack view won't assign it any space within its sub layout. — JoeTomks, Jul 24 '17 at 08:39

J. Doe · Accepted Answer · 2017-07-24T08:57:41.700

3

First, you set a proportional distribution, which tells the stackview: "Hey stackview, lay-out the views proportional". Then, you set a fixed width, so you are saying: "Hey stackview, give this a ... width". Both can not go together, since they are different.

Either make 2 stackviews, or add an UIView in to the stackview, and make that image proportional to his parent UIView.

So:

-Stackview
 -UIView
  -Image proportional to UIView
  -Label proportional to UIView
 -UIView
  -Image pro...
  -label...
 -UIView
  -Image...
  -label...

And set your StackView to "Fill equally" to use this way.

edited Jul 24 '17 at 08:57

answered Jul 24 '17 at 08:48

J. Doe

12,159
9
60
114

Thank you for explaining why the conflict was occurring, now I understand my problem more. Although your solution would be fine, I think @Ben Ong is probably correct in saying I really don't need to use a stack view here. There isn't really any advantage in this case, I'm not entirely sure why I went this route! – Cathal Jul 24 '17 at 09:03
@Cathal no StackViews for this? I think it is perfectly in what you want to use a StackView(s), but it is your choice... – J. Doe Jul 24 '17 at 09:26
In my case the stack view wasn't a vertical one as I think you described, I was actually using 3 horizontal stack views, one for each row. Perhaps if I used used a single vertical stack view and implemented it as you wrote above, this would be the most appropriate design? – Cathal Jul 24 '17 at 09:34
1

@Cathal O I did not know that. You should try out my method, with spacing: 5 in the stackview. Tell me how it went :). So 1 stackview, 3 uiviews in it, with the label and image in that uiview. – J. Doe Jul 24 '17 at 09:42

score 1 · Answer 2 · answered Jul 24 '17 at 08:50

Working with StackViews

A method that works is to make the strip of color beside the label an image and use UIImageView instead. StackView will then consider the UIImageView to have content and not compress it. But that will obviously cost more resources. Also to note that the images used for the strips have to be the same size or the StackView will compress them to different sizes the screen too.

Another is to set the Distribution property of the StackView to Fill Equally this will give the strip and label each half the space. It will work but may not provide the visual you are looking for.

Alternatives

By the amount of information provided, I see no requirement to use StackViews. You may instead just apply constraints that gives the strips and fixed width.

You can also try using auto layout by setting each strip to fix there distance to the leading and top while maintaining its size(actually the default settings) and the label to the same except also fixing its distance to trailing and width to scale with superview.

Yeah I was trying to avoid using an Image. No problem resource-wise as the app is relatively small, I just tend to try to avoid using images where they don't serve a real purpose. I think you are correct in saying there's no need for a StackView in this scenario. I think I will just re-write it using constraints as suggested. Thanks. Will leave until tomorrow to accept answers — Cathal, Jul 24 '17 at 09:05

Problems with UIStackView constraints

2 Answers2