Auto Layout Priorities - CocoaConf 2016 Seattle

of 32/32
Step Christopher @randomstep Who uses Auto Layout? Who likes it? Who … doesn’t like it?
  • date post

    14-Jan-2017
  • Category

    Engineering

  • view

    228
  • download

    6

Embed Size (px)

Transcript of Auto Layout Priorities - CocoaConf 2016 Seattle

  • Step Christopher @randomstep

    Who uses Auto Layout? Who likes it? Who doesnt like it?

  • Auto Layout

    Get Your Priorities Straight

    Not going to sell you on it. Only have an hour after all. However, if you dont 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

    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 doesnt spare your feelings"

    John Gallagher

    mattmatti 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 its 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 doesnt 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, its 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 theres no limit on how many ways you can be over-constrained. :confused:schristopherSwifts 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

    Lets 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

    Dont 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 - dont 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 views 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 peoples constraints.Here you start to really master the procedural aspects of what would ideally be a more stateless system. Im 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
  • 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.

    https://github.com/Masonry/Masonryhttps://github.com/floriankugler/FLKAutoLayouthttps://github.com/robotmedia/Lythttp://bignerdranch.com/blog

  • 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?

  • [email protected] @randomstep

    Who uses Auto Layout? Who likes it? Who doesnt like it?

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

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