6

I am trying to get horizontal equal spacing between 11 buttons, I have tried with the IB but I cannot get the buttons to space equally in different screen sizes. Also I want to increase the size of the buttons and keep the ratio of each button on bigger screen.

3.5-inch enter image description here

5.5-inch enter image description here

I have been trying with all different constraints setup but I cannot get it right. Is this Possible to achieve and if yes How?

Tim Vermeulen
  • 12,352
  • 9
  • 44
  • 63
SNos
  • 3,430
  • 5
  • 42
  • 92
  • 1
    Possible duplicate of [How to add Equal Spacing and equal width for button in iOS Auto layout](http://stackoverflow.com/questions/32862142/how-to-add-equal-spacing-and-equal-width-for-button-in-ios-auto-layout) – Bhavin Bhadani Aug 05 '16 at 09:34

2 Answers2

13

To layout 11 buttons equally spaced, put 10 spacer views between them:

11 buttons

Set the following constraints:

  1. Set a Leading Space to Container View Margin constraint between the leftmost button and the left margin.
  2. Set a Trailing Space to Container View Margin constraint between the rightmost button and the right margin.
  3. Pin all of the buttons and spacer views to their left and right neighbors. The constant should be 0.
  4. Set the height of all of the spacer views (to something like 64).
  5. Set an Equal Widths constraint between the leftmost button and the top level view. Change the multiplier to 1:18. This will allow the button size to grow on bigger screens.
  6. Select all 11 buttons (by holding down shift and click on the 11 buttons. Choose Equal Widths and Aspect Ratio. Make the Aspect Ratio constant 1 for square buttons.
  7. Select all 10 spacer views and set Equal Widths.
  8. Set a Vertical Spacing to Top Layout Guide constraint between the leftmost button and the top margin.
  9. Select all 11 buttons and 10 spacer views and select Align Vertical Centers.
  10. Select all 10 spacer views and set their hidden property in the Attributes Inspector.

On the iPhone 4S (3.5 inch):

iPhone 4S Simulator

On the iPhone 6S Plus (5.5 inch):

enter image description here

vacawama
  • 150,663
  • 30
  • 266
  • 294
8

Use a horizontal UIStackView and set it to "fill equally"

A Tyshka
  • 3,830
  • 7
  • 24
  • 46