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

Scratcha picture Scratcha · Jan 26, 2015 · Viewed 56.7k times · Source

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.

Answer

Abubakr Dar picture Abubakr Dar · Jan 26, 2015

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.