Auto Layout is Apple's system for building user interfaces that adapt to different screen sizes and orientations. It uses constraints to define relationships between views and can require some trial and error to get right. The document discusses tips for using Auto Layout including thinking locally and relatively, finding a mentor, and debugging by deleting all constraints and starting over. It also provides additional resources for learning more about Auto Layout.

1. Step Christopher @randomstep
Who uses Auto Layout? Who likes it? Who … doesn’t like it?

2. Auto Layout
Get Your Priorities Straight
Not going to sell you on it. Only have an hour after all. However, if you don’t learn a new trick, my D&D character will eat his hat.
We are going to use and abuse constraints, to push the system and our understanding as far as we can.

3. https://github.com/bignerdranch/
auto-layout-priorities-2016

4. This is what we will work towards. This layout was accomplished with one set of constraints, entirely in a Storyboard scene, without even using size classes or stack views.
For our purpose today (using and abusing the priorities in our constraint system), this is ok. But if I were shipping this for real, stack views would be a better way to accomplish a good chunk of the above layout.

5. This is what we will start with. Some constraints already in place - but not quite enough of them.

6. “this is a math system. like all math systems, it
requires you to be correct and doesn’t spare
your feelings"
John Gallagher
mattmatt
“i feel like there is too fine of a line between under-constraining and over-constraining
and there is little debug information given to us to figure out the difference
jgallagher
i like auto layout in general, but it’s definitely not forgiving
the thing you said above is perfectly reasonable
basically, “this is a math system. like all math systems, it requires you to be correct and doesn’t spare your feelings"
mattmatt
but i have so many feels
schristopher
missed the AL discussion. I think Swift and AL have a similar set of problems in this regard.
jeremy
The under/overconstraining bit is very true for any sort of constraint system. To simplify to equalities, it’s fully constrained when there are N constraints, so there are N-1 ways to be under-constrained (and more
if you allow redundant constraints!), and there’s no limit on how many ways you can be over-constrained. :confused:
schristopher
Swift’s type system is also a set of constraints that the compiler solves. A mistake anywhere can cause weird results in other places because the inferences propagate, and wrong inferences propagate in unintuitive
ways.
Both of these systems can benefit from better heuristics, and a supporting system that understands it is not always right but instead ‘best effort’.

7. Picture a square, in the middle of this screen. Exactly in the center. Do you see it? Can you imagine it exactly?

8. Might be small, or huge. Or do … this. Which is what Apple usually picks. Yes, thanks computer, that is a good guess. That is exactly what I wanted.
Here is the first key to success: if you can call your friend and describe the layout, you can do AL.

9. 2 Horizontal2 Vertical

10. Anchor Views
Let’s get right to the good stuff.

11. [demo of play controls]
Remote control interface. If we built the constraints right (takes me less than 5 minutes, I usually do it live buuuut… ) then we can make changes, and the whole interface reacts.
Play button (in center) is the anchor view here.
Forms are natural too, the label and text field at top are often the anchor views.

12. Tips (White Belt)
Think Locally (where should this view get its size
and position)
Think Relatively
Think Declaratively
Find a Sensei
Don’t try to do AL on your own if you can avoid it. Find someone who knows it really well - they will probably be happy to help you. Make sure to ask and try to understand how and why they suggest what they do - don’t just let
them fix your project and leave. AL is not an intuitive system.

13. Debug (White Belt)
Delete all constraints
Start over

14. Wish I had a menu like this for my life. “Fix my issues.”

15. Declarative Constraint System
Express the logic of a computation without
describing the control flow
Or, describe what the program must accomplish in terms of the problem domain, rather than describe how to accomplish it as a sequence of the programming language primitives (https://en.wikipedia.org/wiki/
Declarative_programming)

16. Declarative Constraint System
iterative algorithms that work towards ever more
ideal solutions, based on rules the solution must
satisfy.
constraint programming is a programming paradigm wherein relations between variables are stated in the form of constraints. (https://en.wikipedia.org/wiki/Constraint_programming)
- "Constraint solvers are iterative algorithms that work towards ever more ideal solutions, often using some variant of Dantzig's simplex method. They are primarily of interest in situations where it's possible to easily set up a set
of rules which you would like a solution to adhere to, but when it is very difficult to consider all of the possible solutions yourself." (https://github.com/slightlyoff/cassowary.js)
Specifically AL uses Cassowary - "Cassowary is an incremental constraint solving toolkit that efficiently solves systems of linear equalities and inequalities. Constraints may be either requirements or preferences. Client code
specifies the constraints to be maintained, and the solver updates the constrained variables to have values that satisfy the constraints."(http://constraints.cs.washington.edu/cassowary/)

17. Tips (Brown Belt)
• Intrinsic Constraints
• Compression & Hugging
• Partition (stack views!)
(what should this view’s size or position be relative to)
Avoid fixed or magic numbers as much as possible. For example you should almost never set an absolute height on a label. Usually you should adjust the compression resistance or content hugging priorities instead. Note that
as soon as you have more than one label in a constraint relationship (vertical or horizontal), you *must* adjust hugging/compression to get an unambiguous layout.

18. Debug (Brown Belt)
Preview pane: to see multiple sizes
IB Structure and constraint inspectors: to
understand issues
Debug View Hierarchy (Reveal and Spark
Inspector): to see runtime results

19. Debug (Black Belt)
IB simulated sizes: force issues
Cocoa Layout Instrument: inspect flow
This is when you can really help other people, debug other people’s constraints.
Here you start to really master the procedural aspects of what would ideally be a more stateless system. I’m still working on this level personally.
Layout Instrument - I have used it in anger.

20. Cocoa Layout Instrument
*large* stream of events. Search is really helpful - helps to log out object addresses so you can find the right thing. Also can search by “H:” or “V:” to narrow.
Great news! For text views and labels, the text string is now included to help identify the object.

21. Cocoa Layout Instrument
For a given event, can see the triggering stack trace.
Like most instruments, Mostly helpful if you have specific questions to ask.

22. Tips (Black Belt)
Max and Min (>= and <= relations)
Priorities: Preferred
Cascading Priorities
Avoid fixed or magic numbers as much as possible, especially duplicated.
If it takes you more than an hour in Interface Builder to configure your views or layout constraints, your problem is too complex. It probably belongs in code, where you can iterate more. Also Auto Layout isn’t for every problem
- Apple has given us several other layout technologies, and you’ve seen others shown here at the conference. I plan to spend more time with AsyncDisplayKit myself.

23. Robust Layouts
Often a view will have *at least* 3 constraints per dimension (or side). A minimum spacing from something else, a max spacing from something else, and a preferred size or spacing. Sometimes it will be 2-3 proportional heights
or widths instead.

24. And if you get fancy enough…
This is an “anchor view”, which means a number of the other views draw their size from it. So it has a ton of constraints due to that. But when I first created it, I did not need nearly so many.

25. Mostly Declarative
A declarative girl in an imperative world. “setNeedsLayout()”, “setNeedsDisplay()”, “viewWillTransitionToSize()”, and other methods require you to interact at the right time rather than just declaring the way things should be.
YY Widget/TodayViewController.h | 2 +-
YY Widget/TodayViewController.m | 124 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------

26. More Resources
• Apple: Adopting Auto Layout Guide
• WWDC Introduction to Auto Layout (2012 - 202)
• WWDC Mysteries of Auto Layout (2015, parts 1 and
2)
• Autolayout for everyone - NSSpain 2014
• Technical Note TN2154 - UIScrollView And
Autolayout
## Additional Resources
- Apple also provides extensive documentation on Auto Layout. One such example is the article [Adopting Auto Layout](https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/
AdoptingAutoLayout/AdoptingAutoLayout.html)
- [WWDC Introduction to Auto Layout](https://developer.apple.com/devcenter/download.action?path=/videos/wwdc_2012__hd/session_202__introduction_to_auto_layout_for_ios_and_os_x.mov)
- [WWDC Auto Layout by Example](https://developer.apple.com/devcenter/download.action?path=/videos/wwdc_2012__hd/session_232__auto_layout_by_example.mov)
- [WWDC Mastering Auto Layout](https://developer.apple.com/devcenter/download.action?path=/videos/wwdc_2012__hd/session_228__best_practices_for_mastering_auto_layout.mov)
- Another talk on Auto Layout from 2014's NSSpain conference: ["Autolayout for everyone" by Krzysztof Kucharewicz](http://vimeo.com/109222175)
- [Big Nerd Ranch blog post on creating adoptive UIs for iOS 6 and 7.](http://www.bignerdranch.com/blog/designing-interfaces-ios-6-ios-7/)
- ["iOS Auto Layout Demystified" by Erica Sadun](http://www.amazon.com/Layout-Demystified-Edition-Mobile-Programming/dp/0321967194). - Great book from Erica Sadun, another prominent iOS developer, on learning Auto
Layout by example.
- [Technical Note TN2154 - UIScrollView And Autolayout](https://developer.apple.com/library/ios/technotes/tn2154/_index.html)
- [Visual Format Language](https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html)
- [Masonry](https://github.com/Masonry/Masonry) - Third party library to assist in writing Auto Layout constraints programmatically.
- [FLKAutoLayout](https://github.com/floriankugler/FLKAutoLayout) - UIView category which makes it easy to create layout constraints in code.
- [Lyt](https://github.com/robotmedia/Lyt) - Categories to make autolayout (more) readable and less verbose. For iOS and OS X.

27. More Resources
• https://github.com/Masonry/Masonry
• https://github.com/floriankugler/FLKAutoLayout
• https://github.com/robotmedia/Lyt
• http://bignerdranch.com/blog
## Additional Resources
- Apple also provides extensive documentation on Auto Layout. One such example is the article [Adopting Auto Layout](https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/
AdoptingAutoLayout/AdoptingAutoLayout.html)
- [WWDC Introduction to Auto Layout](https://developer.apple.com/devcenter/download.action?path=/videos/wwdc_2012__hd/session_202__introduction_to_auto_layout_for_ios_and_os_x.mov)
- [WWDC Auto Layout by Example](https://developer.apple.com/devcenter/download.action?path=/videos/wwdc_2012__hd/session_232__auto_layout_by_example.mov)
- [WWDC Mastering Auto Layout](https://developer.apple.com/devcenter/download.action?path=/videos/wwdc_2012__hd/session_228__best_practices_for_mastering_auto_layout.mov)
- Another talk on Auto Layout from 2014's NSSpain conference: ["Autolayout for everyone" by Krzysztof Kucharewicz](http://vimeo.com/109222175)
- [Big Nerd Ranch blog post on creating adoptive UIs for iOS 6 and 7.](http://www.bignerdranch.com/blog/designing-interfaces-ios-6-ios-7/)
- ["iOS Auto Layout Demystified" by Erica Sadun](http://www.amazon.com/Layout-Demystified-Edition-Mobile-Programming/dp/0321967194). - Great book from Erica Sadun, another prominent iOS developer, on learning Auto
Layout by example.
- [Technical Note TN2154 - UIScrollView And Autolayout](https://developer.apple.com/library/ios/technotes/tn2154/_index.html)
- [Visual Format Language](https://developer.apple.com/library/ios/documentation/userexperience/conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html)
- [Masonry](https://github.com/Masonry/Masonry) - Third party library to assist in writing Auto Layout constraints programmatically.
- [FLKAutoLayout](https://github.com/floriankugler/FLKAutoLayout) - UIView category which makes it easy to create layout constraints in code.
- [Lyt](https://github.com/robotmedia/Lyt) - Categories to make autolayout (more) readable and less verbose. For iOS and OS X.

28. Big Nerd Ranch Guides
We also have a bunch of Big Nerd Ranch Guides. The latest iOS Programming books have some good chapters that will cover the fundamentals of Auto Layout and Stack Views, and our Advanced course goes a bit further. If you
want to get good, get our book or course.

29. Questions?

30. step@bignerdranch.com @randomstep
Who uses Auto Layout? Who likes it? Who … doesn’t like it?

31. https://github.com/bignerdranch/
auto-layout-priorities-2016