98

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.

objective layout

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.

problem scenario

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.

Abubakr Dar
  • 4,078
  • 4
  • 22
  • 28
Scratcha
  • 1,359
  • 1
  • 14
  • 22
  • 1
    **Masonry** is a recommended way to do this via programmatically. Link: https://github.com/Masonry/Masonry – Itachi Jan 26 '15 at 11:22
  • 1
    here is the link...you can check...http://stackoverflow.com/questions/29620409/need-assistance-setting-two-buttons-auto-layout/29620794#29620794 – Bhavin Bhadani Jul 25 '15 at 10:56

5 Answers5

251

Add the following constraints

  1. Assign equal width from button1 to button2.
  2. Assign horizontal spacing between both buttons.
  3. Assign leading space from button1 to its superview.
  4. Assign trailing space from button2 to its superview.
  5. Assign top space to both the buttons.
    Let me know if it works for you.
Abubakr Dar
  • 4,078
  • 4
  • 22
  • 28
  • 7
    Excellent - this worked for me. Specifically point #2 - adding a horizonal spacing. – Scratcha Jan 26 '15 at 12:44
  • 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. – Randika Vishman Apr 19 '15 at 21:50
  • @Abubakr : It works for only one screen size as both buttons got same width. – Alvin George Oct 20 '15 at 06:55
  • Can you tell me what is it that you want to do? I might be able to help you – Abubakr Dar Oct 20 '15 at 09:17
  • @AlvinGeorge, These constraints works for all the screen sizes, their width will be equal on all the devices. – Abubakr Dar Oct 20 '15 at 09:18
  • 1
    Works for more than 2 adjacent UI elements, too! – siege_Perilous Jun 05 '16 at 04:08
  • how can i add one more button dynamically – Venkat Reddy May 30 '17 at 10:56
  • 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. – Abubakr Dar May 30 '17 at 12:18
  • 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 . – Moxarth Jul 04 '17 at 13:36
  • Have been struggling for long but this answer saved me a lot of time :) Perfect answer. Horizontal spacing was the key!! – Manoj Kumar Oct 11 '17 at 03:15
  • 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. – Amber K Sep 23 '18 at 12:58
  • @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. – Abubakr Dar Sep 23 '18 at 21:21
  • 1
    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. – Amber K Sep 24 '18 at 07:25
80

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 :)

winadiw
  • 55
  • 9
Vvk
  • 4,031
  • 29
  • 51
20

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

enter image description here

Ben
  • 3,832
  • 1
  • 29
  • 30
2

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

Vitalii Gozhenko
  • 9,220
  • 2
  • 48
  • 66
0

My solution is to

  1. Put a small view in the middle of two buttons and make it centre(Horizontal centre in container and vertical centre in contener as 0).
  2. Add height and width to the small view.
  3. Add buttons the constraints and give horizontal space constraints to small view.
  4. Give the small view background colour same as buttons or View's colour.

Note: See the Screenshot.

enter image description here

Alvin George
  • 14,148
  • 92
  • 64