UIStackView; Equal Spacing Between & Outside Elements

Question

UIStackView is awesome, I love Equal Spacing Distribution. But how to achieve the same space also outside of elements dynamically? In my case all elements will have same ratio 1:1

Fou

Add transparent elements with width 1.0f at the beginning and end of the UIStackView – Odisodium

it won't give me equal spacing to that what i have between elements – Fou

@AdamSmaka I'm trying to do this too. Seems like a central use case. In my case, to add a variable into the mix, the size (height in my case, I'm using a vertical stack view) varies as well as the contents. Haven't really got a good method. – Domett

Answer 1

You can add equal spacing using the story board as shown here:

Source: https://mcmap.net/q/479547/-how-to-add-equal-spacing-and-equal-width-for-button-in-ios-auto-layout

Auspicious

i would like to add and remove items from stackView programmatically, so this static number of uiviews doesn't resolve my problem, but it's close – Fou

tell me please how to add equal space to empty views programmatically so I will mark your answer as accepted. This is the last missing element to my case. – Fou

@AdamSmaka check out this post on how to add constraints programmatically https://mcmap.net/q/23488/-how-to-add-constraints-programmatically-using-swift – Auspicious

Answer 2

@Declan has the right idea. Here's that answer programatically where you add extra views on either side so the stack view gives correct outside spacing with any number of buttons.

stackView.alignment = .center
stackView.axis = .horizontal
stackView.distribution = .equalCentering

// Then when I add the views...
let leftView = UIView()
stackView.addArrangedSubview(leftView)
content.buttons.forEach { (button) in
  stackView.addArrangedSubview(button)
}
let rightView = UIView()
stackView.addArrangedSubview(rightView)

Here's what my view looks like with 2 items using equalSpacing

And here it is with equalCentering distribution, also a nice look.

Diatom

Answer 3

I prefer to let the UIStackView handle the spacing. Create a UIStackView with equal spacing and add two 0px wide (0px high if using a vertical stackview) transparent views to the the far sides of your stack view.

Millwright

Answer 4

I think what you want is to have the same spacing outside of the stack view with the spacing outside.

What I would do is the put stack view inside another view (GRAY VIEW) and set the leading and trailing constraint of the stack view to be equal to the spacing of the stack view.

Spacing of the Stack View

Constraints of the Stack View from its super view (Gray View)

Festination

that's ok but if i remove one element spacing won't change dynamically – Fou

Answer 5

You can use constraints and give then same height and width. So when you change the dimension of anyone of the component then all components are changed with same dimension.

Suspicious

components will change, but i need to change spacing between and outside to change – Fou