CODEWITHSUNDEEP
iosobjective-cautolayoutxcode8
Jessica thompson
Jessica thompson

Reputation: 407

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

Upvotes: 3

Views: 3380

Answers (5)

Pavankumar
Pavankumar

Reputation: 288

First select all the views , take into horizontally middle. Now will start constraint - Select view1 - give constraint leading ,top, horizontally spacing to view2 and give your height.

enter image description here For second view - Now select all the views go to allign option right side down select the top edges. Now select only second view - give horizontal spacing to third view and height for second view.

For third view - only give constraint to trailing and height.

Last constraint - Select all the views go to pin option and select equal widths. Now your design is ready for perfect.

Upvotes: 1

star lord
star lord

Reputation: 66

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

Upvotes: 3

Tejas Shelke
Tejas Shelke

Reputation: 229

Add all 3 button in another parent UIView.

Then add following constraints to each button.

Left Button : Top, Leading, Bottom and Equal width.
Middle Button: Top, Bottom, Equal width and Horizontally center.
Right Button : Top, Trailing, Bottom and Equal width.

Or If your deployment target is > 9.0, try using Horizontal UIStackView

Upvotes: 1

ios
ios

Reputation: 31

Set Constraints like:

Middle button : horizontally in container , equal width , height

Left button : leading , trailing, equal width and height to middle button

Right button : leading , trailing, equal width and height to middle button

Upvotes: 1

Bista
Bista

Reputation: 7893

Here's how you can achieve it:

  1. Set Width & Height of all three buttons.

  2. Centrally align Middle Button Horizontally & Vertically to container.

  3. Set Trailing & 'Center Vertically(Y) of the Left-most Button to the Middle Button.

  4. Set Leading & Center Vertically(Y) of the Right-most Button to the Middle Button.

Or the short way:

  1. Add all three button into one Stack View.
  2. Center Stack View Vertically and Horizontally to the Container.
  3. Set Stack View Spacing value for distance between these buttons.

Upvotes: 1

Related Questions