PanelKit is a UI framework that enables floating and pinned panels on iOS. Learn about the ins and outs of this open source Swift library.

1. by Louis D'hauwe

2. Who?
Louis D'hauwe
Est. 1995
iOS Developer @ Next Apps
College dropout !
#TeamTabs
@LouisDhauwe

3. Demo

4. A UI framework enabling floating and
pinned panels on iOS.

5. A UI framework enabling floating and
pinned panels on iPad.

6. Why?

7. Photoshop Fix

8. Photoshop Fix

9. Photoshop CC

10. "real" Photoshop

11. We can do better!

12. Performance

13. Performance
CPU
iPad Pro
(12.9-inch, 2015)
MacBook Air
(13-inch, 2015)
0 1500 3000 4500 6000
Single-Core Multi-Core
4.157
5.238
2.439
3.083
Source: Geekbench

14. Hardware is not the issue

15. Software is

16. How?

17. Panels Panel Manager

18. View Hierarchy

20. UINavigationController

21. Root View Controller

22. Content Wrapper View

23. Content View

24. UINavigationController
Root View Controller
Content Wrapper View
Content View

29. Content View Panel

30. UINavigationController
Root View Controller
Content Wrapper View
Content View
Panel

31. Technical

34. v0.8

35. open class PanelContentViewController: UIViewController {
...
open var preferredPanelContentSize: CGSize {
fatalError("Preferred panel content size not implemented")
}
...
}
v0.8

36. open class PanelContentViewController: UIViewController {
...
open var preferredPanelContentSize: CGSize {
fatalError("Preferred panel content size not implemented")
}
...
}
class FooPanelContentViewController: PanelContentViewController {
override var preferredPanelContentSize: CGSize {
return CGSize(width: 320, height: 500)
}
}
v0.8

37. open class PanelContentViewController: UIViewController {
...
open var preferredPanelContentSize: CGSize {
fatalError("Preferred panel content size not implemented")
}
...
}
class FooPanelContentViewController: PanelContentViewController {
override var preferredPanelContentSize: CGSize {
return CGSize(width: 320, height: 500)
}
}
Need to implement,
otherwise runtime crash!
v0.8

38. Why fatalError?
open class PanelContentViewController: UIViewController {
...
open var preferredPanelContentSize: CGSize {
fatalError("Preferred panel content size not implemented")
}
...
}
v0.8

39. Why fatalError?
Swift has no abstract modifier
open class PanelContentViewController: UIViewController {
...
open var preferredPanelContentSize: CGSize {
fatalError("Preferred panel content size not implemented")
}
...
}
v0.8

40. Why fatalError?
Swift has no abstract modifier
open class PanelContentViewController: UIViewController {
...
open var preferredPanelContentSize: CGSize {
fatalError("Preferred panel content size not implemented")
}
...
}
No default value
v0.8

41. v1.0

42. Protocol-oriented

43. Protocol-oriented
interface
contract

44. open class PanelContentViewController: UIViewController {
...
open var preferredPanelContentSize: CGSize {
fatalError("Preferred panel content size not implemented")
}
...
}
Protocol-oriented

45. public protocol PanelContentDelegate {
...
var preferredPanelContentSize: CGSize { get }
...
}
Protocol-oriented

46. class FooPanelContentViewController: UIViewController, PanelContentDelegate {
}
Protocol-oriented

47. class FooPanelContentViewController: UIViewController, PanelContentDelegate {
}
Protocol-oriented

48. class FooPanelContentViewController: UIViewController, PanelContentDelegate {
var preferredPanelContentSize: CGSize {
return CGSize(width: 320, height: 500)
}
}
Protocol-oriented

49. class FooPanelContentViewController: UIViewController, PanelContentDelegate {
let preferredPanelContentSize = CGSize(width: 320, height: 500)
}
Protocol-oriented

50. Protocol-oriented
public class PanelViewController: UIViewController,
UIAdaptivePresentationControllerDelegate {
public init(with contentViewController: UIViewController,
contentDelegate: PanelContentDelegate,
in panelManager: PanelManager) {
...
}
...
}

51. Protocol-oriented
public class PanelViewController: UIViewController,
UIAdaptivePresentationControllerDelegate {
public init(with contentViewController: UIViewController,
contentDelegate: PanelContentDelegate,
in panelManager: PanelManager) {
...
}
...
}

52. public protocol PanelManager {
/// The ```UIViewController``` that manages the panels and contains
/// ```panelContentWrapperView``` and ```panelContentView```.
var managerViewController: UIViewController { get }
/// The panels to be managed.
var panels: [PanelViewController] { get }
/// The view in which the panels may be dragged around.
var panelContentWrapperView: UIView { get }
/// The content view, which will be moved/resized when panels pin.
var panelContentView: UIView { get }
...
}
Protocol-oriented

53. public extension PanelManager where Self: UIViewController {
var managerViewController: UIViewController {
return self
}
}
Protocol-oriented

54. class ManagerViewController: UIViewController, PanelManager {
var panelContentWrapperView: UIView {
return contentWrapperView
}
var panelContentView: UIView {
return contentView
}
var panels: [PanelViewController] {
return [fooPanelVC, barPanelVC]
}
}
Protocol-oriented

55. Layout

56. Autoresizing

57. Autoresizing
Struts & Springs

58. Auto Layout

59. Auto Layout
• UIKit's anchor API

60. Auto Layout
• UIKit's anchor API
panelNavigationController.view.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 1.0).isActive = true
panelNavigationController.view.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1.0).isActive = true
panelNavigationController.view.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
panelNavigationController.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

61. Auto Layout
• UIKit's anchor API
• Don't forget isActive = true
panelNavigationController.view.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 1.0).isActive = true
panelNavigationController.view.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1.0).isActive = true
panelNavigationController.view.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
panelNavigationController.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

62. Auto Layout
• UIKit's anchor API
• Don't forget isActive = true
• Always creates new constraint instance
panelNavigationController.view.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 1.0).isActive = true
panelNavigationController.view.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1.0).isActive = true
panelNavigationController.view.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
panelNavigationController.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

63. Auto Layout
• UIKit's anchor API
• Don't forget isActive = true
• Always creates new constraint instance
• Requires iOS 9.0+
panelNavigationController.view.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 1.0).isActive = true
panelNavigationController.view.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1.0).isActive = true
panelNavigationController.view.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
panelNavigationController.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

64. Open Source

65. Open Source
• github.com/louisdh/panelkit

66. Open Source
• github.com/louisdh/panelkit
• Pull requests appreciated!

67. Open Source
• github.com/louisdh/panelkit
• Pull requests appreciated!
• Complete history available

68. Open Source
• github.com/louisdh/panelkit
• Pull requests appreciated!
• Complete history available
• Versions are tagged

69. Open Source
• github.com/louisdh/panelkit
• Pull requests appreciated!
• Complete history available
• Versions are tagged
• MIT license

70. Open Source Services

71. Travis CI
• travis-ci.org

72. Travis CI
• travis-ci.org
• Build on every commit & PR

73. Travis CI
• travis-ci.org
• Build on every commit & PR
• Run tests for every build

74. Travis CI
• travis-ci.org
• Build on every commit & PR
• Run tests for every build
• Result shown in GitHub UI

75. Travis CI
• travis-ci.org
• Build on every commit & PR
• Run tests for every build
• Result shown in GitHub UI
• Free for open source projects!

76. Code Climate
• codeclimate.com

77. Code Climate
• codeclimate.com
• Runs linter on every commit & PR

78. Code Climate
• codeclimate.com
• Runs linter on every commit & PR
• Result shown in GitHub UI

79. Code Climate
• codeclimate.com
• Runs linter on every commit & PR
• Result shown in GitHub UI
• Free for open source projects!

80. Code Coverage
• codecov.io

81. Code Coverage
• codecov.io
• Shows coverage of unit tests

82. Code Coverage
• codecov.io
• Shows coverage of unit tests
• Gets results from Travis CI

83. Code Coverage
• codecov.io
• Shows coverage of unit tests
• Gets results from Travis CI
• Free for open source projects!

84. Open Source
Distribution

85. Open Source Distribution
Source

86. Open Source Distribution
Source CocoaPods

87. Open Source Distribution
Source CocoaPods Carthage

88. Open Source Distribution
Source CocoaPods Carthage SPM

89. SPM

90. Swift Package Manager
• Official dependency manager

91. Swift Package Manager
• Official dependency manager
• Included in Xcode

92. Swift Package Manager
• Official dependency manager
• Included in Xcode
• Only for macOS currently

93. Swift Package Manager
• Official dependency manager
• Included in Xcode
• Only for macOS currently
• Open source

94. Swift Package Manager
• Official dependency manager
• Included in Xcode
• Only for macOS currently
• Open source
• Written in Swift

96. Launch

97. Launch

98. Community response

99. Community response

101. Press

102. – John Gruber, Daring Fireball
“It caught my eye a few weeks ago on Twitter,
and now that I can play with it in an actual
app, I’m even more impressed with the
ingenuity.”

103. – Federico Viticci, MacStories
“The best part, in my opinion, is that panels can
be converted back to sidebars by snapping them
to the edge of the display, which is a fantastic use
of the iPad Pro's large screen.”

104. Other projects
Colorcube

105. Colorcube featured
App Store. July 22, 2016

106. Colorcube featured
Apple Special Event. September 7, 2016.

107. Other projects
Colorcube

108. Other projects
Colorcube Pixure

109. Other projects
Colorcube Pixure Leet Keyboard

110. Other projects
Colorcube Pixure Leet Keyboard

112. Universal
Apple Watch
Quick Actions
iCloud
PanelKit
Spotlight SearchLayers
Blend modes
Split View
Slide Over
Keyboard shortcuts
iTunes File Sharing
Photo Filter
Bucket Fill
Document import
Document export
Adobe Send to Desktop
3D-Touch
Peek & Pop
Share Sheet
200x Zoom

113. Universal
Apple Watch
Quick Actions
iCloud
PanelKit
Spotlight SearchLayers
Blend modes
Split View
Slide Over
Keyboard shortcuts
iTunes File Sharing
Photo Filter
Bucket Fill
Document import
Document export
Adobe Send to Desktop
3D-Touch
Peek & Pop
Share Sheet
200x Zoom

114. Demo

115. What does Apple think
of all this?

116. App Store. April 1, 2017

117. Featured!
Pixure stats from 26 March to 6 April 2017

119. Summary
• More powerful iPad UIs

120. Summary
• More powerful iPad UIs
• Written in Swift

121. Summary
• More powerful iPad UIs
• Written in Swift
• Open source

122. Summary
• More powerful iPad UIs
• Written in Swift
• Open source
• Ready for production

123. Summary
• More powerful iPad UIs
• Written in Swift
• Open source
• Ready for production
• Featured by Apple

124. Contact
Louis D'hauwe
louis@nextapps.be
@LouisDhauwe

125. Questions?