Arrange buttons (auto layout)

I have five buttons that I would like to distribute across the top of the screen (another set across the bottom, too).

I can position the left, center, and right ones easily. I thought I could position the other two, but the values I am getting back for .left and .width make not sense.

They’re not zero, but the center button and right-most button are both reporting a .left of 50, which neither of them are.

Is there still a bug in the position reporting?

I guess you are talking about Autolayout because a simple distribution would be easy to do, but not if you change the layout.
How did you set up the layoutConstraints?
In many of cases, it is best to use invisible controls (Apple calls them spacer views) to calculate the distance between the buttons.
I guess all of your buttons should have the same size?

Then the easiest way for 5 buttons would be to:
Position the buttons and constrain button1 to parent.left (+ whatever gap), button3.centerx to parent.centerx and button5.right to parent.right - gap like above.
– constrain all buttons.width and top to the same value.
– remove any other constraint.
– add an invisible control somewhere on your layout where it does not interfere with anything.
– give it a width constraint like width = parent.width - 5 (number of buttons) * button.width - gap of first/last to outer side.
– position one invisible control between button1 and button2 and another one between button4 and button5.
– give them a constraint that makes their width the width of the first spacer view/4 (number of buttons –1 = number of gaps).
– give them a constraint that binds their outer border to the outermost button (like the first one’s x being button1.right and the second’s right button5.left)
– add a constraint to button 2 that makes it cling to spacer view 2 on the left and a constraint to button 4 that positions it on the left side of spacer view 3.

That should work, and for more buttons (like possible on iPad), you would just add more spacers and adjust the values.
I did not understand what you meant with .left of 50 – is that a constraint value?

You can also play with percentages of parent width. Here is the horizontal center for each button (text centered):

  • Parent.Right 16% offset 0
  • Parent.Right 33% offset 0
  • Parent.HorizontalCenter offset 0
  • Parent.Right 67% offset 0
  • Parent.Right 83% offset 0

For 5 buttons, there are 6 intervals of 100%/6 = 16.666666%. Since the auto layout percentage cannot be entered fractionally, I rounded up.

Fiddling with the percentages solved it.

One need only deal with numbers 2 and 4 as button 1 (the left most) and button 5 are placed relative to the edges, and the middle button is centered.

Thanks.

[quote=305687:@Bob Gordon]Fiddling with the percentages solved it.

One need only deal with numbers 2 and 4 as button 1 (the left most) and button 5 are placed relative to the edges, and the middle button is centered.

Thanks.[/quote]

You want to verify the result remains acceptable when you rotate the device. If you make 1 and 5 relative to the edge, distribution may become uneven.

If they should and are hard to handle, using helper views can still be an option. If they don’t, Michel’s solution is of course much more elegant. I had a similar thing in mind but tried to align center to width which results in an exception. Thanks, Michel!