IBDesignable / IBInspectable

Talk on the new abilities in Xcode to create custom views that can be viewed in Storyboard with example.

Transcript

1. IBDesignable/IBInspectable Bret Dahlgren
2. IBDesignable • Introduced in Xcode 6.0 • While in Interface Builder, code is run to generate custom view • custom view is displayed on screen • exposed properties using IBInspectable can be altered on the fly. Changes camel type into words for debugging and reuse. 2
3. Swift code @IBDesignable class MoonPhaseView: UIView { @IBInspectable var moonPhase:CGFloat @IBInspectable var shadowAlpha:CGFloat 3
4. Swift code (note) // needed for IBDesignable override init(frame: CGRect) { self.moonPhase = 0.10 self.shadowAlpha = 0.4 super.init(frame: frame) } 4
5. Objective-C Code // MoonPhaseView.h #import <UIKit/UIKit.h> IB_DESIGNABLE @interface MoonPhaseView : UIView @property (nonatomic) IBInspectable double moonPhase; @property (nonatomic) IBInspectable double shadowAlpha; 5
6. Ability to debug right in IB • Interface Builder with Assistant Editor open to code • Add breakpoint(s) • Select custom view in IB • Choose Editor-> Debug Selected Views (at the bottom) 6
7. Special code only for IB method prepareForInterfaceBuilder {} macro TARGET_INTERFACE_BUILDER - (void)connectToMyServer { #if !TARGET_INTERFACE_BUILDER // connect to the server #else // don't connect; instead, draw my custom view #endif } 7
8. DEMO - MoonPhaseView but first… 8
9. A little geometry d = a * b / c r = (c + d)/2 θ = arcsin(a/r) f = (m.x + r - c, m.y) a b c d r θ f m 9
10. Acks and Refs • Moon art by Robbie Shilling • Apple documentation - https://developer.apple.com/library/ios/ recipes/xcode_help-IB_objects_media/Chapters/ CreatingaLiveViewofaCustomObject.html • NSHipster - http://nshipster.com/ibinspectable-ibdesignable/ • https://github.com/bret3d/MoonPhaseView 10