Tweet
Tweet

Slide 1

Slide 1 text

These are confidential sessions—please refrain from streaming, blogging, or taking pictures for OS X and iOS Session 228 Peter Ammon AppKit Engineer Best Practices for Mastering Auto Layout

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Make your layouts simpler to write simpler to modify easier to understand

Slide 4

Slide 4 text

Auto Layout

Slide 5

Slide 5 text

Auto Layout

Slide 6

Slide 6 text

Auto Layout

Slide 7

Slide 7 text

Auto Layout Identical APIs!

Slide 8

Slide 8 text

Auto Layout Identical APIs!

Slide 9

Slide 9 text

Auto Layout

Slide 10

Slide 10 text

Auto Layout “View”

Slide 11

Slide 11 text

Auto Layout “View” NSView UIView

Slide 12

Slide 12 text

NSLayoutConstraint

Slide 13

Slide 13 text

•One new class—NSLayoutConstraint NSLayoutConstraint

Slide 14

Slide 14 text

•One new class—NSLayoutConstraint •Constraints express geometric properties of views NSLayoutConstraint

Slide 15

Slide 15 text

•One new class—NSLayoutConstraint •Constraints express geometric properties of views NSLayoutConstraint foo foo.width = 120

Slide 16

Slide 16 text

•One new class—NSLayoutConstraint •Constraints express geometric properties of views •Constraints also express geometric relationships between views NSLayoutConstraint foo foo.width = 120

Slide 17

Slide 17 text

•One new class—NSLayoutConstraint •Constraints express geometric properties of views •Constraints also express geometric relationships between views NSLayoutConstraint foo foo.width = 120 foo foo.width = bar.width bar

Slide 18

Slide 18 text

•One new class—NSLayoutConstraint •Constraints express geometric properties of views •Constraints also express geometric relationships between views NSLayoutConstraint foo foo.width = 120 foo foo.width = bar.width bar •Relationships have a coefficient and a constant

Slide 19

Slide 19 text

•One new class—NSLayoutConstraint •Constraints express geometric properties of views •Constraints also express geometric relationships between views NSLayoutConstraint foo foo.width = 120 foo foo.width = bar.width bar •Relationships have a coefficient and a constant foo.width = bar.width * 2 - 20

Slide 20

Slide 20 text

NSLayoutConstraint

Slide 21

Slide 21 text

NSLayoutConstraint •Constraints can be equalities or inequalities

Slide 22

Slide 22 text

NSLayoutConstraint •Constraints can be equalities or inequalities foo foo.width >= 120

Slide 23

Slide 23 text

NSLayoutConstraint •Constraints can be equalities or inequalities foo foo.width >= 120 •Constraints have priorities

Slide 24

Slide 24 text

NSLayoutConstraint •Constraints can be equalities or inequalities foo foo.width >= 120 •Constraints have priorities foo foo.width = 120 with priority 500 foo.width = 75 with priority 1000

Slide 25

Slide 25 text

NSLayoutConstraint •Constraints can be created three ways ■ Interface Builder ■ Visual format language ■ Base API •Prefer this order

Slide 26

Slide 26 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 27

Slide 27 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 28

Slide 28 text

Thinking in Constraints •Auto Layout can be used like springs and struts •But you get the most benefits from a shift in thinking •Let your layouts becomes declarative

Slide 29

Slide 29 text

Thinking in Constraints

Slide 30

Slide 30 text

Thinking in Constraints Q W E R T Y

Slide 31

Slide 31 text

Thinking in Constraints Q W E R T Y padding

Slide 32

Slide 32 text

Thinking in Constraints Q W E R T Y padding containerWidth

Slide 33

Slide 33 text

Thinking in Constraints Q W E R T Y Springs and Struts padding containerWidth

Slide 34

Slide 34 text

Thinking in Constraints Q W E R T Y Springs and Struts padding keyWidth = containerWidth / keyCount - padding * (keyCount + 1) / keyCount containerWidth

Slide 35

Slide 35 text

Thinking in Constraints Q W E R T Y Springs and Struts padding keyOffset = padding + keyIndex * (keyWidth + padding) keyWidth = containerWidth / keyCount - padding * (keyCount + 1) / keyCount containerWidth

Slide 36

Slide 36 text

Springs and Struts Thinking in Constraints Q W E R T Y Relationships

Slide 37

Slide 37 text

Thinking in Constraints Auto Layout Q W E R T Y Relationships

Slide 38

Slide 38 text

Thinking in Constraints Auto Layout Q W E R T Y Relationships

Slide 39

Slide 39 text

Thinking in Constraints Auto Layout Q W E R T Y Q.width = container.width / keyCount - padding * (keyCount + 1) / keyCount Relationships

Slide 40

Slide 40 text

Thinking in Constraints Auto Layout Q W E R T Y Q.width = container.width / keyCount - padding * (keyCount + 1) / keyCount Relationships

Slide 41

Slide 41 text

Thinking in Constraints Auto Layout Q W E R T Y Q.width = container.width / keyCount - padding * (keyCount + 1) / keyCount Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... Relationships

Slide 42

Slide 42 text

Thinking in Constraints Auto Layout Q W E R T Y Q.width = container.width / keyCount - padding * (keyCount + 1) / keyCount Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... Relationships

Slide 43

Slide 43 text

Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding...

Slide 44

Slide 44 text

Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... =

Slide 45

Slide 45 text

Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... = Q.width = W.width W.width = E.width ...

Slide 46

Slide 46 text

Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... = Q.width = W.width W.width = E.width ...

Slide 47

Slide 47 text

Thinking in Constraints Q W E R T Y Auto Layout Q.minX = container.minX + padding W.minX = Q.maxX + padding E.minX = W.maxX + padding... = Q.width = W.width W.width = E.width ... container.maxX = Y.maxX + padding

Slide 48

Slide 48 text

Demo

Slide 49

Slide 49 text

•Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints

Slide 50

Slide 50 text

•Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints Q

Slide 51

Slide 51 text

•Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints Q I’m square!

Slide 52

Slide 52 text

•Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints Q I’m square!

Slide 53

Slide 53 text

•Layout becomes distributed •Decompose sophisticated layouts into components •Each component contributes the constraints it cares about •Layout becomes “owned” Thinking in Constraints Q I’m square! Be centered vertically in me! Be the same height as me!

Slide 54

Slide 54 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 55

Slide 55 text

1. Plan your attack •A partial conversion lets you use Auto Layout just where you need it ■ Some compatibility issues to be aware of •A full conversion will pay major dividends Migrating from Springs and Struts

Slide 56

Slide 56 text

2. Turn on Auto Layout in your nibs Migrating from Springs and Struts

Slide 57

Slide 57 text

2. Turn on Auto Layout in your nibs Migrating from Springs and Struts

Slide 58

Slide 58 text

2. Turn on Auto Layout in your nibs Migrating from Springs and Struts

Slide 59

Slide 59 text

2. Turn on Auto Layout in your nibs Migrating from Springs and Struts

Slide 60

Slide 60 text

2. Turn on Auto Layout in your nibs •Create the constraints you want in IB •IB will create constraints that reflect your existing layout •Add to or modify them Migrating from Springs and Struts

Slide 61

Slide 61 text

3. Turn off autoresizing mask translation for every view you create programmatically [view setTranslatesAutoresizingMaskIntoConstraints:NO] •If you forget, you’ll get unsatisfiable constraint warnings quickly Migrating from Springs and Struts

Slide 62

Slide 62 text

4. Look for places where you perform layout Migrating from Springs and Struts

Slide 63

Slide 63 text

4. Look for places where you perform layout - (void)layoutSubviews {… Migrating from Springs and Struts

Slide 64

Slide 64 text

4. Look for places where you perform layout - (void)layoutSubviews {… Migrating from Springs and Struts [view setFrame:rect] [view setFrameSize:size] [view setFrameOrigin:point]

Slide 65

Slide 65 text

4. Look for places where you perform layout - (void)layoutSubviews {… Migrating from Springs and Struts [view setFrame:rect] [view setFrameSize:size] [view setFrameOrigin:point] They all have to go!

Slide 66

Slide 66 text

4. Look for places where you perform layout - (void)layoutSubviews {… Migrating from Springs and Struts [view setFrame:rect] [view setFrameSize:size] [view setFrameOrigin:point] They all have to go! (But what do I replace them with?)

Slide 67

Slide 67 text

Migrating from Springs and Struts

Slide 68

Slide 68 text

Migrating from Springs and Struts •Stop and think ■ Don’t try to merely replicate what the existing code is doing ■ Think about the underlying layout

Slide 69

Slide 69 text

Migrating from Springs and Struts •Stop and think ■ Don’t try to merely replicate what the existing code is doing ■ Think about the underlying layout •Try replacing it with nothing! ■ Are you working around a limitation of springs and struts? ■ Does the code implement a relationship?

Slide 70

Slide 70 text

Migrating from Springs and Struts •Stop and think ■ Don’t try to merely replicate what the existing code is doing ■ Think about the underlying layout •Try replacing it with nothing! ■ Are you working around a limitation of springs and struts? ■ Does the code implement a relationship? •Otherwise, add some constraints

Slide 71

Slide 71 text

Migrating from Springs and Struts

Slide 72

Slide 72 text

Migrating from Springs and Struts •Think about which component should own each constraint

Slide 73

Slide 73 text

Migrating from Springs and Struts •Think about which component should own each constraint •Consider centralizing it in updateConstraints

Slide 74

Slide 74 text

5. Test it Migrating from Springs and Struts

Slide 75

Slide 75 text

5. Test it •Verify the layout is correct •Fix issues you may have Migrating from Springs and Struts

Slide 76

Slide 76 text

5. Test it •Verify the layout is correct •Fix issues you may have Migrating from Springs and Struts •Wait, what?

Slide 77

Slide 77 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 78

Slide 78 text

•Constraints that provide insufficient information ■ Ambiguity •Constraints that provide conflicting information ■ Unsatisfiability •Constraints that are satisfied in unexpected ways What Can Go Wrong?

Slide 79

Slide 79 text

•Interface Builder prevents unsatisfiable or ambiguous constraints •Rely on Interface Builder as much as possible •You can reference constraints with outlets What Can Go Wrong?

Slide 80

Slide 80 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 81

Slide 81 text

Ambiguity Q W E R T Y

Slide 82

Slide 82 text

•Ambiguity means multiple layouts satisfy all constraints equally well Ambiguity Q W E R T Y

Slide 83

Slide 83 text

•Ambiguity means multiple layouts satisfy all constraints equally well Ambiguity Q W E R T Y

Slide 84

Slide 84 text

•Ambiguity means multiple layouts satisfy all constraints equally well Q W E R T Y Ambiguity

Slide 85

Slide 85 text

Ambiguity •Ambiguity means multiple layouts satisfy all constraints equally well

Slide 86

Slide 86 text

Ambiguity •Ambiguity means multiple layouts satisfy all constraints equally well •A common symptom is that your views will cycle between those layouts

Slide 87

Slide 87 text

Ambiguity •Ambiguity means multiple layouts satisfy all constraints equally well •A common symptom is that your views will cycle between those layouts •Views “jump” or disappear entirely (jump to zero size)

Slide 88

Slide 88 text

Ambiguity

Slide 89

Slide 89 text

•Usually it means you need more constraints Ambiguity

Slide 90

Slide 90 text

•Usually it means you need more constraints •Each view needs four properties (two in each dimension) ■ MinX, Width, MinY, Height ■ MinX, MaxX, CenterY, MaxY ■ CenterX, Width, Baseline, Height ■ etc. Ambiguity

Slide 91

Slide 91 text

•Usually it means you need more constraints •Each view needs four properties (two in each dimension) ■ MinX, Width, MinY, Height ■ MinX, MaxX, CenterY, MaxY ■ CenterX, Width, Baseline, Height ■ etc. •Inequalities by themselves are usually not enough ■ view.width ≥ 20 – is it 20? 200? 2 billion? ■ Inequalities don’t care how much larger or smaller you are ■ But equalities care Ambiguity

Slide 92

Slide 92 text

Ambiguity

Slide 93

Slide 93 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity

Slide 94

Slide 94 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity [view(24@500) [view(>=30@500)]

Slide 95

Slide 95 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity •It can’t satisfy both •They have equal priorities •Ambiguity! [view(24@500) [view(>=30@500)]

Slide 96

Slide 96 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity [view(24@500) [view(>=30@525)]

Slide 97

Slide 97 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both [view(24@500) [view(>=30@525)]

Slide 98

Slide 98 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both •The inequality has a higher priority, so it will be satisfied first [view(24@500) [view(>=30@525)]

Slide 99

Slide 99 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both •The inequality has a higher priority, so it will be satisfied first •The equality will be satisfied as closely as possible [view(24@500) [view(>=30@525)]

Slide 100

Slide 100 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both •The inequality has a higher priority, so it will be satisfied first •The equality will be satisfied as closely as possible •No ambiguity! [view(24@500) [view(>=30@525)]

Slide 101

Slide 101 text

•Rarely, ambiguity means you need to adjust priorities Ambiguity •It still can’t satisfy both •The inequality has a higher priority, so it will be satisfied first •The equality will be satisfied as closely as possible •No ambiguity! •view.width = 30 [view(24@500) [view(>=30@525)]

Slide 102

Slide 102 text

•Is my layout ambiguous? [view hasAmbiguousLayout] •What is ambiguous about it? [view exerciseAmbiguityInLayout] [window visualizeConstraints: @[] ] Ambiguity

Slide 103

Slide 103 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 104

Slide 104 text

Unsatisfiability

Slide 105

Slide 105 text

•Unsatisfiability means no layout can satisfy all required constraints Unsatisfiability

Slide 106

Slide 106 text

•Unsatisfiability means no layout can satisfy all required constraints •Only required constraints can contribute to unsatisfiability ■ Constraints are required by default! Unsatisfiability

Slide 107

Slide 107 text

•Unsatisfiability means no layout can satisfy all required constraints •Only required constraints can contribute to unsatisfiability ■ Constraints are required by default! •Sizes are implicitly required to be at least zero Unsatisfiability

Slide 108

Slide 108 text

•Unsatisfiability is immediately reported •Ambiguity can be temporarily tolerated •Remove constraints as soon as they might become invalid •Create valid constraints again in updateConstraints Unsatisfiability

Slide 109

Slide 109 text

Help, I Don’t See Anything!

Slide 110

Slide 110 text

Help, I Don’t See Anything! •Where are your views? ■ Check their -frame

Slide 111

Slide 111 text

Help, I Don’t See Anything! •Where are your views? ■ Check their -frame •What constraints are making them that size? ■ Output [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical]

Slide 112

Slide 112 text

Help, I Don’t See Anything! •Where are your views? ■ Check their -frame •What constraints are making them that size? ■ Output [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical] 0 or 1

Slide 113

Slide 113 text

Help, I Don’t See Anything! •Where are your views? ■ Check their -frame •What constraints are making them that size? ■ Output [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical] •Is the layout ambiguous? ■ Call [view hasAmbiguousLayout] ■ Call [view exerciseAmbiguityInLayout] 0 or 1

Slide 114

Slide 114 text

Help, I Don’t See Anything! •Some layouts are only satisfiable at 0 size!

Slide 115

Slide 115 text

Help, I Don’t See Anything! •Some layouts are only satisfiable at 0 size! foo.width = bar.width * 2 bar.width = foo.width * 3

Slide 116

Slide 116 text

Help, I Don’t See Anything! •Some layouts are only satisfiable at 0 size! foo.width = bar.width * 2 bar.width = foo.width * 3 foo.width = bar.width = 0

Slide 117

Slide 117 text

Demo

Slide 118

Slide 118 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 119

Slide 119 text

Anatomy of an Unsatisfiability Log

Slide 120

Slide 120 text

Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.

Slide 121

Slide 121 text

Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger. Anatomy of an Unsatisfiability Log

Slide 122

Slide 122 text

Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger. Anatomy of an Unsatisfiability Log

Slide 123

Slide 123 text

Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.

Slide 124

Slide 124 text

Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.

Slide 125

Slide 125 text

Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.

Slide 126

Slide 126 text

Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.

Slide 127

Slide 127 text

Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.

Slide 128

Slide 128 text

Anatomy of an Unsatisfiability Log Unable to simultaneously satisfy constraints: ( "", "" ) Will attempt to recover by breaking constraint Set the NSUserDefault NSConstraintBasedLayoutVisualizeMutuallyExclusiveConstraints to YES to have -[NSWindow visualizeConstraints:] automatically called when this happens. And/or, break on objc_exception_throw to catch this in the debugger.

Slide 129

Slide 129 text

Anatomy of an Unsatisfiability Log "",

Slide 130

Slide 130 text

Anatomy of an Unsatisfiability Log NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 )

Slide 131

Slide 131 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log

Slide 132

Slide 132 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Constraint’s address

Slide 133

Slide 133 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log

Slide 134

Slide 134 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Map from identifier to view

Slide 135

Slide 135 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Map from identifier to view •View identifiers make logs easier to read

Slide 136

Slide 136 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Map from identifier to view •View identifiers make logs easier to read

Slide 137

Slide 137 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log Map from identifier to view •View identifiers make logs easier to read

Slide 138

Slide 138 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log

Slide 139

Slide 139 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier

Slide 140

Slide 140 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute

Slide 141

Slide 141 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute Relation

Slide 142

Slide 142 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute Relation Other View

Slide 143

Slide 143 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute Relation Other View Constant

Slide 144

Slide 144 text

NSLayoutConstraint:0x10441ced0 LetterView-'H'.centerX == LetterPile:0x102b25230.centerX - 11 (Names: LetterView-'H':0x10423c390 ) Anatomy of an Unsatisfiability Log View’s identifier Attribute Relation Other View Constant “The letter view’s center should be 11 points to the left of the pile’s center”

Slide 145

Slide 145 text

Anatomy of an Unsatisfiability Log

Slide 146

Slide 146 text

Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible

Slide 147

Slide 147 text

Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible H:[NSView:0x102b5b3a0(250)]

Slide 148

Slide 148 text

Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible H:[NSView:0x102b5b3a0(250)] “The view’s width is 250”

Slide 149

Slide 149 text

Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible H:[NSView:0x102b5b3a0(250)] H:[NSView:0x10480cd00]-(>=50)-[NSView:0x10481e9a0]> “The view’s width is 250”

Slide 150

Slide 150 text

Anatomy of an Unsatisfiability Log •Logs use the visual format syntax when possible H:[NSView:0x102b5b3a0(250)] H:[NSView:0x10480cd00]-(>=50)-[NSView:0x10481e9a0]> “The view’s width is 250” “This view is at least 50 points to the right of that view”

Slide 151

Slide 151 text

Anatomy of an Unsatisfiability Log

Slide 152

Slide 152 text

Anatomy of an Unsatisfiability Log

Slide 153

Slide 153 text

Anatomy of an Unsatisfiability Log • translatesAutoresizingMaskIntoConstraints is on for this view

Slide 154

Slide 154 text

Anatomy of an Unsatisfiability Log • translatesAutoresizingMaskIntoConstraints is on for this view •That produces more than one constraint Autoresizing Mask

Slide 155

Slide 155 text

Anatomy of an Unsatisfiability Log • translatesAutoresizingMaskIntoConstraints is on for this view •That produces more than one constraint Autoresizing Mask

Slide 156

Slide 156 text

Anatomy of an Unsatisfiability Log • translatesAutoresizingMaskIntoConstraints is on for this view •That produces more than one constraint Autoresizing Mask “This view’s height is 50.”

Slide 157

Slide 157 text

Slide 158

Slide 158 text

Autoresizing constraint

Slide 159

Slide 159 text

Autoresizing constraint Autoresizing mask

Slide 160

Slide 160 text

Slide 161

Slide 161 text

Horizontal

Slide 162

Slide 162 text

Horizontal 200 points between

Slide 163

Slide 163 text

Horizontal 200 points between this view’s left edge

Slide 164

Slide 164 text

Horizontal 200 points between this view’s left edge Superview

Slide 165

Slide 165 text

Slide 166

Slide 166 text

Superview’s description

Slide 167

Slide 167 text

Slide 168

Slide 168 text

“This view’s left edge is 200 points from that of its superview, which is a FlippedView”

Slide 169

Slide 169 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 170

Slide 170 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint based-layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 171

Slide 171 text

Animation

Slide 172

Slide 172 text

Animation •How do you animate layout changes?

Slide 173

Slide 173 text

Animation •How do you animate layout changes? •Apply the new layout and let CoreAnimation handle animation ■ Very fast ■ May transiently appear to violate constraints

Slide 174

Slide 174 text

Animation •How do you animate layout changes? •Apply the new layout and let CoreAnimation handle animation ■ Very fast ■ May transiently appear to violate constraints •Animate constraints directly ■ Pretty fast ■ Produces a correct layout at every frame

Slide 175

Slide 175 text

Animation

Slide 176

Slide 176 text

Animation

Slide 177

Slide 177 text

Animation ≥20 ≥20 100@250

Slide 178

Slide 178 text

Animation ≥20 ≥20 100@250

Slide 179

Slide 179 text

Animation ≥20 ≥20 100@250

Slide 180

Slide 180 text

Animation ≥20 ≥20 100@250 Auto Layout

Slide 181

Slide 181 text

Animation ≥20 ≥20 100@250 Auto Layout CoreAnimation

Slide 182

Slide 182 text

Animation with CoreAnimation

Slide 183

Slide 183 text

Animation with CoreAnimation •Adjust your constraints •Within an animation block, call [view layoutIfNeeded] on iOS [view layoutSubtreeIfNeeded] on OS X

Slide 184

Slide 184 text

Animation with CoreAnimation •NSView [NSAnimationContext runAnimationGroup:^(NSAnimationContext *context) { [context setDuration:0.5]; [context setAllowsImplicitAnimation:YES]; [view layoutSubtreeIfNeeded]; } completionHandler:nil] •UIView [UIView animateWithDuration:0.5 animations:^{ [view layoutIfNeeded]; }]

Slide 185

Slide 185 text

Animation with NSLayoutConstraint

Slide 186

Slide 186 text

Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end

Slide 187

Slide 187 text

Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation

Slide 188

Slide 188 text

Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts

Slide 189

Slide 189 text

Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer

Slide 190

Slide 190 text

Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer constraint.constant += 10

Slide 191

Slide 191 text

Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer •Use the animator proxy constraint.constant += 10

Slide 192

Slide 192 text

Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer •Use the animator proxy constraint.constant += 10 constraint.animator.constant = 10

Slide 193

Slide 193 text

Animation with NSLayoutConstraint @interface NSLayoutConstraint @property (readonly) NSLayoutAttribute firstAttribute; @property (readonly) CGFloat multiplier; @property (readwrite) CGFloat constant; @end •The constant may be modified after creation •Permits efficient relayouts •Use an NSTimer •Use the animator proxy constraint.constant += 10 constraint.animator.constant = 10 OS X only

Slide 194

Slide 194 text

Demo

Slide 195

Slide 195 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 196

Slide 196 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect

Slide 197

Slide 197 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Push Me

Slide 198

Slide 198 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Push Me Push Me Push Me Push Me

Slide 199

Slide 199 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Push Me Push Me Push Me ? ? ? Push Me

Slide 200

Slide 200 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Push Me Frame Alignment Rect

Slide 201

Slide 201 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect

Slide 202

Slide 202 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Edit

Slide 203

Slide 203 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Edit

Slide 204

Slide 204 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Edit 4

Slide 205

Slide 205 text

Alignment Rects •Constraints operate on content, not frames •The content area is called the alignment rect Edit 4

Slide 206

Slide 206 text

Alignment Rects

Slide 207

Slide 207 text

Alignment Rects •You can convert between alignment rects and frames @implementation (NS,UI)View - (CGRect)alignmentRectForFrame:(CGRect)frame - (CGRect)frameForAlignmentRect:(CGRect)alignmentRect

Slide 208

Slide 208 text

Intrinsic Content Size

Slide 209

Slide 209 text

Intrinsic Content Size •Many views are equally happy at any size •Some views have a preferred size sizeToFit sizeThatFits: •In Auto Layout, this is the intrinsicContentSize

Slide 210

Slide 210 text

Intrinsic Content Size •Many views are equally happy at any size •Some views have a preferred size sizeToFit sizeThatFits: •In Auto Layout, this is the intrinsicContentSize Push Me

Slide 211

Slide 211 text

Intrinsic Content Size •Many views are equally happy at any size •Some views have a preferred size sizeToFit sizeThatFits: •In Auto Layout, this is the intrinsicContentSize Push Me

Slide 212

Slide 212 text

Intrinsic Content Size •Many views are equally happy at any size •Some views have a preferred size sizeToFit sizeThatFits: •In Auto Layout, this is the intrinsicContentSize Push Me ?

Slide 213

Slide 213 text

Intrinsic Content Size •An intrinsic content size generates two constraints per dimension Push Me 120 25 H:[button(>=120] H:[button(<=120] V:[button(>=25)] V:[button(<=25)]

Slide 214

Slide 214 text

Intrinsic Content Size •An intrinsic content size generates two constraints per dimension Push Me 120 25 H:[button(>=120] H:[button(<=120] V:[button(>=25)] V:[button(<=25)] Compression Resistance

Slide 215

Slide 215 text

Intrinsic Content Size •An intrinsic content size generates two constraints per dimension Push Me 120 25 H:[button(>=120] H:[button(<=120] V:[button(>=25)] V:[button(<=25)] Compression Resistance Content Hugging

Slide 216

Slide 216 text

Intrinsic Content Size •An intrinsic content size generates two constraints per dimension Push Me 120 25 H:[button(>=120] H:[button(<=120] V:[button(>=25)] V:[button(<=25)] •This is sufficient to unambiguously size the view! Compression Resistance Content Hugging

Slide 217

Slide 217 text

Intrinsic Content Size •Why two constraints? •Because they can have different priorities!

Slide 218

Slide 218 text

Intrinsic Content Size •Why two constraints? •Because they can have different priorities! This is a label

Slide 219

Slide 219 text

Intrinsic Content Size •Why two constraints? •Because they can have different priorities! This is a label This is a label

Slide 220

Slide 220 text

Intrinsic Content Size •Why two constraints? •Because they can have different priorities! This is a label This is… This is a label

Slide 221

Slide 221 text

Intrinsic Content Size •Why two constraints? •Because they can have different priorities! This is a label This is… This is a label •Low content hugging priority, high compression resistance priority

Slide 222

Slide 222 text

Intrinsic Content Size •Why two constraints? •Because they can have different priorities! •High content hugging priority, high compression resistance priority Push Me Push Me Pus…

Slide 223

Slide 223 text

Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable

Slide 224

Slide 224 text

Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable

Slide 225

Slide 225 text

Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable

Slide 226

Slide 226 text

Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable @implementation NSView - (void)setContentHuggingPriority:(NSLayoutPriority)priority forOrientation:(NSLayoutConstraintOrientation)orientation; - (void)setContentCompressionResistancePriority:(NSLayoutPriority)priority forOrientation:(NSLayoutConstraintOrientation)orientation; @end

Slide 227

Slide 227 text

Intrinsic Content Size •Intrinsic content size is not settable •The constraint priorities are settable @implementation UIView - (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis; - (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis; @end

Slide 228

Slide 228 text

Intrinsic Content Size Short Label

Slide 229

Slide 229 text

Intrinsic Content Size Short Label Longer L…

Slide 230

Slide 230 text

Intrinsic Content Size •The view calls [self invalidateIntrinsicContentSize] whenever its content changes •Auto Layout reestablishes the sizing constraints •If you implement a custom control, call this whenever your intrinsicContentSize might change Short Label Longer L…

Slide 231

Slide 231 text

Intrinsic Content Size •The view calls [self invalidateIntrinsicContentSize] whenever its content changes •Auto Layout reestablishes the sizing constraints •If you implement a custom control, call this whenever your intrinsicContentSize might change Short Label Longer L… Longer Longer Label

Slide 232

Slide 232 text

Intrinsic Content Size

Slide 233

Slide 233 text

Intrinsic Content Size intrinsicContentSize as a better sizeToFit

Slide 234

Slide 234 text

Intrinsic Content Size intrinsicContentSize as a better sizeToFit •sizeToFit must preserve binary compatibility •It may be wrong for the current artwork •intrinsicContentSize can change •Use intrinsicContentSize as a better sizeToFit

Slide 235

Slide 235 text

Intrinsic Content Size intrinsicContentSize as a better sizeToFit •sizeToFit must preserve binary compatibility •It may be wrong for the current artwork •intrinsicContentSize can change •Use intrinsicContentSize as a better sizeToFit NSRect alignmentRect = (NSRect){NSZeroPoint, [control intrinsicContentSize]}; [control setFrameSize: [control frameForAlignmentRect:alignmentRect].size];

Slide 236

Slide 236 text

Override intrinsicContentSize Writing a Custom Control

Slide 237

Slide 237 text

Override intrinsicContentSize Writing a Custom Control •Do ■ Measure text or images ■ Hard-code values

Slide 238

Slide 238 text

Override intrinsicContentSize Writing a Custom Control •Do ■ Measure text or images ■ Hard-code values •Do not ■ Inspect your position, size, or constraints ■ Call super and “tweak” its value ■ Use it as a substitute for explicit constraints

Slide 239

Slide 239 text

Indicate your alignment rect Writing a Custom Control

Slide 240

Slide 240 text

Indicate your alignment rect Writing a Custom Control •Do ■ Consider using the default implementation ■ Override - (NS/UIEdgeInsets)alignmentRectInsets;

Slide 241

Slide 241 text

Indicate your alignment rect Writing a Custom Control •Do ■ Consider using the default implementation ■ Override - (NS/UIEdgeInsets)alignmentRectInsets; •Do not ■ Inspect your position, size, or constraints ■ Call super and “tweak” its value ■ Use it as a substitute for explicit constraints

Slide 242

Slide 242 text

Overriding layout / layoutSubviews

Slide 243

Slide 243 text

Overriding layout / layoutSubviews -layout sets the receiver’s frame to the values determined by the constraints NSView

Slide 244

Slide 244 text

Overriding layout / layoutSubviews -layout sets the receiver’s frame to the values determined by the constraints NSView -layoutSubviews sets the receiver’s center and bounds to the values determined by the constraints UIView

Slide 245

Slide 245 text

Overriding layout / layoutSubviews •Afterwards, the constraints and frames agree •Override it to do custom layout as long as you maintain that invariant -layout sets the receiver’s frame to the values determined by the constraints NSView -layoutSubviews sets the receiver’s center and bounds to the values determined by the constraints UIView

Slide 246

Slide 246 text

Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy

Slide 247

Slide 247 text

Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy

Slide 248

Slide 248 text

Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy

Slide 249

Slide 249 text

Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy

Slide 250

Slide 250 text

Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy

Slide 251

Slide 251 text

Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy

Slide 252

Slide 252 text

Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy

Slide 253

Slide 253 text

Overriding layout / layoutSubviews Achieving a layout-dependent view hierarchy •Override -layout / -layoutSubviews •Call super •Inspect the resulting view positions and sizes •Adjust subviews and constraints •Call super again •Repeat!

Slide 254

Slide 254 text

Demo

Slide 255

Slide 255 text

Auto Layout •Thinking in constraints ■ Transitioning to constraints •Debugging constraint-based layouts ■ Ambiguity ■ Unsatisfiability ■ Reading log messages •Unleashing the power of constraints ■ Animation ■ Writing a custom control ■ Internationalization

Slide 256

Slide 256 text

Internationalization

Slide 257

Slide 257 text

Internationalization •Auto Layout makes internationalization easier ■ Controls size according to their content ■ The same constraints still work across different localizations

Slide 258

Slide 258 text

Internationalization •Auto Layout makes internationalization easier ■ Controls size according to their content ■ The same constraints still work across different localizations Save Cancel

Slide 259

Slide 259 text

Internationalization •Auto Layout makes internationalization easier ■ Controls size according to their content ■ The same constraints still work across different localizations Sichern Abbrechen

Slide 260

Slide 260 text

Internationalization •One nib can now service multiple localizations •Control content is translated with a strings file at runtime •You can fall back to separate nibs when necessary Sichern Abbrechen

Slide 261

Slide 261 text

Internationalization •Right-to-left support is built in •The leading and trailing edges flip under right-to-left localizations Sichern Abbrechen

Slide 262

Slide 262 text

!"# ء%&'إ Internationalization •Right-to-left support is built in •The leading and trailing edges flip under right-to-left localizations Sichern Abbrechen

Slide 263

Slide 263 text

Demo

Slide 264

Slide 264 text

Summary •Auto Layout allows for powerful layout with less (or no) code •Think declaratively •Be wary of ambiguity and unsatisfiability •The log messages are there to help •Judicious overriding lets your custom views integrate with Auto Layout •Localize with a single nib and multiple strings files

Slide 265

Slide 265 text

More Information Paul Marcos Frameworks Evangelist [email protected] Documentation Cocoa Auto Layout Guide http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AutolayoutPG/ Apple Developer Forums http://devforums.apple.com

Slide 266

Slide 266 text

Related Sessions Auto Layout by Example Mission Thursday 11:30AM

Slide 267

Slide 267 text

Labs Auto Layout Lab App Services Lab B Thursday 2:00PM

Slide 268

Slide 268 text

No content