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

Solution 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!

Solution 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.

Solution 3

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

Comments

[Rob Norback]

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?

[john doe]

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

[john doe]

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.

[john doe]

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.

[john doe]

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.

[john doe]

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

[john doe]

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

[Tejas Anil Shah]

Thank you for talking about where stack views are useful.

[Chandler]

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