Fun With Auto Layout - Speaker Deck

Slide 1

Slide 1 text

Fun With Auto Layout C. Shnider @cshnider

Slide 2

Slide 2 text

Agenda • Stages I went through learning auto layout • Case Study • Stuff I want to learn next

Slide 3

Slide 3 text

not really a tutorial…

Slide 4

Slide 4 text

My ﬁrst auto layout app

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

iOS6 Xcode 4.x + Interface Builder

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Stage One Flail around until you get something working!

Slide 9

Slide 9 text

Flailing… • Over-speciﬁed Layouts • Mess around randomly with priorities • Lots of inequality constraints • “I don’t know why I need this, but it makes the debugger spew go away.”

Slide 10

Slide 10 text

Flailing… • Pixels end up in the correct place, but… • Layouts hard to maintain • Layouts hard to animate easily • Layouts do not describe higher-order relationships between views

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Stage Two Outside-In Layouts

Slide 13

Slide 13 text

More Optimal Than Before • Can cope cleanly with changes in size of outer view • Rotation on iOS or window resize on Mac • Layout captures higher-order relationships between views • Less random crap • Maybe still rely too much on ﬁxed width/height constraints

Slide 14

Slide 14 text

Stage Three Inside-Out / Outside-In Layouts

Slide 15

Slide 15 text

Yet More Optimal Than Before • Can cope cleanly with changes to elements within the view • Localization • User-generated content • Dynamic Type • Design Changes and other maintenance • Things shouldn’t bump into each other or clip unnecessarily.

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Case Study

Slide 18

Slide 18 text

LightSpeed Cloud for iPad    Login Screen

Slide 19

Slide 19 text

not a design discussion per se

Slide 20

Slide 20 text

The layout is an interesting problem all its own

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

“Like Game Center for iPad”

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

UIScrollView Auto Layout Rotation Keyboard Avoidance

Slide 29

Slide 29 text

Sample Project

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Almost no code

Slide 33

Slide 33 text

One constraint with   non-default priority

Slide 34

Slide 34 text

UIScrollView and Auto Layout • Apple TechNote 2154 • Two Approaches • HYBRID Make a subview with springs + struts, set contentSize to the size of that subview, and use auto layout only within the subview. • PURE Use Layout Constraints for everything!

Slide 35

Slide 35 text

UIScrollView and Auto Layout “Use constraints to lay out the subviews within the scroll view, being sure that the constraints tie to all four edges of the scroll view and do not rely on the scroll view to get their size.”

Slide 36

Slide 36 text

If you can’t rely on the ScrollView • Intrinsic Sizes of objects • Hard-coded values • Views outside the scrollview

Slide 37

Slide 37 text

Outer View size determined by the OS ! adjusts for portrait and landscape

Slide 38

Slide 38 text

Image View 0 pt space to superview in all directions

Slide 39

Slide 39 text

Scroll View 0 pt space to superview in all directions These constraints set scrollview frame only!

Slide 40

Slide 40 text

ScrollView contentSize

Slide 41

Slide 41 text

Layout Bands scrollView’s contentSize completely determined by the layout band constraints.

Slide 42

Slide 42 text

Layout Bands • Fixed Height • Explicit top/bottom space constraints to scroll view. • Width same as outer view width • Leading/trailing constraints to scroll view

Slide 43

Slide 43 text

“hang” other content on the outside of the scrollView

Slide 44

Slide 44 text

Extra Views It’s safe to tie these to the edges of the scrollView

Slide 45

Slide 45 text

Layout of Text Elements

Slide 46

Slide 46 text

Layout Band try and encode much of the smarts in just one of the bands

Slide 47

Slide 47 text

UITextField

Slide 48

Slide 48 text

UITextField • Center Vertically in Layout Band • Fixed trailing space to superview • Leading edge tied to horizontal center of layout band (with offset) • looks decent landscape and portrait

Slide 49

Slide 49 text

UITextField • Align Baseline to text ﬁeld • Fixed trailing space to text ﬁeld • >= “aqua” leading space to superview • left-align text UILabel

Slide 50

Slide 50 text

UITextField • Text Field - same width and leading- align • Labels - same width and leading-align • allows labels to expand and still line-up UILabel UITextField UILabel

Slide 51

Slide 51 text

UITextField • Really Long Labels???? • Weaken the left-align constraint for the text ﬁeld, allowing the width to shrink.

Slide 52

Slide 52 text

Demo

Slide 53

Slide 53 text

Things to Learn Next • multipliers!! • …together with constants!! • Custom container views that implement -intrinsicContentSize • alignmentRects

Slide 54

Slide 54 text

Thank You! https://github.com/chucks/layoutui