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 also want to 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 with Auto Layout. It has 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 ...

Get iOS 7 Programming Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.