56

Click here to load reader

IBDesignable - CocoaConf Seattle 2014

Embed Size (px)

Citation preview

Page 1: IBDesignable - CocoaConf Seattle 2014

Instant Gratificationin Interface Builder

Page 2: IBDesignable - CocoaConf Seattle 2014

Making Views

Page 3: IBDesignable - CocoaConf Seattle 2014

Where’s the subview?

Page 4: IBDesignable - CocoaConf Seattle 2014

See Constraints

Page 5: IBDesignable - CocoaConf Seattle 2014

Show Bounds

Page 6: IBDesignable - CocoaConf Seattle 2014
Page 7: IBDesignable - CocoaConf Seattle 2014
Page 8: IBDesignable - CocoaConf Seattle 2014

Playgrounds

Page 9: IBDesignable - CocoaConf Seattle 2014

IBDesignable

Page 10: IBDesignable - CocoaConf Seattle 2014

See your view live in Interface Builder

Page 11: IBDesignable - CocoaConf Seattle 2014

Tweak your view live in Interface Builder

Page 12: IBDesignable - CocoaConf Seattle 2014

What’s in it for me?

Page 13: IBDesignable - CocoaConf Seattle 2014

DRY

Page 14: IBDesignable - CocoaConf Seattle 2014

DRY

(Insert Seattle joke here)

Page 15: IBDesignable - CocoaConf Seattle 2014

DRY

(Insert Seattle joke here)

Page 16: IBDesignable - CocoaConf Seattle 2014

MVC

Page 17: IBDesignable - CocoaConf Seattle 2014

MVC

Page 18: IBDesignable - CocoaConf Seattle 2014

⌘-R

Page 19: IBDesignable - CocoaConf Seattle 2014

self.borderWidth = 10;

Page 20: IBDesignable - CocoaConf Seattle 2014

Build & Run. Get to screen.

Observe Cool UI.

Page 21: IBDesignable - CocoaConf Seattle 2014

self.borderWidth = 20;

Page 22: IBDesignable - CocoaConf Seattle 2014

Build & Run. Get to screen.

Observe Cool UI.

Page 23: IBDesignable - CocoaConf Seattle 2014

self.borderWidth = 15;

Page 24: IBDesignable - CocoaConf Seattle 2014

Build & Run. Get to screen.

Observe Cool UI.

Page 25: IBDesignable - CocoaConf Seattle 2014

Repeat

Page 26: IBDesignable - CocoaConf Seattle 2014

Repeat ad nauseam

Page 27: IBDesignable - CocoaConf Seattle 2014

Case Study

Page 28: IBDesignable - CocoaConf Seattle 2014

All Places

Page 29: IBDesignable - CocoaConf Seattle 2014

Single Place

Page 30: IBDesignable - CocoaConf Seattle 2014

Single PlaceAll Places

Page 31: IBDesignable - CocoaConf Seattle 2014

Place Map

Page 32: IBDesignable - CocoaConf Seattle 2014

Practical Application

Page 33: IBDesignable - CocoaConf Seattle 2014

From Zero to VisibleDemo

Page 34: IBDesignable - CocoaConf Seattle 2014

IBInspectable

Page 35: IBDesignable - CocoaConf Seattle 2014

IBInspectable Properties• Boolean

• Integer / Float

• String / Localized String

• CGRect CGPoint CGSize

• Color

• Range

• Nil

Page 36: IBDesignable - CocoaConf Seattle 2014

Update LiveDemo

Page 37: IBDesignable - CocoaConf Seattle 2014

Problems

Page 38: IBDesignable - CocoaConf Seattle 2014

Problems and Solutions

Page 39: IBDesignable - CocoaConf Seattle 2014

NSFont・UIFont

Page 40: IBDesignable - CocoaConf Seattle 2014

Debugging / Logging

Page 41: IBDesignable - CocoaConf Seattle 2014

public func liveDebugLog(message: String) { #if !(TARGET_OS_IPHONE) // ENSURE LOG FILE EXISTS let logPath = "/tmp/XcodeLiveRendering.log" let fm = NSFileManager.createIfNecessary(logPath) // GET FILE HANDLE var fileHandle = NSFileHandle(forWritingAtPath: logPath)! fileHandle.seekToEndOfFile() // WRITE OUT LOG let data = message.asUTF8Data fileHandle.writeData(data)

#endif

}

Page 42: IBDesignable - CocoaConf Seattle 2014

CocoaPods

Page 43: IBDesignable - CocoaConf Seattle 2014

$ gem update cocoapods

Page 44: IBDesignable - CocoaConf Seattle 2014

# build for all architectures post_install do |installer| installer.project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO' end end end

Page 45: IBDesignable - CocoaConf Seattle 2014

Can’t drag and drop from subview UIControls to

create IBActions

Page 46: IBDesignable - CocoaConf Seattle 2014

videoControlsView?.playButton.addTarget(self,

action: Selector("tappedPlayButton"),

forControlEvents: UIControlEvents.TouchUpInside)

Use Target-Action

Page 47: IBDesignable - CocoaConf Seattle 2014

IBInspectable properties of subviews aren’t

exposed.

Page 48: IBDesignable - CocoaConf Seattle 2014

Preemptive Q&A

Page 49: IBDesignable - CocoaConf Seattle 2014

Do I have to use a separate framework?

No

Page 50: IBDesignable - CocoaConf Seattle 2014

Does this work in Objective-C?

Yes

Page 51: IBDesignable - CocoaConf Seattle 2014

Can I do my view layout in Interface Builder?

Probably

http://justabeech.com/2014/07/27/xcode-6-live-rendering-from-nib/

Page 52: IBDesignable - CocoaConf Seattle 2014

Resources

Page 53: IBDesignable - CocoaConf Seattle 2014

Debugging

Page 54: IBDesignable - CocoaConf Seattle 2014

Using Assets

Page 55: IBDesignable - CocoaConf Seattle 2014

Apple Docs

https://developer.apple.com/library/ios/recipes/xcode_help-IB_objects_media/chapters/

CreatingaLiveViewofaCustomObject.html

Page 56: IBDesignable - CocoaConf Seattle 2014

@MartinJNash Seattle