plugin-103 cocoa auto layout
TRANSCRIPT
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 [email protected]
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