CODEWITHSUNDEEP
iosxcodestoryboarduikitinterface-builder
gpu3d
gpu3d

Reputation: 1184

How to equally space items in Xcode storyboard?

I want to have 15 buttons equally spaced between them and correctly leading and trailing the superview vertically. I set constraints so that the left set of buttons aligns to the left margin and the right set aligns to the right margin. The first button leads from the top margin in each set, and the remaining buttons each have a constraint for vertical space set to the upper neighbor. I thought this would be enough to make it work but it wasn't. As you can see, for an iPhone 4, the number of buttons displayed on the screen is only 12 so I would definitely need to somehow dynamically change the button size depending on the screen size. I am attaching a screenshot from the storyboard that shows the Any x Any editor view and a preview for the 3.5-inch screen.

enter image description here

Upvotes: 6

Views: 5355

Answers (3)

Teja Nandamuri
Teja Nandamuri

Reputation: 11201

Try to set the constraints like this:

First select the all elements on left side and give leading constraint:

enter image description here

Now select first element and give top constraint:

enter image description here

Now select the second element and select it , and drag it to first element and give vertical spacing: , repeat giving vertical spacing for all the elements, So that each element will be vertical space constrained with its top element!!.

enter image description here

Do the same for elements on right side.

Give the trailing constraints for all elements on left,

and the select top element and give top constraint

and then select one element below top element and give vertical spacing between those two, repeat it for all the elements!!! So that each element will be vertical space constrained with its top element!!

Note: I only gave left constraints, you can try for right side too!!!!!

Upvotes: 2

gpu3d
gpu3d

Reputation: 1184

This was really easy to accomplish using stack views. Simply select all the buttons and click the leftmost icon (bottom right side of left pane) which is named Stack, and see the magic happening!

enter image description here

Upvotes: 7

Hossam Ghareeb
Hossam Ghareeb

Reputation: 7123

Add height constrain to the top left button to be 1/15 of the superview height and for all buttons let their height equal to the top left one.

Note it will work only if the vertical spacing is zero between buttons.

If you have a vertical space value for example x, then set it as 1/15 - 14 * x

Note #2 in iOS 9 only, seems the stack view will help perfectly in that

Upvotes: 1

Related Questions