Adjusting UIView Height Inside UIStackView Control

Question

I am using a UIStackView in iOS 9 SDK. The height of the stackview is 44 points. I have a UILabel and UIView inside the StackView as shown below:

Now, I want to make the green view much smaller than 44.. much like 20. How can I do that?

Without the UIStackView I am getting breaking constraints:

[GT.BubbleView:0x14536610]   (Names: '|':UITableViewCellContentView:0x14536fd0 )>",
    "<NSLayoutConstraint:0x146b7300 GT.BubbleView:0x14536610.trailing == UITableViewCellContentView:0x14536fd0.trailingMargin>",
    "<NSLayoutConstraint:0x146c4000 'UIView-Encapsulated-Layout-Width' H:[UITableViewCellContentView:0x14536fd0(286)]>")

Sluggard

Can you explain why you need to use a stack view in this situation? It seems like you have a pretty basic setup. What are you hoping to accomplish? – Janie

Answer 1

If you are trying to achieve a 20x20 square like the one below:

Then all you have to do is add another UIView to your green view. Make that UIView's size 20x20pts. Then change the small view background to green and the larger view's background to clear.

That said, this solution doesn't require a stackview and possibly over-complicates your UI. I would recommend just using autolayout instead.

Stackviews are most useful when

1. you want to compensate for a change in device orientation,
2. want to stack a lot of things on top of each other,
3. want to create a very complicated layout with many elements but that has patterns you can repeat, or
4. simply want to be able to remove an element or add an element in with the sizing correcting itself

That list isn't exhaustive, but should give you an idea of when and why you'd use a stack view.

Outside of a prototype cell

This behavior is trivial. You can simply set the constraints on your view: '

And then set the constraints on the stackview:

Hope this helps, cheers!

Janie

Unfortunately, when I put the 20 points width and height the height is completly ignored since it takes the height of the UIStackView control. – Sluggard

I even tried to completely remove the UIStackView but then I get breaking constraints which I have no idea what it means. The greenview never displays. – Sluggard

Thanks! I removed the UIStackView and added constraints manually and now it works! – Sluggard

Thank you for talking about where stack views are useful. – Holohedral

Answer 2

1. First you need to add UIStackView on the cell

2. Need to add constraints to your UIStackView

3. Adjust your UIStackView

4. Drag&Drop UILabel into your UIStackView

5. Then Drag&Drop UIView into your UIStackView

6. Add green-UIView like subview to pink UIView

7. Now you can add couple constraints to green-UIView

8. Now you can run app on simulator or device

   Notice that I don't added any constraints for UILabel.

Catto

Thanks for a detailed screenshots! Unfortunately, when I put the UIView inside the UIStackView then it takes the height of the UIStackView. I tried dragging and changing the height of the UIView but it always resets back to the UIStackView's height. – Sluggard

Wait a second! You added a really small stackview for that green view. I also need to add the UILabel inside the UIStackView should I be using multiple stackviews. – Sluggard

Thanks! I removed the UIStackView and added constraints manually and now it works! – Sluggard

Can I say this is using green UIView to cover the pink UIView ? – Advisee

Answer 3

The breaking constraint problem can be easily fixed by setting the priority of width and height constraints to 800 or above.

Scifi

Answer 4

I wanted to post my answer here so others could see, despite a slightly different problem from OP's.

I was trying to resize a UIView that contained a UIStackView and the constraints were breaking. I was changing the UIView's height constraint between 0 and 66 depending on if there was relevant info to show that the stack view was displaying for.

I was able to fix the breaking constraints by removing top and bottom constraints of the stack view inside the view, and instead set it to be vertically centered. This resulted in much smoother scrolling in my table view.

Unlimited