How to I align 4 buttons together? (autolayout)

Question

I'm trying to align 4 buttons together so they look like this:

I want it so that ONE has a 0 margin to the left, right and bottom, TWO has a 0 margin to the left, right, and bottom, THREE has a margin to the top, left, and right, and FOUR has a 0 margin to the top, left, and right

In order to support iOS 8, I do not want to use stack views

add 0 to all their side, then choose 4 at same time, add equal width and equal height, it should end up like this — Tj3n, Dec 19 '16 at 08:31
it almost worked - for some reason two and four are wider than one and three — Ronak Shah, Dec 19 '16 at 08:35
set proportion width for all four buttons. Set width = Superview.width and then Set multiplier =0.5 — PlusInfosys, Dec 19 '16 at 08:39
@iOS_devloper how do I do that? (can you post an official answer?) — Ronak Shah, Dec 19 '16 at 08:41
I dont think need to set width for them, just need equal width for all of them will do, @RonakShah is your width is wrong? — Tj3n, Dec 19 '16 at 08:42
@Tj3n I got it, I needed to use equal widths and set the height. Thanks! — Ronak Shah, Dec 19 '16 at 08:44
I see, so it's custom height, not screen-wide height, then you need to add height to 1 of them :p i put all the thing as answer — Tj3n, Dec 19 '16 at 08:52
@RonakShah Sure, let me take some screenshot, will post answer in a minute. — PlusInfosys, Dec 19 '16 at 09:12

score 2 · Accepted Answer · answered Dec 19 '16 at 08:51

2

You can add 0 constraint to all their sides, then choose all at same time and give them equal width and height, if custom height then just need to set height constraint to 1 of them, then you can achieve the design

answered Dec 19 '16 at 08:51

Tj3n

9,837
2
24
35

score 1 · Answer 2 · answered Dec 19 '16 at 10:00

You can set proportion width for all four buttons. Set width = Superview.width and then Set multiplier =0.5 This will make sure that your button width is half of buttons superview so will fit two button in it.

To do so, Right click on Button, Drag to super view and select EqualWidth constraint. then go to constraint and edit multiplier of recently added width constraint to 0.5 (or 1:2).

You can check this video for detail

score 0 · Answer 3 · answered Dec 19 '16 at 09:19

0

Use Ctrl+click from one button to other button and choose equal width.All the buttons will have equal width in this way.

answered Dec 19 '16 at 09:19

Waqar Khalid

119
1
12

How to I align 4 buttons together? (autolayout)

3 Answers3