What is the best approach for horizontally aligning 5 buttons with Autolayout

Question

I know this is a little newbie style question but I couldn't find any subject about this and I have to horizontally align multiple buttons in my view controller.

I tried to 2 approach first one is separate them with UIViews and <= width changed constraints priority and others. Second one doesn't have UIViews but buttons aligned in starboard very well. I already watched Stanford auto layout lessons. But I couldn't find any solution about this. I don't know how to approach to align multiple buttons or views can someone help me to learn and solve this problem ?

Thanks !

Answer 1

You just need to give leading, trailing and equal-widths constraints between adjacent buttons.

Steps (We'll only consider horizontal constraints here):

1. Add leading constraint from the first button to the superview (or left-side sibling view).
2. Add horizontal spacing constraint between:
   • First button and second button.
   • Second button and third button.
   • Third button and fourth button.
   • Fourth button and fifth button.
3. Add trailing constraint from the fifth button to the superview (or right-side sibling view).
4. Add equal widths constraint between:
   • First button and second button.
     
   • Second button and third button.
     
   • Third button and fourth button.
     
   • Fourth button and fifth button.
     

If you follow this approach, you need not add extra views to align the buttons. Please see the screenshots below for understanding this better.

Answer 2

As i understand your horizontally aligning 5 buttons problem with Autolayout, I make some draw to how you fix it. It has following:

Hope, It'll helpful to you.

Answer 3

You should use a horizontal stack view. You set the constraints of the stack view to its superview, and then drop in your buttons. You need to adjust spacing, stretch to fill, etc in the attributes inspector and it'll be perfectly aligned.