Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 852
gpu3d Avatar asked Nov 15 '15 13:11

gpu3d


People also ask

How do you group a storyboard?

Select Layer > New > Group Layer.

How do I show storyboard in Xcode?

To get this, open the storyboard, click the 'assistant' editor, click the 'assistant editor menu button' (immediately to the right of the > arrow at the top left of the assistant window) and select Preview. This shows how the ViewController will look in landscape/portrait 568/480 high modes.

What is main storyboard Xcode?

"Main. storyboard" is the actual name of the storyboard file. This file is similar to your source code files, in that it is "compiled" into another file when you build your app in Xcode.


3 Answers

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

like image 83
gpu3d Avatar answered Nov 01 '22 04:11

gpu3d


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

like image 2
Teja Nandamuri Avatar answered Nov 01 '22 04:11

Teja Nandamuri


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

like image 1
Hossam Ghareeb Avatar answered Nov 01 '22 02:11

Hossam Ghareeb