Hiding sub view in Stackview adds extra space

I have an app with a horizontal stackview which contains 3 UIViews. When all 3 UIViews are visible it works fine like this:

https://i.stack.imgur.com/BbwOy.png

However if I hide one of the UIViews dynamically like this a space is added in the stackview between the 2 UIViews:

secondView.isHidden = true

https://i.stack.imgur.com/mx4Pt.png

How can I get rid of the extra space? In Xcode I have the stack view's spacing set to 0. I don't know how to solve this. Please let me know if you know how to solve this.

You could try to remove the view from the StackView to hide and reinsert in correct position to show.

Get details here: https://stackoverflow.com/questions/30728062/add-views-in-uistackview-programmatically

Which iOS version ?

They say here you can just hide instead of remove, but that's where you have the problem: https://stackoverflow.com/questions/41483641/remove-views-in-uistackview-swift


In UIStackView definition in Xcode (cmd-click on UIStackView - Jump to definition:
 /* Spacing between adjacent edges of arrangedSubviews.
     Used as a strict spacing for the Fill distributions, and
     as a minimum spacing for the EqualCentering and EqualSpacing
     distributions. Use negative values to allow overlap.
     
     On iOS 11.0 or later, use UIStackViewSpacingUseSystem (Swift: UIStackView.spacingUseSystem) 
     to get a system standard spacing value. Setting spacing to UIStackViewSpacingUseDefault 
     (Swift: UIStackView.spacingUseDefault) will result in a spacing of 0.
     
     System spacing between views depends on the views involved, and may vary across the 
     stack view.
     
     In vertical stack views with baselineRelativeArrangement == YES, the spacing between 
     text-containing views (such as UILabels) will depend on the fonts involved.
     */
    open var spacing: CGFloat

How have you defined distribution ?

This property defines a strict spacing between arranged views for the UIStackView.Distribution.fillProportionallydistributions. It represents the minimum spacing for the UIStackView.Distribution.equalSpacing and UIStackView.Distribution.equalCentering distributions. Use negative values to allow overlap. The default value is 0.0.

It's hard to tell what's going on here, but it looks like the two visible parts of the stack view each have half of the width as expected, and that the first view's green background just isn't wide enough for some reason (or the first view itself isn't wide enough) to fill the available space. I think this is a problem with the individual view, not the enclosing stack view.

@SirEl123

  • In the first (3 items), all 3 have same width.
  • In the second, the green is narrower.

So, it would be surprising the issue comes from the drawing of green part.

Could you post code so that we can try to reproduce, or even better, post a complete project for testing ?

I would say fillEqually , but without seeing you stack view settings it is hard to tell.

Hiding sub view in Stackview adds extra space
 
 
Q