high performance auto layout - apple
TRANSCRIPT
![Page 1: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/1.jpg)
#WWDC18
© 2018 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
Ken Ferry, iOS System Experience Kasia Wawer, iOS Keyboards
•High Performance Auto Layout
![Page 2: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/2.jpg)
Auto Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 3: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/3.jpg)
Auto Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 4: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/4.jpg)
•iOS 12 improvements •Internals and intuition •Building efficient layouts
![Page 5: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/5.jpg)
•iOS 12 improvements •Internals and intuition •Building efficient layouts
![Page 6: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/6.jpg)
Performance Improvements in iOS 12 You get it for free
![Page 7: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/7.jpg)
Performance Improvements in iOS 12 You get it for free
![Page 8: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/8.jpg)
Performance Improvements in iOS 12 Shorter bars are better
Long Row
Deep Hierarchy
Collection View
Moving Tree
Hierarchy Removal
0 45 90 135 180
![Page 9: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/9.jpg)
•iOS 12 improvements •Internals and intuition •Building efficient layouts
![Page 10: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/10.jpg)
•iOS 12 improvements •Internals and intuition •Building efficient layouts
![Page 11: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/11.jpg)
Simple Layout
text1 text2
![Page 12: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/12.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 13: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/13.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 14: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/14.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 15: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/15.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 16: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/16.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 17: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/17.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 18: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/18.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 19: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/19.jpg)
The Render Loop What is updateConstraints?
Update Constraints Layout Display
![Page 20: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/20.jpg)
The Render Loop What is updateConstraints?
Update Constraints Layout Display
![Page 21: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/21.jpg)
The Render Loop What is updateConstraints?
Update Constraints Layout Display
![Page 22: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/22.jpg)
The Render Loop What is updateConstraints?
Update Constraints Layout Display
![Page 23: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/23.jpg)
The Render Loop What is updateConstraints?
Update Constraints Layout Display
updateConstraints() layoutSubviews() draw(_:)
setNeedsUpdateConstraints() setNeedsLayout() setNeedsDisplay()
updateConstraintsIfNeeded() layoutIfNeeded() –
![Page 24: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/24.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline,] metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 25: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/25.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline,] metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 26: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/26.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func layoutSubviews() { text1.removeFromSuperview() text1 = nil text1 = UILabel(frame: CGRect(x: 20, y: 20, width: 300, height: 30)) self.addSubview(text1) text2.removeFromSuperview() text2 = nil text2 = UILabel(frame: CGRect(x: 340, y: 20, width: 300, height: 30)) self.addSubview(text2) super.layoutSubviews() }
![Page 27: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/27.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func layoutSubviews() { text1.removeFromSuperview() text1 = nil text1 = UILabel(frame: CGRect(x: 20, y: 20, width: 300, height: 30)) self.addSubview(text1) text2.removeFromSuperview() text2 = nil text2 = UILabel(frame: CGRect(x: 340, y: 20, width: 300, height: 30)) self.addSubview(text2) super.layoutSubviews() }
![Page 28: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/28.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 29: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/29.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints+=NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints+=NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 30: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/30.jpg)
// This is ok! Doesn’t do anything unless self.myConstraints has been nil’d out override func updateConstraints() { if self.myConstraints == nil { var constraints = [NSLayoutConstraint]() let views = ["text1":text1, "text2":text2] constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(constraints) self.myConstraints = constraints } super.updateConstraints() }
![Page 31: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/31.jpg)
// This is ok! Doesn’t do anything unless self.myConstraints has been nil’d out override func updateConstraints() { if self.myConstraints == nil { var constraints = [NSLayoutConstraint]() let views = ["text1":text1, "text2":text2] constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(constraints) self.myConstraints = constraints } super.updateConstraints() }
![Page 32: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/32.jpg)
The Render Loop Do you really need to be part of it?
Useful: Avoiding wasted work
Dangerous: Runs a lot
![Page 33: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/33.jpg)
Interface Builder
![Page 34: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/34.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 35: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/35.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 36: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/36.jpg)
Activating a Constraint Internal structure
View
![Page 37: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/37.jpg)
Activating a Constraint Internal structure
Window
View
![Page 38: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/38.jpg)
Activating a Constraint Internal structure
Window
View
Engine
![Page 39: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/39.jpg)
Activating a Constraint Internal structure
Window
View
ConstraintEngine
![Page 40: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/40.jpg)
Activating a Constraint Internal structure
Window
View
ConstraintEngine
Equation
![Page 41: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/41.jpg)
Activating a Constraint Internal structure
Window
View
ConstraintEngine
EquationEquation
![Page 42: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/42.jpg)
Activating a Constraint Internal structure
Window
View
ConstraintVariableEngine
EquationEquation
![Page 43: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/43.jpg)
Variables Unknowns layout must calculate
width
height
minY
minX
![Page 44: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/44.jpg)
text1 text2
Activating a Constraint
![Page 45: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/45.jpg)
text1 text2
text1.width = 100
text2.width = 100
text1.minX = 20
text2.minX = text1.minX + text1.width + 20
Activating a Constraint
![Page 46: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/46.jpg)
Activating a Constraint Internal structure
Window
View
ConstraintVariable
Equation
Engine
![Page 47: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/47.jpg)
Engine
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
![Page 48: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/48.jpg)
Engine
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
text1.minX = 8
![Page 49: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/49.jpg)
Engine
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
text1.minX = 8text1.width = 100
![Page 50: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/50.jpg)
Engine
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
text1.minX = 8text1.width = 100text2.minX = text1.minX + text1.width + 20
![Page 51: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/51.jpg)
Engine
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
8100
128
text1.minX = 8 text1.width = 100 text2.minX = text1.minX text1.width+ 20+
![Page 52: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/52.jpg)
Engine
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
128
text1.minX = 8 text1.width = 100 text2.minX = + 20+
![Page 53: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/53.jpg)
Engine
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
text1.minX = 8text1.width = 100text2.minX = 128
![Page 54: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/54.jpg)
Engine
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
text1.minX = 8text1.width = 100text2.minX =text2.width = 100
128
![Page 55: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/55.jpg)
Activating a Constraint Triggering the layout pass
View
Engine
![Page 56: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/56.jpg)
Activating a Constraint Triggering the layout pass
View
“Value for variable changed!” Engine
![Page 57: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/57.jpg)
Activating a Constraint Triggering the layout pass
View
“Value for variable changed!”
“Superview setNeedsLayout()”
Engine
![Page 58: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/58.jpg)
The Render Loop
Update Constraints Layout Display
![Page 59: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/59.jpg)
The Render Loop
Update Constraints Layout Display
![Page 60: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/60.jpg)
UIView.layoutSubviews() Copying data from engine to subview
View
Engine
![Page 61: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/61.jpg)
UIView.layoutSubviews() Copying data from engine to subview
View“Engine, what are the values for the variables?”
Engine
![Page 62: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/62.jpg)
UIView.layoutSubviews() Copying data from engine to subview
View“Engine, what are the values for the variables?”
“Subview setBounds(), subview setCenter()”
Engine
![Page 63: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/63.jpg)
UIView.layoutSubviews() Copying data from engine to subview
View“Engine, what are the values for the variables?”
“Subview setBounds(), subview setCenter()”
Engine
![Page 64: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/64.jpg)
UIView.layoutSubviews() Copying data from engine to subview
View“Engine, what are the values for the variables?”
“Subview setBounds(), subview setCenter()”
Engine
Done!
![Page 65: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/65.jpg)
// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second override func updateConstraints() { NSLayoutConstraint.deactivate(myConstraints) myConstraints.removeAll() let views = ["text1":text1, "text2":text2] myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]", options: [.alignAllFirstBaseline], metrics: nil, views: views) myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|", options: [], metrics: nil, views: views) NSLayoutConstraint.activate(myConstraints) super.updateConstraints() }
![Page 66: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/66.jpg)
Churning
![Page 67: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/67.jpg)
Churning
![Page 68: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/68.jpg)
Local Versus Global Layout You don’t pay for what you don’t use
text1 text2
text3 text4
![Page 69: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/69.jpg)
Local Versus Global Layout You don’t pay for what you don’t use
text1 text2
text3 text4
![Page 70: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/70.jpg)
Local Versus Global Layout You don’t pay for what you don’t use
text1 text2
text3 text4
![Page 71: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/71.jpg)
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
Unrelated Views Don’t Interact
![Page 72: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/72.jpg)
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
text1.minX = 8text1.width = 100text2.minX = 20 + text1.minX + text1.width
text3.minX = 8text3.width = 100text4.minX = 20 + text3.minX + text3.width
Unrelated Views Don’t Interact
![Page 73: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/73.jpg)
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
text1.minX = 8text1.width = 100text2.minX = 128
text3.minX = 8text3.width = 100text4.minX = 128
Unrelated Views Don’t Interact
![Page 74: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/74.jpg)
text1.minX = 8 - c1.marker text1.width = 130 - c2.marker text2.minX = 138 - c1.marker - c2.marker + c3.marker text2.width = 100 - c4.marker
text1.minX = 8text1.width = 100text2.minX = 128text2.width = 100
text3.minX = 8text3.width = 100text4.minX = 128text4.width = 100
Unrelated Views Don’t Interact
![Page 75: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/75.jpg)
Performance Scales Linearly When No Interaction How much work would it take by hand?
![Page 76: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/76.jpg)
Performance Scales Linearly When No Interaction How much work would it take by hand?
![Page 77: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/77.jpg)
Performance Scales Linearly When No Interaction How much work would it take by hand?
![Page 78: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/78.jpg)
Performance Scales Linearly When No Interaction How much work would it take by hand?
![Page 79: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/79.jpg)
Performance Scales Linearly When No Interaction How much work would it take by hand?
![Page 80: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/80.jpg)
Performance Scales Linearly When No Interaction How much work would it take by hand?
![Page 81: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/81.jpg)
The engine is a layout cacheand dependency tracker.
![Page 82: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/82.jpg)
Model The Problem Naturally Don’t avoid using constraints
Long text might be here
Or maybe it’s down here and this field is bigger?
![Page 83: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/83.jpg)
Model The Problem Naturally Don’t wedge two layouts into one set of constraints
Long text might be here
Or maybe it’s down here and this field is bigger?
![Page 84: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/84.jpg)
Long text might be here
Or maybe it’s down here and this field is bigger?
Model The Problem Naturally Don’t wedge two layouts into one set of constraints
Long text might be here
Or maybe it’s down here and this field is bigger?
Extra!
![Page 85: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/85.jpg)
Long text might be here
Or maybe it’s down here and this field is bigger?
Model The Problem Naturally Don’t wedge two layouts into one set of constraints
Long text might be here
Or maybe it’s down here and this field is bigger?
Extra!
![Page 86: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/86.jpg)
Is That Everything? Costs of other auto layout features
Inequality
NSLayoutConstraint set constant
Priority
![Page 87: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/87.jpg)
Is That Everything? Costs of other auto layout features
Inequality
NSLayoutConstraint set constant
Priority
![Page 88: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/88.jpg)
Error Minimization Constraints with non-required priority
View
Engine
![Page 89: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/89.jpg)
Error Minimization Constraints with non-required priority
View“Engine, what are the values for the variables?”
Engine
![Page 90: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/90.jpg)
Error Minimization Constraints with non-required priority
View“Engine, what are the values for the variables?”
Engine “Minimize error”
![Page 91: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/91.jpg)
Error Minimization Constraints with non-required priority
View“Engine, what are the values for the variables?”
“Subview setBounds()”
Engine “Minimize error”
![Page 92: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/92.jpg)
Performance Intuition
Don’t churn
Basic algebra
Engine is a layout cache and tracker
You pay for what you use
![Page 93: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/93.jpg)
•iOS 12 improvements •Internals and intuition •Building efficient layouts
![Page 94: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/94.jpg)
•iOS 12 improvements •Internals and intuition •Building efficient layouts
![Page 95: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/95.jpg)
#WWDC18
© 2018 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
Kasia Wawer, iOS Keyboards
•Building Efficient Layouts
![Page 96: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/96.jpg)
Constraint Churn
New solution, same layout
Extra work happens with no visible result
Enough churn can affect performance
![Page 97: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/97.jpg)
Building a Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 98: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/98.jpg)
Building a Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 99: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/99.jpg)
Building a Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 100: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/100.jpg)
Building a Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 101: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/101.jpg)
Building a Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 102: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/102.jpg)
Building a Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Page 103: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/103.jpg)
Building a Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Page 104: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/104.jpg)
![Page 105: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/105.jpg)
![Page 106: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/106.jpg)
Finding the Problem
![Page 107: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/107.jpg)
Finding the Problem
![Page 108: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/108.jpg)
Finding the Problem
![Page 109: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/109.jpg)
Finding the Problem
![Page 110: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/110.jpg)
Finding the Problem
![Page 111: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/111.jpg)
Finding the Problem
![Page 112: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/112.jpg)
Finding the Problem
![Page 113: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/113.jpg)
Finding the Problem
![Page 114: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/114.jpg)
Finding the Problem
SemiSocialMedia.AvatarView UILabel “Quite a hike”
UILabel “May 25, 2018” UILabel “Hiked up the steps to the…”
![Page 115: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/115.jpg)
Finding the Problem
AvatarView Title label Date label
Log entry label
SemiSocialMedia.AvatarView UILabel “Quite a hike”
UILabel “May 25, 2018” UILabel “Hiked up the steps to the…”
![Page 116: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/116.jpg)
Finding the Problem
AvatarView Title label Date label
Log entry label
![Page 117: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/117.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 118: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/118.jpg)
Building a More Performant Layout
TitleJune 6th, 2018
Author
Lorem
![Page 119: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/119.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 120: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/120.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 121: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/121.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 122: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/122.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
![Page 123: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/123.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Page 124: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/124.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![Page 125: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/125.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
imageConstraints =
![Page 126: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/126.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[ ], , ,imageConstraints =
![Page 127: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/127.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[ ], , ,
[ ]
imageConstraints =
noImageConstraints =
![Page 128: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/128.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[ ], , ,
[ ][ ]
imageConstraints =
noImageConstraints =
![Page 129: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/129.jpg)
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[ ], , ,imageConstraints =
noImageConstraints =
[ ][ ]
![Page 130: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/130.jpg)
[ ], , ,
Building a More Performant Layout
Author
TitleJune 6th, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[ ]
imageConstraints =
noImageConstraints =
![Page 131: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/131.jpg)
Before
![Page 132: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/132.jpg)
Before
![Page 133: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/133.jpg)
After
![Page 134: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/134.jpg)
After
![Page 135: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/135.jpg)
AfterAfter (iOS 11)
![Page 136: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/136.jpg)
After (iOS 12)
![Page 137: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/137.jpg)
After (iOS 12)
![Page 138: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/138.jpg)
Constraint Churn
Avoid removing all constraints
Add static constraints once
Only change the constraints that need changing
Hide views instead of removing them
![Page 139: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/139.jpg)
Intrinsic Content Size
Not all views need it
Views with non view content: • UIImageView returns its image size • UILabel returns its text size
UIView uses it to make constraints
![Page 140: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/140.jpg)
Overriding
Optionally override for text measurement • Return size if known without text measurement • Use UIView.noIntrinsicMetric and constraints
![Page 141: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/141.jpg)
Overriding
Optionally override for text measurement • Return size if known without text measurement • Use UIView.noIntrinsicMetric and constraints
override var intrinsicContentSize: CGSize { return CGSize(width: UIView.noIntrinsicMetric, height: UIView.noIntrinsicMetric) }
![Page 142: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/142.jpg)
System Layout Size Fitting Size
systemLayoutSizeFitting(_ targetSize:)
Used when combining with frames
![Page 143: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/143.jpg)
Getting Size from the Engine
Engine is created
Constraints are added
Layout is solved
Size of the top view is returned
Engine is discarded
Author
![Page 144: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/144.jpg)
Getting Size from the Engine
Engine is created
Constraints are added
Layout is solved
Size of the top view is returned
Engine is discarded
Author
![Page 145: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/145.jpg)
Getting Size from the Engine
Engine is created
Constraints are added
Layout is solved
Size of the top view is returned
Engine is discarded
Author{50,120}
![Page 146: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/146.jpg)
Getting Size from the Engine
Engine is created
Constraints are added
Layout is solved
Size of the top view is returned
Engine is discarded
Author{50,120}
![Page 147: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/147.jpg)
Unsatisfiable Constraints
There is no solution for the specified constraints
Logging will help you to debug
Can mask other issues
See related session for debugging tips
Mysteries of Auto Layout, Part 2 WWDC 2015
![Page 148: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/148.jpg)
Ready, Set, Go!
Think before you update constraints
Tune as needed
Enjoy your faster layouts
![Page 149: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/149.jpg)
More Informationhttps://developer.apple.com/wwdc18/220
UIKit and Layout Lab Technology Lab 2 Thursday 11:00AM
![Page 150: High Performance Auto Layout - Apple](https://reader031.vdocuments.pub/reader031/viewer/2022011905/61d6bce28d73fc1794325326/html5/thumbnails/150.jpg)