iOS Autolayout: two buttons of equal width, side by side

ios iphone xcode autolayout

59,071

Solution 1

Add the following constraints

Assign equal width from button1 to button2.
Assign horizontal spacing between both buttons.
Assign leading space from button1 to its superview.
Assign trailing space from button2 to its superview.
Assign top space to both the buttons.
Let me know if it works for you.

Solution 2

Follow Steps and Screenshots for easy solution

Step-1)

For Button 1 : Set Constraints: (1)Leading, (2)Top or Bottom asper your need, (3)Height

Step-2)

For Button 2 : Set Constraints: (1)Trailing,(2)Top or Bottom asper your need, (3)Height

Step-3)

Press Ctrl + Drag From Button 1 to Button 2

Select Horizontal Spacing

Step-4)

Select Both Button (using Command) and Add Constraints Equal Width

OUTPUT

Hope it Helps you :)

Solution 3

Stack layout in iOS9, will do the job really nice. Add stack view to your view and configure as follow:

Solution 4

You can check my example - you can easy aim this, by using proportional constraint. Also you can easy aim proportional multiple UIViews. Please look attached example

https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib

View more solutions

59,071

Author by

Scratcha

Web & Software Engineer

Updated on July 08, 2022

Comments

Scratcha almost 2 years

I am currently having difficulty with AutoLayout. I am using interface builder and am trying to position two buttons of equal width side by side as illustrated in the following image.

From the following Preview image, my titleImage has been properly constrained and is displaying correctly however the buttons are not. I have experimented by aligning button 1 with the leading edge of titleImage, and button2 with the trailing edge of titleImage, however the width distribution between the two buttons becomes skewed at this point, as demonstrated below.

My objective is to understand what constraints are missing and should be applied to the two buttons to maintain equal widths regardless of device. If possible I would like to achieve this through interface builder as opposed to additional code.
Scratcha over 9 years

Excellent - this worked for me. Specifically point #2 - adding a horizonal spacing.
Randika Vishman about 9 years

WoW!!!What are you I meant? It really works like a charm, and I've been wasted around 3 hours! :( In my case I had two Views of equal width in the super View dividing it. However it asked me at the end something like, "Needs constraints for Y or Height" I choosed to do "Add missing constraints" and it resolved.
Alvin George over 8 years

@Abubakr : It works for only one screen size as both buttons got same width.
Abubakr Dar over 8 years

Can you tell me what is it that you want to do? I might be able to help you
Abubakr Dar over 8 years

@AlvinGeorge, These constraints works for all the screen sizes, their width will be equal on all the devices.
Kunal Kumar about 8 years

Height shouldn't be fixed. Let the view decide the height of the button according to the screen-size.
Vvk about 8 years

@KunalKumar this case Height is Fixed. can you please tell me what you wnat?
siege_Perilous almost 8 years

Works for more than 2 adjacent UI elements, too!
Venkat Reddy almost 7 years

how can i add one more button dynamically
Abubakr Dar almost 7 years

there are a few options, 1. Add the button in XCode, add a width constraint to it and set it to zero, and then depending on your condition you can change it width to show. 2. Add and adjust the button using NSLayoutConstraint Api. 3. Use some 3rd party Constraints library to do your bidding.
Moxarth almost 7 years

working perfectly in xcode 8.3 . just steps 3 and 4 you have to assign it manually so that both values would get same . otherwise best approach .
Manoj Kumar over 6 years

Have been struggling for long but this answer saved me a lot of time :) Perfect answer. Horizontal spacing was the key!!
Amber K over 5 years

How will you make it work when both buttons don't fill up the whole screen and are as wide as their content? For eg: Two small buttons in center with equal widths. Here if you give leading & trailing from superview that will be a constant and won't vary on screen size.
Abubakr Dar over 5 years

@AmberK there are lots of solutions to your question, e.g. for the button on the left, you can assign the leading anchor constraint to the centre anchor of super view, and for the right button you can add a trailing anchor constraint to the centre anchor constraint of the superview. This is the easiest solution I believe.
Amber K over 5 years

Well thanks but I found the solution and its better in code. Give any one of them center align to parent and give constant half of the content size you can calculate that in code or if content is static you can just update frames and update constant. along with that also add half of the center spacing among two buttons to that center align. And just give that leading or trailing to the other button. Fixes this for me. And if your content is intrinsic and need to update just call the layout updates method and calculate constant value again.
Jaywant Khedkar about 5 years

@Vvk ... perfect bro :)
BharathRao almost 5 years

Great...solution...saved my time. Thanks Bro!