Home iOS & Swift Books iOS Animations by Tutorials

8
Introduction to Auto Layout Written by Marin Todorov

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Auto Layout is a system of APIs that allow developers to express the dimension and position of UI elements in terms relative to the size of the screen and/or various device treats.

Auto Layout allows for a wide range of UI customizations, from slight variations of views’ widths to aesthetically fill the space of various screens, to completely rearranging the UI layout from rows to columns when switching between portrait and landscape orientations.

This chapter is for the readers that need an iOS Animations by Tutorials crash course on Auto Layout. You will need to have the skills taught in this chapter in order to proceed to the next one, where you’ll learn about animations in Auto Layout.

If you are already well-versed in building Auto Layout interfaces, you can skip ahead to Chapter 9, “Animating Constraints.”

For those of you out there still reading and eager to dive into using Auto Layout, imagine first, if you will, a world without Auto Layout…

You’re in charge of creating a new app for your company.

Your design, built with Interface Builder, would look like something like the following:

With the view positioned exactly as you want it, you then check its frame in the Size Inspector.

The position and size of your view are expressed in absolute values of points. That looks okay, so you launch the iPhone 8 Simulator to see your beautiful app in action:

What happened? You view is no longer centered. The problem is that the view’s position is expressed in points; you had designed your app in Interface Builder with the iPhone SE in mind, but since the iPhone 8 has a different screen resolution, your view appears off-center.

When you press Cmd + Right arrow to rotate the Simulator, the situation gets even worse:

The auto-resizing and re-positioning system in Interface Builder provides a partial solution to these kinds of problems. However, if you’re serious about creating dynamic and beautiful user interfaces that work with multiple device sizes and orientations, then you’ll need to start using Auto Layout.

Auto Layout to the Rescue

Since you’re no longer living in the Twilight Zone and Auto Layout is a reality, consider the same project from before, but this time using Auto Layout:

With Auto Layout it’s easy to indicate that the center.y property of the text view should equal the center.y value of its superview. This means the text view will always be centered within its superview – independent of the screen on which the app runs.

You could also choose to set the width of the text view to 90% of the width of its superview; this leaves a nice 5% margin of white space around the text.

With this simple set of rules in hand, Auto Layout happily rearranges the elements in your UI to look good on any device, in any orientation.

“So what’s the catch?” you might be thinking. Well, there isn’t a catch per se, it’s just that you need to think differently.

Once you place your app in the hands of Auto Layout, you no longer set the bounds, frame or center properties of a view. If you were to try, UIKit will force a layout pass on your UI using Auto Layout, which will set everything back to the positions and sizes determined by your constraints.

Not being able to change these properties means that you can’t animate those properties either! Therefore to move your views around or change their shape, you’ll instead alter the Auto Layout rules — or constraints — that define where a view appears as well as its size.

But before you can animate constraints, you first need to learn how to create constraints, and more importantly, how they work.

Auto Layout Constraints

Open the starter project for this chapter in Xcode, then build and run your project to see what it looks like:

Adding the Top Menu

First you’re going to add the top menu to the interface file. Visually, the menu will resemble a navigation bar.

Creating Your First Constraint

Select the view, and then click on the Pin button — the middle button — in the toolbar in the bottom right corner of Interface Builder (a.k.a. the square TIE fighter button):

View.Top = 1 * Safe Area.Top + 0

Constraining the Menu Height

Select your view again and click again on the Pin button to get the constraints popup. This time you want to create a constraint to fix the Height of the menu view to a constant value. In the popup, you will see the height of the view you set while positioning the view.

Adding the Menu Title

Drag a label onto the menu view, set its Text to Packing List, the Alignment to Center, and the Font size to 21.0 points. Your label should look as follows:

Resolving Auto Layout Issues

While designing in Interface Builder it’s possible that dragging views around can result in a difference between where views are placed in Interface Builder, and where your constraints would place them at runtime (i.e. the view is positioned manually on a spot that doesn’t reflect the applied constraints).

Adding a Menu Button

Drag a button onto the menu view. Set its Title to +, Font Size to 27.0, and align it as shown below:

Aligning Views With Auto Layout

Select the button and hold Ctrl on your keyboard as you drag with the mouse from the button to the label. Release the mouse button when the label activates and you will see a popup menu like so:

Adding and Constraining a Table View

Drag a table view and drop it in the empty view controller space:

Finalizing the UI

There’s just two more things to take care of before you move on: cleaning up what white bar at the top, and connecting the existing outlets to their corresponding UI elements.

Key Points

  • With Auto Layout, you don’t set the position and size of your views in absolute values but rather express them as relative to the size of the screen or other views in the view hierarchy.
  • You create new constraints between views by dragging between them while holding the Ctrl key and then choosing the type of constraint from a popup menu.
  • Once a view has its constrains set (fully determining its position and size) it will be automatically laid out on any screen size by Auto Layout.

Challenges

Your challenge this time is simple: simply head on in to the next chapter! By now you understand Auto Layout in some detail, which is an important prerequisite for the work you’re about to do in the next chapter, which deals with animations and Auto Layout.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

© 2022 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.