plugin-103 cocoa auto layout

These are confidential sessions—please refrain from streaming, blogging, or taking pictures

Session 103

Cocoa Autolayout

Ken FerryCocoa Frameworks

1

Layout

2

Springs and Struts

3

AutolayoutSprings and Struts

4

Autolayout

5

Autolayout

6

Benefits

• Reduced need for in-code layout—IB goes further

• Improved in-code layout• Design flexibility• Localization• Resolution independence

7

Basics

Runtime

Layering

Debugging

Transition

Agenda

8

Interface Builder: Simplicity and expressivenessDemo

Kevin CatheyInterface Builder

9

Guide -> NSLayoutConstraint

10

y = m·x + b

11

view1.attr1 = m·view2.attr2 + b=

12

view1.attr1 = m·view2.attr2 + b=

acceptButton.left = cancelButton.right + 12

13

view1.attr1 = m·view2.attr2 + b=≥≤

@ priority

14

[NSLayoutConstraint constraintWithItem: attribute: relatedBy: toItem: attribute: multiplier: constant: ]

15

[NSLayoutConstraint constraintWithItem:acceptButton attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEquals toItem:cancelButton attribute:NSLayoutAttributeRight multiplier:1.0 constant:12]

16

ASCII Art!

17

Cancel Accept

18

Cancel Accept

19

[cancelButton]-[acceptButton]

20

[NSLayoutConstraint constraintsWithVisualFormat:@”[cancelButton]-[acceptButton]”_

options:0 metrics:nil views:viewsDictionary];

21

[cancelButton _]-[acceptButton]

22

[cancelButton _]- [acceptButton ]-

23

[cancelButton(72)]-12-[acceptButton(50)]

24

[cancelButton(72)]-12-[acceptButton(50)]

viewpredicate

connection

25

Standard Space

Inequality, Priority

Connection to Superview

Vertical Layout

Flush Views, Equal Widths

Multiple Predicates

Combination

[button]-[textField]

[wideView(>=60@700)]

|-5-[contentView]-5-|

V:[topView]-10-[bottomView]

[redBox][yellowBox(==redBox)]

[flexibleView(>=30,<=80)]

|-[Find]-[FindNext]-[FindField(>=20)]-|

Visual Format Language

[button]-[textField]

8 pts

26

Standard Space

Inequality, Priority

Connection to Superview

Vertical Layout

Flush Views, Equal Widths

Multiple Predicates

Combination

[button]-[textField]

[wideView(>=60@700)]

|-5-[contentView]-5-|

V:[topView]-10-[bottomView]

[redBox][yellowBox(==redBox)]

[flexibleView(>=30,<=80)]

|-[Find]-[FindNext]-[FindField(>=20)]-|

Visual Format Language

wideView

60 pts[wideView(>=60@700)]

27

Standard Space

Inequality, Priority

Connection to Superview

Vertical Layout

Flush Views, Equal Widths

Multiple Predicates

Combination

[button]-[textField]

[wideView(>=60@700)]

|-5-[contentView]-5-|

V:[topView]-10-[bottomView]

[redBox][yellowBox(==redBox)]

[flexibleView(>=30,<=80)]

|-[Find]-[FindNext]-[FindField(>=20)]-|

Visual Format Language

contentView 5 pts5 pts

superview

|-5-[contentView]-5-|

28

Standard Space

Inequality, Priority

Connection to Superview

Vertical Layout

Flush Views, Equal Widths

Multiple Predicates

Combination

[button]-[textField]

[wideView(>=60@700)]

|-5-[contentView]-5-|

V:[topView]-10-[bottomView]

[redBox][yellowBox(==redBox)]

[flexibleView(>=30,<=80)]

|-[Find]-[FindNext]-[FindField(>=20)]-|

Visual Format Language

topView

10 pts

bottomView

V:[topView]-10-[bottomView]

29

Standard Space

Inequality, Priority

Connection to Superview

Vertical Layout

Flush Views, Equal Widths

Multiple Predicates

Combination

[button]-[textField]

[wideView(>=60@700)]

|-5-[contentView]-5-|

V:[topView]-10-[bottomView]

[redBox][yellowBox(==redBox)]

[flexibleView(>=30,<=80)]

|-[Find]-[FindNext]-[FindField(>=20)]-|

Visual Format Language

redBox yellowBox

[redBox][yellowBox(==redBox)]

30

Standard Space

Inequality, Priority

Connection to Superview

Vertical Layout

Flush Views, Equal Widths

Multiple Predicates

Combination

[button]-[textField]

[wideView(>=60@700)]

|-5-[contentView]-5-|

V:[topView]-10-[bottomView]

[redBox][yellowBox(==redBox)]

[flexibleView(>=30,<=80)]

|-[Find]-[FindNext]-[FindField(>=20)]-|

Visual Format Language

flexibleView

30 pts80 pts

[flexibleView(>=30,<=80)]

31

Standard Space

Inequality, Priority

Connection to Superview

Vertical Layout

Flush Views, Equal Widths

Multiple Predicates

Combination

[button]-[textField]

[wideView(>=60@700)]

|-5-[contentView]-5-|

V:[topView]-10-[bottomView]

[redBox][yellowBox(==redBox)]

[flexibleView(>=30,<=80)]

|-[Find]-[FindNext]-[FindField(>=20)]-|

Visual Format Language

superview

8 pts8 pts 20 pts20 pts20 pts

|-[Find]-[FindNext]-[FindField(>=20)]-|

32

viewsDictionary

[NSLayoutConstraint constraintsWithVisualFormat:@”[cancelButton]-[acceptButton]”_

options:0 metrics:nil views: ];viewsDictionary

33

(gdb) po viewsDictionary{ acceptButton = "<NSButton: 0x4004c8660>"; cancelButton = "<NSButton: 0x4004a9ec0>";}

34

Basics

Runtime

Layering

Debugging

Transition

Agenda

35

Constraints at Runtime

-[NSView addConstraint:]-[NSView removeConstraint:] Superview

Button Button

36

Phases of Display

Display

37

Phases of Display

Display

38

Phases of Display

DisplayLayoutUpdate Constraints

39

Display

-[NSWindow displayIfNeeded]

-[NSView displayIfNeeded]

-[NSView drawRect:]

-[NSView needsDisplay]

-[NSView setNeedsDisplay:]

Update Constraints

-[NSWindow updateConstraintsIfNeeded]

-[NSView updateConstraintsForSubtreeIfNeeded]

-[NSView updateConstraints]

-[NSView needsUpdateConstraints]

-[NSView setNeedsUpdateConstraints:]

Phases of Display

Layout

-[NSWindow layoutIfNeeded]

-[NSView layoutSubtreeIfNeeded]

-[NSView layout]

-[NSView needsLayout]

-[NSView setNeedsLayout:]

40

Layout PhaseCalls -[NSView setFrame:]

• Code should modify constraints, not frames

41

Mutation and Animation

[NSAnimationContext!beginGrouping];[[NSAnimationContext!currentContext]!setDuration:1.0];[[constraint!animator]!setConstant:800];[NSAnimationContext!endGrouping];

42

Basics

Runtime

Layering

Debugging

Transition

Agenda

43

View vs Controller Responsibilities Reworking the layering

• setFrame: is monolithic■ If view state changes, layout never updates

• Controller layer has to know a lot about visual design of views

44

Baselines

• NSView:-(CGFloat)baselineOffsetFromBottom;

45

Alignment Rect

46

Alignment Rect

• NSView:- (NSEdgeInsets)alignmentRectInsets;

47

Intrinsic Content Size

• Intrinisic Content Size declares size of content■ Invalidate when attributes change

• Inverts classic Cocoa sizeToFit■ Greatly reduces burden on controller layer■ Lets view layer vary independently■ Makes work done in Interface Builder go further

48

Intrinsic Content Size

• External controller knows more about importance

-setContentCompressionResistancePriority:forOrientation:

-setContentHuggingPriority:forOrientation:

49

Intrinsic Content Size vs Fitting Size

Intrinsic Content Size Fitting Size

Override Call

Feeds data into layout system

Takes data out of layout system

50

Basics

Runtime

Layering

Debugging

Transition

Agenda

51

Working with Autolayout in codeDemo

Ken FerryCocoa Frameworks

52

Debugging

• Find bad view frame-NSShowAllViews YES

-[NSView _subtreeDescription]

• Bad view frame -> bad constraint-[NSView constraintsAffectingLayout:forOrientation:]

-[NSWindow visualizeConstraints:]

• Bad constraint -> bad code■ Instruments template, “Cocoa Layout”

53

Debugging

54

Basics

Runtime

Layering

Debugging

Transition

Agenda

55

Transition-[NSView translatesAutoresizingMaskIntoConstraints]

56

TransitionAutolayout activates lazily

LayoutUpdate Constraints Display

57

TransitionAutolayout activates lazily

LayoutUpdate Constraints Display

58

TransitionAutolayout activates lazily

LayoutUpdate Constraints Display

59

Review• Reduced need for in-code layout

■ Constraints accommodate dynamic content

• Improved in-code layout■ ASCII art, improved layering

• Design flexibility■ Baselines, alignment rect, intrinsic content size

• Localization■ Dynamic content, intrinsic content size

• Expressiveness■ Peer to peer relationships, inequalities, priority

60

Bill DudneyCocoa Evangelistdudney@apple.com

Autolayout Documentation, Sample Code, and Release NotesLog in and search for ‘Autolayout’ on Mac Dev Centerhttps://developer.apple.com/library/prerelease/mac/search/?q=Autolayout

Programming With ConstraintsThe Cassowary Linear Arithmetic Constraint Solving Algorithm http://www.cs.washington.edu/research/constraints/cassowary/

Apple Developer Forumshttp://devforums.apple.com

More Information

61

Using Interface Builder in Xcode Pacific HeightsTuesday 2:00PM

Related Sessions

62

Labs

Cocoa Lab App Frameworks Lab ATuesday 2:00-6:00PM

Cocoa and Autolayout Lab App Frameworks Lab AWednesday 9:00-11:00AM

Cocoa, Full Screen, and Aqua Lab App Frameworks Lab AWednesday 2:00-6:00PM

Cocoa, Auto Save, File Coordination, and Resume Lab App Frameworks Lab AThursday 2:00-4:00PM

63

64