Aligning two buttons vertically in iOS 9

En appstudio
Feb 11, 2016 · 4 min read

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.

Image for post
Image for post
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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post
The one to the right

And it’s time to update the frames!!

Image for post
Image for post

And you’re done!!

Some notes and extras

  • Depending on your layout, you also need a constraint height set.
Image for post
Image for post
A big nope for designers
Image for post
Image for post
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)

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store