Aligning two buttons vertically in iOS 9

Making an app is nothing like designing for the web. But sometimes you run into similar problems. Apple have been keen on updating their constraints system to help developers make nice looking apps that scale independent of resolution and screen size. The system is constantly updated so here is a small guide for making two buttons align nicely independent of screen size, only taking margins into consideration. The problem is easy to solve on the web, and here is how you do it in Xcode.

TL;dr; Here is a screenshot of the final solution if you don’t like scrolling or reading. The solution is not putting any constrains on the actual buttons, but only around the buttons.

Final solution, provided for the stressed out people in the world.

Step by step

1. Create two buttons, drag them on the screen to where you want them more or less.

2. Select both buttons, align them vertically using the Add New Alignment Constraints menu. You can also add them relative to a bottom or top object or margin, but in this example we use the y-point baseline. Add the two constraints and don’t update the frames just yet.

3. Now, using the Add New Constraints menu, set the button width to Equal Widths. Add the constraints, but don’t update the frames.

4. Select the left button and open the Add New Constraints menu again. Add a trailing constraint to the trailing second button, by clicking the the right margin line and inputing your preferred margin. This is the space between the two buttons. In the example we’re going to use a margin of 20 px. Uncheck the Constrain to margins checkbox just to be sure. Add the constraint, don’t update the frame.

5. Select the left button one more time and open the Add New Constraints menu again. Add a left margin of, yes you guessed right, 20 px. Uncheck the Constrain to margins checkbox since we don’t use margins in the example. Add the constraint, don’t update the frame. This is the left button’s left margin, and in the example, we’re attaching it to the super view, left side called leading in the constraints system.

6. Select the right button and open the Add New Constraints menu again. Add a right margin of, last time I promise, 20 px. Uncheck the Constrain to margins checkbox. Add the constraint, don’t update the frame. This is the right button’s right margin, and in the example, we’re attaching it to the super view, right side called trailing in the constraints system.

7. Almost done. Select both buttons and click the Resolve Auto Layout Issues menu. (The one furthest to the right).

The one to the right

And it’s time to update the frames!!

And you’re done!!

Some notes and extras

  • Depending on your layout, you also need a constraint height set.
  • Long text inside the button can be a problem, the UIButton controller doesn’t handle this as well as the UILabel controller.
A big nope for designers
Thanks Apple for not adding this to UIButtons!

Since the UIButton doesn’t have the magic autoshrink option you need to code this behavior. Here are some links on the topic:

Need help with your next app? En appstudio loves all the nerdy details involved in making great and beautiful apps for iPhone and Android.

// Robin Kochauf, Developer / Swift nerd @ En appstudio (enappstudio.se)