This document discusses using @IBDesignable to design user interfaces in Interface Builder. It explains that @IBDesignable allows custom UI classes to be rendered in Interface Builder by compiling code when a storyboard or XIB file is opened. It also describes how to define an @IBDesignable class to add a cornerRadius property to a round button that updates its layer in draw(), and discusses some limitations of using @IBDesignable like increased compilation time.

1. ⽤用 IBDesignable 作 UI
利利⽤用 @IBDesignable 與 Cocoa Touch framework

2. 游諭
iOS, C, Swift, Fastlane
GitHub,GitLab: ytyubox
iOS Developer at 19com
Life cycle: willBecomePro( )

3. Agenda
• Swift Attributes
• Interface Builder
• How it work
• How to Design
• Why / What bother

4. Swift Attributes

5. Swift Attributes
@available
@discardableResult
@nonobjc
@objc
@testable
@UIApplicationMain
@IBAction
@IBSegueAction
@IBOutlet
@IBDesignable
@IBInspectable

6. Swift Attributes
@available
@discardableResult
@nonobjc
@objc
@testable
@UIApplicationMain
@IBAction
@IBSegueAction
@IBOutlet
@IBDesignable
@IBInspectable

7. Interface Builder

8. Interface Builder
• Interface Builder allows developers to create interfaces
for applications using a graphical user interface.
• The resulting interface is stored as a .nib /.xib file, short for NeXT
Interface Builder.
• To build an interface, a developer simply drags interface objects
from the palette onto a windo.
• In this way all initialization is done before runtime, both improving
performance and streamlining the development process.
• Interface designers could ship nib files to developers, who would
then drop them into their projects.

11. How it work

12. @IBDesignable class RoundButton: UIButton {
@IBInspectable var cornerRadius:CGFloat = 0
override func draw(_ rect: CGRect) {
super.draw(rect)
clipsToBounds = cornerRadius > 0
layer.cornerRadius = cornerRadius
}
}

13. @IBDesignable class RoundButton: UIButton {
@IBInspectable var cornerRadius:CGFloat = 0
override func draw(_ rect: CGRect) {
super.draw(rect)
clipsToBounds = cornerRadius > 0
layer.cornerRadius = cornerRadius
}
}

14. @IBDesignable class RoundButton: UIButton {
@IBInspectable var cornerRadius:CGFloat = 0
override func draw(_ rect: CGRect) {
super.draw(rect)
clipsToBounds = cornerRadius > 0
layer.cornerRadius = cornerRadius
}
}

15. @IBDesignable class RoundButton: UIButton {
@IBInspectable var cornerRadius:CGFloat = 0
override func draw(_ rect: CGRect) {
super.draw(rect)
clipsToBounds = cornerRadius > 0
layer.cornerRadius = cornerRadius
}
}

16. @IBDesignable class RoundButton: UIButton {
@IBInspectable var cornerRadius:CGFloat = 0
override func draw(_ rect: CGRect) {
super.draw(rect)
clipsToBounds = cornerRadius > 0
layer.cornerRadius = cornerRadius
}
}

17. How to Design

21. Why / What bother

22. Why / What bother
• It Will Compile all the stuff in Module code base
• Every time you try to open a .storyboard / .xib file
• Cocoa Touch Framework will limit code base

24. @IBDesignable public class RoundButton: UIButton {
@IBInspectable public var cornerRadius:CGFloat = 0
override public func draw(_ rect: CGRect) {
super.draw(rect)
clipsToBounds = cornerRadius > 0
layer.cornerRadius = cornerRadius
}
}

25. @IBDesignable public class RoundButton: UIButton {
@IBInspectable public var cornerRadius:CGFloat = 0
override public func draw(_ rect: CGRect) {
super.draw(rect)
clipsToBounds = cornerRadius > 0
layer.cornerRadius = cornerRadius
}
}

26. 1. Workspace / Sub-project
2. Embedded Binaries

27. Sum up
• Let IB do the layout work
• Design Good Interface
• Sub-class UIKit
• Share Cocoa Touch Framework

28. What is next?
• More Custom UI Component
• Animation
• UITapGestureRecognizer
• SwiftUI

29. Q & A