I'd like to end this series with a few tips and best practices for using Auto Layout in your projects. Along the way, I'll also point out common pitfalls when using Auto Layout and how to avoid them.

Use Stack Views

Stack views are a very welcome addition to Auto Layout. If you're targeting iOS 9 or higher, then you'd be crazy not to use them. Apple encourages developers to use stack views as much as possible and use explicit constraints if you need more control. Remember that it's perfectly fine to use stack views in combination with explicit constraints.

Setting the Frame

Apple has invested heavily in Auto Layout and it continues to do so. Auto Layout is indispensable if you want to make sure your application runs and looks great on every device it supports. Apple discourages developers from directly setting a view's frame, bounds, or center. While this may sometimes seem easier than working with constraints in code, carefully consider the tradeoffs.

By using Auto Layout, you're also future proofing your application. Apple isn't planning to replace Auto Layout with a new technology anytime soon. I hope this series has shown you that Auto Layout makes it easy to create layouts that are dynamic and look great on different form factors.

Think about the relationships between views instead of what the frames and bounds of the views in the view hierarchy should be. That should be your mindset when creating a user interface with Auto Layout.

Multiple Solutions

Auto Layout has a rich interface and there are often multiple solutions to create the same layout. That's fine. Keep in mind, however, that one solution is sometimes better than another solution.

Your focus should be on flexibility. For example, avoid fixing the width or height of a view. It's much better to work with a minimum or a maximum width or height if it's necessary to constrain the size of a view.

It pays off to carefully think about more complex layouts. In some situations, it's better to create constraints that describe the relationships between neighboring views instead of the superview. This makes the layout easier to update, making it more dynamic and flexible.

Localization

Auto Layout has built-in support for right-to-left languages. You can benefit from this feature by using leading and trailing constraints instead of left and right constraints. If a particular user interface element shouldn't be affected by the device language settings, then use left and right constraints instead.

Autoresizing Masks

When you create a view in code, the autoresizing mask of the view is by default translated into constraints at runtime. This often confuses developers that are new to Auto Layout. You can disable this feature by setting the translatesAutoresizingMaskIntoConstraints property to false.

Prototyping Constraints

Earlier in this series, I talked about prototyping constraints. Make sure you never ship an application with prototyping constraints. As the name implies, prototyping constraints should not be used in production.

Debugging Auto Layout

One of the most problematic issues when working with Auto Layout is debugging Auto Layout issues at runtime. While there's no silver bullet, it is getting better as Apple continues to improve its developer tools.

I've created a simple project to illustrate this issue. The example is very simple. We have a view that is pinned to the edges of the safe area layout guide. To trigger a conflict at runtime, we add a constraint in code in the view controller's viewDidLoad() method. The syntax isn't important because that's not the focus of this series. What you need to understand is that we add a constraint to the view that fixes the width of the view to 100 points. This will cause, in combination with the other constraints we added in Interface Builder, a conflict at runtime.

Even though the user interface looks fine, if we inspect the output in the console, we see that we have a problem. Xcode tells us that the layout engine is unable to simultaneously satisfy the constraints. In other words, we have an unsatisfiable layout.

The output is often very confusing. We see a bunch of constraints here but it's difficult to understand what constraints are referenced in the output. And remember, this is a very simple layout.

To make the message a little less confusing, it's helpful to add an identifier to each constraint. Revisit the main storyboard, select the red view, open the Size Inspector, double click the trailing edge constraint, and add an identifier to the constraint, for example, Trailing.

If we repeat this process for the other constraints, including the one we defined in code, the output should be a little bit less confusing. If we now inspect the output, we can see the identifier mentioned for each constraint. It's clear that we have an unsatisfiable layout because we have a leading constraint, a trailing constraint, and we fixed the width to 100 points.

Where to Go From Here

You now have a good understanding of the fundamentals of Auto Layout, which is essential for using Auto Layout in your projects. While there's still a lot to learn about Auto Layout, understanding more advanced Auto Layout concepts shouldn't be difficult with the foundation you now have.