Quick Storyboard Auto Layout Tips

If you’re one of the many programmers who control all the items in your apps by manually entering constraints in code, it’s time to take a closer look at Auto Layout. Mastering the basics of Auto Layout can make your job a lot easier. 

Simply put, Auto Layout gives Xcode information on how to position items on the screen when the app runs. Give it the basic information for controlling how an item should behave, and you will have an app that runs well in many different scenarios.

Supplying too many constraints will cause conflicts between the constraints, which is where many of the run­time conflicts arise. Supply too few? Xcode won’t know how to handle that item.

That said, let’s go over the basics of Auto Layout.

Four letters hold the key to most constraints: X, Y, W and D. Obviously, X is the horizontal position from the left side of the view. Y is the vertical position from the top of the view. W is what determines how wide the item is, and D determines its depth.

By trial and error (ugh!) I’ve found that using the smallest number of constraints works best. If you use too few, however, warnings will appear that may be difficult to understand. (We’ll cover a few of those.) 

Your goal should be to see “No Auto Layout Issues.” Xcode will present color-coded cues when there’s a problem. Red indicates there’s a conflict, and Yellow means you’ll need to add an additional constraint to make the item’s position understood.

Typically, I use X and Y as the main constraints. I don’t constrain an item to one below it, as that will typically cause conflicts. Simplicity is the key.

Take a look at the storyboard view in Xcode. At the bottom of the view, between the Document and Utility panels, you’ll see this:

The button on the left shows or hides the Document Outline. The 3 most important for the constraints are ones on the right: Align, Pin, and Resolve. Clicking on each shows a popup menu.

Let’s use a Label as an example. Drag one onto your view from the Utilities panel. Let’s give Xcode information about how to display this item. Select your label and click Align (second from the left) and check “Horizontally in Container.” Don’t forget to click the button that says “Add 1 Constraint.” (No constraint is added unless you click this button.)

Next, you’ll need to add a Y constraint. (The X constraint is handled by the horizontal centering.) Make sure your label is selected, then click the Pin button. (It’s the one that looks like a TIE fighter from Star Wars.) At the top, just under “Add New Constraints,” you’ll see a text box with an arrow. Click the arrow and select the label’s containing view. For this example, we’ll pin the label offset 192 pixels from its container view. Type 192 in the box, then click the hashed I-beam below the text box. It will turn solid red. If you’d like to keep the label a specific size, check the boxes next to Width and Height. Then click the “Add Constraints” button at the bottom of the popup, which will show how many constraints you are adding.
A-1In this view, the Utilities panel is showing the Constraints for the Image View. Notice that it has five Constraints. I entered the Align Center, Width, Height and Top Space, which is the Y. Bottom Space, which is the distance to the next object, is added by Xcode to keep the distance between the Image View and the Text Field. This will only occur when an item is added below a previously added item, for which you’ve added constraints.

If you don’t add enough constraints, Xcode will display a red line. Conflicting constraints will cause a yellow line to appear. Blue lines (shown below) mean you’re good to go. To get more information on the alerts, click the small red or yellow arrow at the top right of the Document outline. No arrow? No conflicts! That’s what we’re aiming for.

C1 In the screen capture below, I have only entered an X value for a button. The “error” line is Xcode saying, “Hey, I need a Y”.

EThe screen capture below shows the last panel, which is for resolving conflicts. My suggestion: DON’T allow Xcode to resolve these issues! The program really doesn’t know what you want, and could introduce constraints that won’t cause the app to behave in the way you expect. Those errors can be tricky to track down. It’s far better to figure out exactly where you want the item to be positioned on the view, and tell Xcode. Remember … X, Y, W & D.

CIf you run the app and see unexpected or unpredictable behavior, it’s better to clear the constraints on that item and start again. Attempting to alter and update constraints can be frustrating, as it can introduce new problems. Instead, select the item, and click on the Resolve button (all the way on the right). Under “Selected Views,” click “Clear Constraints.”

This is by no means all you can do with Auto Layout. Rather, it’s a set of tips to get you started down the road of understanding. We’ll cover Auto Layout in more detail in future tutorials. In the meantime, play around with it so you can become familiar with setting constraints and resolving conflicts. Happy coding!

Author Photo--Charlyn KeatingAbout the Author: Charlyn Keating is equal parts business, creative and tech. She brings proven success in online marketing to the app and games world, helping you level up so you can earn the players and profit you deserve.


Sign up for more Tips + Techniques delivered straight to your inbox, free!