64

In Interface Builder, I use a horizontal UIStackView and want to place the items as this :

   xx   xx   xx

every x symbolize an item. Item1 and item2 should be stuck one to the other, but item2 and item3 should be spaced and so on. That means I do not want constant spacing between all the items.

How can I do so ?
(maybe an equivalent of flexible space of toolbars)

Thanks !

1
  • 3
    Honestly, in most cases the simplest solution is just to drop in invisible UIView where you want an extra gap. Simply set the height of that view using a constraint, and you're done.
    – Fattie
    Jan 5, 2018 at 18:07

7 Answers 7

78

iOS 11 and above

stackView.setCustomSpacing(32.0, after: headerLabel)

For more info: Stack View Custom Spacing

2
  • 5
    I am not currently on this project, but this solution is interesting !
    – Nahouto
    Nov 20, 2017 at 13:15
  • I've been looking for this for so long... Thank you
    – errorka
    Jan 17, 2022 at 11:16
67

It's an answer based on Lumialxk's reply. Choose the stack view you want to work on, and change the spacing property to your desired value.

Screen shot of the property panel

33

Inside your horizontal stack view have three more horizontal stack views so that you can have control over spacing and distribution for each item. See screenshot below:

enter image description here

6
  • Thank you, in the nested stack views, how can I set its items stucked one to another and not spaced ? Is it possible ?
    – Nahouto
    Jan 3, 2016 at 11:34
  • Yes you can achieve that, for stack view, in attributes inspector you have one propery called spacing, make that 0. The screenshot which I have attached, in that 1st and 2nd 'X' (item) has spacing 0, the space you are seeing there is because i have used buttons there and they have that much frame. And for outer stackview have spacing property set to the space which you want between them, if still you haven't got this let me know, I can attach another screenshot for your clarity
    – Ajay Kumar
    Jan 3, 2016 at 11:49
  • I set an empty stack view, stack view containing item1 and item2, empty stack view, stack view containing item3 and item4, empty stack view, stack view containing item5 and item6. And finally it works...
    – Nahouto
    Jan 3, 2016 at 12:46
  • 1
    Why you need empty stackview?. For outer stackview set 'distribution' property to fill equally and spacing to some constant say 20 , for all inner stackview set 'distribution' property to fill equally and spacing 0, it will work.
    – Ajay Kumar
    Jan 3, 2016 at 12:55
  • You can add Spacing in SatckView Attributes !!
    – mOmO
    Nov 27, 2018 at 11:07
17

Programmatically for each view:

stackView.spacing = 10.0

If you want to make a custom spacing after each view and you need to support lower than iOS11:

Create a clear UIView with height and add it as an addArrangedSubview into the stackView.

12

Swift 4 : If you want for example set a space after the first subview :

stackView.setCustomSpacing(30.0, after: stackView.subviews[0])
4

In a stack view,you can only define the constant space between items.It's easy to do such things,just choose the stack view in the outline and set the value of space.

4
  • I have to precise my need : item1 and item2 should be stuck one to the other, but item2 and item3 should be spaced. That means I do not want constant spacing between all the items.
    – Nahouto
    Jan 3, 2016 at 11:11
  • @NahoumCohen I see,you should use another stack view if you want to do that. You know,stack view can contains another one.
    – Lumialxk
    Jan 3, 2016 at 11:23
  • When I add another stack view (embed into the super stack view), how can I set its items centered and not spaced ?
    – Nahouto
    Jan 3, 2016 at 11:27
  • @NahoumCohen You can consider the first stack view as a whole.
    – Lumialxk
    Jan 3, 2016 at 11:32
0

This is not a conventional solution but it works so far as I have being testing. After setting a constant spacing between items for the stackview in interface builder, you can still add a constraint to a stackview item from its top to the bottom of item above it and give a different value from the constant spacing of the stackview. xcode will indicate an error because of conflicting constraints between the constraint it creates by setting the constant spacing of stackview and the constraint you have added. but at run time it uses the second constraint added which gives a variable spacing from the constant spacing.

I think xcode interface is simply lagging behind and should be updated to not show this error because if the method stackView.setCustomSpacing exist already why is xcode not yet able to know at compile time that a variable spacing can exist. But like I said the error is showed is showed but the second constraint is used. Just try if it works as I described. No guarantees!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.