keep 3 UIbuttons center aligned using autolayout

Question

I have a UIView with 3 UIButtons and what I want is when I hide one button I want other two buttons to centrally aligned with equal margin. Let say if there are 3 buttons the UI should be Like

If there are 3 buttons
---------------
[   ][   ][   ]
---------------

if I hide Middle button

---------------
  [   ][   ]
---------------


if I hide 2 buttons
---------------
     [   ]
---------------

is it possible using auto layout ? If yes then please guide in right approach.

if you are targeting iOS 9 and above you can just use a UIStackView probably — Fonix, Mar 29 '16 at 06:20
@Fonix : for this specific requirement, will the UIStackview increase the memory uses? — Ujjwal Khatri, Mar 29 '16 at 06:25
Yes this is possible with autolayout, by creating the outlet of leading and trailing constraints of the button. Adjust the leading and trailing constraint programatically based on or criteria. — Raj Tandel, Mar 29 '16 at 06:30
@Ujjwalnot not significantly, UIStackViews are quite light weight apparently, lighter than using a UIView + constraints — Fonix, Mar 29 '16 at 06:34
Check this out http://stackoverflow.com/questions/33016648/how-can-i-align-3-uibuttons-to-the-center-of-an-uitablecellview — RJE, Mar 29 '16 at 06:40

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

Just Check out accepted answer of @Usama : Align Three UIButton using Auto Layout

Here is the Sample Code

Sample code output:

Thanks to : Usama

edited May 23 '17 at 12:32

Community

1
1

answered Apr 05 '16 at 12:01

P R J

428
5
18

kirander · Answer 2 · 2016-03-29T07:06:20.837

0

One approach is to add width constraint to every button and set its constant and leading constraint constant to zero when the corresponding button is hidden.

Another approach is to remove unnecessary constraints and add new constraints on every change.

You should remember that hidden views still acts in autolayout process.

edited Mar 29 '16 at 07:06

answered Mar 29 '16 at 06:32

kirander

2,202
20
18

Setting width constraints to zero gets you close, but you also have to deal with the padding between the buttons. – Mike Taverne Mar 29 '16 at 06:36

score 0 · Answer 3 · answered Mar 29 '16 at 07:02

Most things are possible with Auto Layout, but not always easy.

Here's what I would try (I'm focusing here on just the horizontal arrangement - you will of course need to add constraints for vertical arrangement but that should be easy):

Create a UIView to act as a container to hold the buttons.
Constrain this container view to center horizontally within your main view.
Position your 3 buttons inside the container view: a. Set width constraints on all the buttons. b. Constrain first button leading to container leading. c. Constrain first button trailing to second button leading with however much spacing you want. d. Constrain second button trailing to last button leading with same spacing as in c. e. Constrain last button trailing to container trailing.
Create outlets for the button width constraints and the spacing constraints c. and d. above.

Now, to hide any button, set its width constraint constant to 0 and its nearest spacing constraint to 0. (The middle button has spacing constraints on either side - pick one to set to 0, it does not matter which one.)

To redisplay a button, set the constraint constants back to their original values.

keep 3 UIbuttons center aligned using autolayout

3 Answers3