Auto Layout: From Trailing to Leading

updated 9 months ago; latest suggestion 9 months ago

The tiny blue lines in Interface Builder look pretty self-explanatory: You can use them to define spacings between your views, give them a fixed width or a particular aspect ratio. But soon after creating your first simple layouts some of the blue lines turn red, indicating a conflicting layout. The more constraints you add the more pain it is to find the underlying problem. And it gets even worse when creating constraints in code or mixing Auto Layout with manual frame positioning.

Soon enough you'll find yourself digging through the Apple docs, trying out every method that sounds like it could solve your layout problem: setNeedsLayout(), layoutIfNeeded(), layoutSubviews(), setNeedsUpdateConstraints(), updateConstraintsIfNeeded(), updateConstraints(), setNeedsDisplay()... just to name a few of them. They all sound kind of similar. Some work in one case but not in the other. You never know why. It's like a magic black box.

The only way to dismantle this "magic" is to develop a deep understanding of the layout process, including the mathematics that's hidden behind the blue lines. This talk will give you the insight you need to effectively create beautiful layouts. You'll discover that constraints are linear equations by their true nature. You'll learn how the system resolves these equations to compute the actual frames and what the intrinsic content size is all about. You'll understand what constraint priorities are good for and how you can use them to make your layouts non-ambiguous.

Despite dealing with the very foundation of Auto Layout you won't be confronted with much code in this talk. It includes many animated visuals to let you develop a good intuition for the layout engine.


  • The proposal author responds 9 months ago

    😮 Good point! Thanks!

    I never realized it might have a second, negative meaning and thought it was a pretty good title because it was both referring to the actual topic "Auto Layout" and it also included a phrase similar to "from A to Z", indicating that the talk explains everything in the defined scope.

    But I guess you're right: The goal of this talk is not to let the listeners fall behind. ;) Updated the title as suggested.

  • 57fb64a41638ef202d6794593031c012b3e295ab?size=100x100 57fb64a41638ef202d6794593031c012b3e295ab suggests 9 months ago

    Great topic. My comment is actually on the title, regarding the common definitions of leading and training. Saying "from leading to trailing" is how you would describe, for instance, someone falling behind in a race.

    Someone might think 'well, Auto Layout goes from Leading to Trailing.' But that actually refers to the reading direction of the language. As I'm sure you're aware, the linear equations themselves are indifferent to this.

    So you might want to think about the title "Auto Layout: From Trailing to Leading." It's also the case that flipping the expected order can make phases more distinctive and memorable.

  • The proposal author responds 9 months ago

    Thanks for your feedback. Love the enthusiasm! :)

    I will not discuss many debugging tools in this talk because I think its sole purpose should be to help the audience understand the idea and the internal mechanics of Auto Layout. Despite the animations used in the presentation this is not a trivial topic and I'd rather use the limited time to thoroughly explain the layout process and what all these layout-related methods do rather than spending too much time on debugging tools.

    After all, you spend less time debugging layouts if you create flawless layouts in the first place which requires a solid understanding of the fundamentals of Auto Layout. Acquiring that solid understanding is the goal of this talk.

  • 8b2f2d3e6553c2b4048b93300959895ab76b4154?size=100x100 8b2f2d3e6553c2b4048b93300959895ab76b4154 suggests 9 months ago

    YES! YES! YES! I think this is a great idea.

    So many people fundamentally misunderstand how auto layout works and wind up fighting it instead of letting it work for them.

    I love the idea that this talk will include animations to explain the concepts.

    Will you highlight any of the tools for debugging constraints?