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)]>")

Answer 1

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.

Answer 2

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!

Answer 3

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