Cover by Vandad Nahavandipoor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

3.0. Introduction

Aligning UI components has always been a big headache for programmers. Most of the view controllers in complex iOS apps contain a lot of code just to set the frame of UI components on the screen, align components horizontally/vertically, and make sure the components look good on different iOS versions. Not only that, but some programmers want to also use the same view controllers across various devices such as iPhones and iPads. This adds a lot of complexity to the code. Apple has made it easier for us in iOS 6. They have brought Auto Layout from OS X over to iOS. We will be talking about the details of Auto Layout in a moment, but let me just give you a brief introduction to it and explain what it is for.

Let’s say you have a button that you want to keep at the center of the screen. The relation between the center of the button and the center of the view on which it resides can be simply described like so:

  • Button’s center.x is equal to view’s center.x

  • Button’s center.y is equal to view’s center.y

Apple noticed that a lot of the positioning of UI components can be solved with a simple formula:

object1.property1 = (object2.property2 * multiplier) + constant value

For instance, using this formula, I could simply center a button on its superview like so:

button.center.x = (button.superview.center.x * 1) + 0
button.center.y = (button.superview.center.y * 1) + 0

Using this formula, you can do some really funky things during the UI development of your iOS apps that you could ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required