Step Christopher @randomstep

Who uses Auto Layout? Who likes it? Who … doesn’t like it?

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.

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

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.

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

“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-constrainingand there is little debug information given to us to figure out the difference

jgallagheri like auto layout in general, but it’s definitely not forgivingthe 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"mattmattbut i have so many feels

schristophermissed the AL discussion. I think Swift and AL have a similar set of problems in this regard.

jeremyThe 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:schristopherSwift’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’.

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

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.

2 Horizontal2 Vertical

Anchor Views

Let’s get right to the good stuff.

[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.

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.

Debug (White Belt)

Delete all constraints

Start over

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

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)

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/)

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.

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

Debug (Black Belt)

IB simulated sizes: force issuesCocoa 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.

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.

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.

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.

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.

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.

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 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------

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.

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.

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.

Questions?

step@bignerdranch.com @randomstep

Who uses Auto Layout? Who likes it? Who … doesn’t like it?

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