Search code examples
iosobjective-cautolayoutxcode8

How to place three buttons in centre side by side with spacing using autolayout in ios?

I'm placing the three buttons side by side with spacing in the centre of the iOS window. I'm using auto layout but the constraints which I'm setting is:

  1. I put first button to the button in left with leading and top spacing with horizontal spacing to second button.

  2. I put second button with spacing horizontally from first button and top spacing

  3. I put a third button with trailing space and top vertical space and horizontal spacing with second button

  4. Next I assigned equal widths to all the buttons

But still my buttons are getting misplaced why? Any Idea?

First Button

Second Button

Third Button

Solution

  • first put the 3 buttons on the screen and place them accordingly. Since you want the 3 buttons in the centre, put like this.

    1)put the first button towards the left side, the 2nd button in the middle(you can see the blue cross line when you reach the middle), then the 3rd button towards right of it.

    2)now select the middle button and choose the 3rd small icon from right at the bottom right (two rectangles placed parallel) and tick horizontal in container and vertical in container.

    3) now select the 1st button and choose the 2nd small icon from the bottom right(one square box between 2 lines) and select the red line towards the left(there will be 4 red lines on towards side).remember to uncheck the constrain to margins. After that again select the first button and cntrl drag towards the middle button and choose centre vertically from the drag down menu

    4)similarly do for the third button at the right,only difference choose the red line towards right.

    hope i have explained slowly. I am also a beginner so i can understand how you feel :) Hope it helps. do ask if you got any doubts. cheers