iOS Auto Layout Demystified, Second Edition (2014)

Preface

Auto Layout reimagines the way developers create user interfaces. It creates a flexible and powerful system that describes how views and their content relate to each other and to the windows and superviews they occupy. In contrast with older design approaches, this technology offers incredible control over layout, with a wider range of customization than frames, springs, and struts allow. Somewhat maligned by exasperated developers, Auto Layout has gained a reputation for difficulty and frustration, particularly when used through Interface Builder (IB).

That’s why this book exists. You’re about to discover Auto Layout mastery by example, with plenty of explanations and tips. Instead of struggling with class documentation, you’ll learn in simple steps how the system works and why it’s far more powerful than you first imagined. You’ll read about common design scenarios and discover best practices that make Auto Layout a pleasure rather than a chore to use.

You’ll explore many of the strengths of Auto Layout as well. It’s a technology that has a lot going for it:

Auto Layout is declarative. You express the interface behavior without worrying about how those rules get implemented. Just describe the layout; let Auto Layout calculate the frames.

Auto Layout is descriptive and relational. You describe how items relate to each other onscreen. Forget about sizes and positions. What matters is the relationships.

Auto Layout is centralized. Whether in IB or a layout section in your own code, Auto Layout rules tend to migrate to a single nexus, making it easier to inspect and debug.

Auto Layout is dynamic. Your interface updates as needed to respond to user- and application-sourced changes.

Auto Layout is localizable. Conquer the world with Auto Layout. It’s built to adapt to varying word and phrase lengths while maintaining interface integrity.

Auto Layout is expressive. You can describe many more relationships than you could in the older springs-and-struts system. Go beyond “hug this edge” or “resize along this axis” and express the way a view relates to other views, not just its superview.

Auto Layout is incremental. Adopt it on your own timescale. Add it to just parts of your apps and parts of your interfaces, or jump in feet first for a full Auto Layout experience. Auto Layout offers backward compatibility, enabling you to build your interfaces using all springs-and-struts, all constraints, or a bit of both.

This book aims to be inspirational. I’ve tried to show examples of nonobvious ways to use Auto Layout to build interactive elements, animations, and other features beyond what you might normally encounter in IB. These chapters provide a launch pad for Auto Layout work and introduce unfamiliar features that expand your design possibilities.

As the title suggests, this book is primarily targeted at iOS developers. I have included OS X coverage where possible. So, if you’re an OS X developer, you’re not left out completely in the cold. I live primarily in the iOS world. Please keep that in mind as you read.

Auto Layout has made a profound difference in my day-to-day development. I wrote this book hoping it will do the same for you. It’s my intention that you walk away from this book with a solid grounding in Auto Layout. And, if I’m lucky, the book will provide you with a “Eureka!” moment or two to lead you forward.

—Erica Sadun, July 2013

How This Book Is Organized

This book offers practical Auto Layout tutorials and how-tos. Here’s a rundown of what you’ll find in this book’s chapters:

Chapter 1, “Introducing Auto Layout”—Ready to get started? This chapter explains the basic concepts that lie behind Auto Layout. You’ll read about why you should be using Auto Layout in your apps and why it’s essentially a constraint satisfaction system.

Chapter 2, “Constraints”—With Auto Layout, you build interfaces by declaring rules about views. Each layout rule you add creates a requirement about how part of the interface should be laid out. These rules are ranked based on a numeric priority that you supply to the system, and Auto Layout builds your interface’s visual presentation accordingly. This chapter introduces constraints and the rules of layout, and it explains why your rules must be unambiguous and satisfiable.

Chapter 3, “Interface Builder Layout”—Working with constraint-based design in Interface Builder can sometimes be a frustrating experience for developers new to Auto Layout. Fully updated for iOS 7 and Xcode 5, this chapter teaches you the tricks you need for making IB create exactly the interface you want.

Chapter 4, “Visual Formats”—This chapter explores what visual constraints look like, how you build them, and how to use them in your projects. You’ll read how metrics dictionaries and constraint options extend visual formats for more flexibility. And you’ll see numerous examples that demonstrate these formats and explore the results they create.

Chapter 5, “Debugging Constraints”—Constraints can be maddeningly opaque. The code and interface files you create them with don’t lend themselves to easy perusal. It takes only a few “helpful” Xcode log messages to make some developers start tearing out their hair. This chapter is dedicated to shining light on the lowly constraint and helping you debug your work.

Chapter 6, “Building with Auto Layout”—Designing for Auto Layout changes the way you build interfaces. It’s a descriptive system that steps away from exact metrics such as frames and centers. You focus on expressing relationships between views, describing how items follow one another onscreen. You uncover the natural relationships in your design and detail them through constraint-based rules. This chapter introduces the expressiveness of Auto Layout design, spotlighting its underlying philosophy and offering examples that showcase its features.

Chapter 7, “Layout Solutions”—The chapters leading up to this one focus on know-how and philosophy. This chapter introduces solutions. You’ll read about a variety of real-world challenges and how Auto Layout provides practical answers for day-to-day development work. The topics are grab bag, showcasing requests developers commonly ask about.

Appendix A, “Answers to Exercises”—This appendix provides the answers to all the chapter-ending exercises.

About the Sample Code

This book follows the trend I started in my iOS Developer’s Cookbook series. This book’s iOS sample code always starts off from a single main.m file, where you’ll find the heart of the application powering the example. This is not how people normally develop iOS or Cocoa applications or how they should be developing them, but it provides a great way of presenting a single big idea. It’s hard to tell a story when readers must search through many files and try to find out what is relevant and what is not. Offering a single launching point concentrates the story, allowing access to an idea in a single chunk.

The presentation in this book does not produce code in a standard day-to-day best-practices approach. Instead, it offers concise solutions that you can incorporate into your work as needed. For the most part, the examples for this book use a single application identifier: com.sadun.helloworld. This avoids clogging up your iOS devices with dozens of examples at once. Each example replaces the preceding one, ensuring that your home screen remains relatively uncluttered. If you want to install several examples simultaneously, you can simply edit the identifier, adding a unique suffix, such as com.sadun.helloworld.table-edits.

You can also edit the custom display name to make the apps visually distinct. Your iOS Team Provisioning Profile matches every application identifier, including com.sadun.helloworld. This allows you to install compiled code to devices without having to change the identifier; just make sure to update your signing identity in each project’s build settings.

There is a smattering of OS X code in this book as well. This is not an OS X–centered book (as you can guess from the title), but I’ve covered OS X topics where it makes sense to do so. I spend the majority of my time in iOS, so please forgive any OS X faux pas I make along the way and do drop me notes to help me correct whatever I’ve gotten wrong.

Getting the Sample Code

You’ll find the source code for this book at http://github.com/erica/Auto-Layout-Demystified on the open-source GitHub hosting site. There, you’ll find a chapter-by-chapter collection of source code that provides working examples of the material covered in this book.

As explained later, you can get the sample code either by using git directly or by clicking GitHub’s download button. It was at the right center of the page when I wrote this book. It enables you to retrieve the entire repository as a ZIP archive or tarball.

Getting Git

You can download this book’s source code by using the git version control system. An OS X implementation of git is available at http://code.google.com/p/git-osx-installer. OS X git implementations include both command-line and GUI solutions, so hunt around for the version that best suits your development needs.

Getting GitHub

GitHub (http://github.com) is the largest git-hosting site, with more than 150,000 public repositories. It provides both free hosting for public projects and paid options for private projects. With a custom Web interface that includes wiki hosting, issue tracking, and an emphasis on social networking of project developers, it’s a great place to find new code or collaborate on existing libraries. You can sign up for a free account at the GitHub Web site, which then allows you to copy and modify this repository or create your own open-source iOS projects to share with others.

Contribute!

Sample code is never a fixed target. It continues to evolve as Apple updates its SDK and the Cocoa Touch libraries. Get involved. You can pitch in by suggesting bug fixes and corrections and by expanding the code that’s on offer. GitHub allows you to fork repositories and grow them with your own tweaks and features and then share them back to the main repository. If you come up with a new idea or approach, let me know. My team and I are happy to include great suggestions both at the repository and in the next edition of this book.