Thank You, Auto Layout!

When you insert a tableView into your app that fills the whole screen, you would like that tableView to fill the screen on every device on which the app is used, right? Auto layout allows this to happen. When you place a set of constraints on a view within your app, auto layout “reads” the constraints on each view and calculates the view’s size and position relative to other views within the user interface. This means that all the views on the app’s user interface will adjust to any change, whether it be a different device or new content showing up on the screen. As you can imagine, constraints are a key element of Xcode’s Auto Layout functionality.

Life Before and During Auto Layout

Auto layout evolved as an “easier” way of designing the user interface. Prior to auto layout, programmers defined a view’s height, width and origin programmatically in the superview’s coordinate system. This meant that any time a change occurred, the programmer had to recalculate the size and position of all the effected views.

In an effort to simplify this process and limit the debugging, programers used autoresizing masks, which alter the view’s frame based on changes within the superview’s frame. However, this only takes into account changes from one device to another; any changes within the actual user interface will not be taken into account.

Rather than focusing on the size of each view, auto layout is unique because it defines the relationship of views relative to each other. These relationships are defined by constraints.

How To Set Constraints:

Once you have dragged all the views from the Object library onto the canvas and positioned and sized them to your liking, you can then start setting constraints. There are three ways to set constraints:

  1. Control-click one of the views and drag to the other (either on the canvas or on the document outline). Depending on whether you dragged horizontally or vertically, Xcode will provide either horizontal or vertical constraint options.
  • Though this is a very quick and simple way of setting constraints, it is not exact. The constraints are defined by the current location of each view on the canvas, which means that an object might look centered to the naked eye but mathematically it might be slightly skewed to one side.

2. Use one of the four tools (stack, align, pin, resolve) found in the bottom-right corner of the Editor window (below the canvas):

  • Stack: Easily distribute views either horizontally or vertically. For example, below I have four labels that I would like evenly spaced across the tableViewCell. First I selected the four labels, then I clicked the “stack” icon on the bottom-right corner. Within the attributes inspector of the stack view (found on the right of Xcode) I was able to align and equally distribute the labels based on spacing.
^Stack, Align, Pin and Resolve tools located here
  • Align: Useful when want to align either multiple views or align a single view either horizontally or vertically within the superview. First I highlighted the two labels I wanted to align and then I selected the align icon at the bottom of the Editor window. The top four constraint options align the views to an edge. The middle horizontal and vertical options align the views to their respective centers. The baselines constraint only appears when two or more views have baselines. Finally, the bottom two options set horizontal and vertical constraints with respect to the superview.
  • Pin: Allows you to “pin” both the size and the position of the view relative to other views. There are a few options with the pin tool -
  1. Similar to the align tool, the top four constraints allow you to pin the selected view’s top, leading, trailing or bottom edge to the view closest to it. The “constrain to margins” option determines whether the view will be constrained to the superview’s margins or edges.
  2. The width, height and aspect ratio (proportional relationship between view’s width and height) constraints automatically default to the view’s current values, respectively. The blue lines that you see in between the “Cute Cat!!” label and the picture and around the image are the constraints I have set so far.
  • Resolve: This tool provides guidance on how to fix the constraints you have set. The top options update the selected views, while the bottom half impacts all the views.

3. Let the Interface Builder set constraints for you. You can select this option by clicking the “Resolve” button on the bottom-right corner of the Editor window (referenced above) and selecting “Reset to Suggested Constraints”. It is imperative that the interface you designed at the beginning is accurate as the Interface Builder uses this layout to set constraints. Therefore, if a view is slightly skewed to one side, the Interface Builder will not know to move the view over, but rather it will constrain the view to that slightly off-centered position.

How to Choose the Best Method to Set Constraints?

Ultimately it comes down to preference and how complex you would like the user interface of your app to be. If you are building an app with a simple user interface, then allowing the Interface Builder to set constraints or control-dragging between views might be the best choice as they are quick and easy. A more complex user interface likely requires use of one or more of the tools found at the bottom of the Editor window.