Mastering Interface Builder

Mastering Interface Builder— Or how to stop cursing and love IB —

Dimitri Dupuis-Latour — @dupuislatour

Once Upon a TimeA brief History of IB

Interface Builder1986

IB History A Brief Story of Time…

2001

Mac OS X

1986

NeXT

2008

iPhone SDK

Modern IB History A Dramatic Acceleration of Features

2011iOS 5

AutoLayout(OSX)Storyboards

Segue

2010iOS 4

Xcode IntegrationAll-in-one window

2014iOS 8

IBDesignableIBInspectableSize ClassesCustom FontsLocalisation

2013iOS 7

New AutoLayoutiOS7 makeoverAsset Catalogs

2012iOS 6

AutoLayout(iOS)

Don’t use IB like your Grandfather ! It’s 2015

AgendaStoryboards

TableView ControllersStatic TableViews

Unwind SegueCustom Segue Icon Font

Vector artworkSecret shortcuts

StoryboardsMore than just a meta XIB

Storyboard

Storyboard• Bird’s eye view • Visual way describe workflow • Communication Tool • Living Documentation

Not Approved

• Split by Feature / Tab / Unit of workflow (eg: Login, Creation)

Split Your Storyboards ! No « One Storyboard to Rule Them All »

// STORYBOARD - Instantiate from code let storyboard = UIStoryboard(name:"LoginScreens", bundle:nil) let vc = storyboard.instantiateViewControllerWithIdentifier("MyCustomVC")

as MyCustomVC

• Chain your screens in IB

• Takes out the simpler .push() .presentViewController(), didSelectRowAtIndexPath()

• Handle the more complex ones in - prepareForSegue: (iOS) - contextForSegue: (WatchKit, iOS 9 ?)

Build Navigation Hierarchy in IB

• Design / communication tool

• Split them

• Removes some push() / present() code

• best feature…

Storyboards : Recap More than just a meta XIB

Unwind SeguePush-pop-dismiss : sooo 2011

What are Unwind Segue ?

Auto-rewind to a specific screen

A B C D

E F GSubmit

navController.pop().pop() presentingController.dismiss() presentingController.navController.pop().pop().pop()

Problem 1: hardcoding Hierarchy in code

=> write custom @protocols => Store global variable / Singleton

Problem 2: passing data back to A

A B C D

E F GSubmit

A B C D

E F GSubmit

@IBAction func unwindTo### @IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}

Step 1

A B C D

E F GSubmit

a) manually (eg: immediate action) b) programmatically (eg: deferred action)Step 2

@IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}

A B C D

E F GSubmit

Step 2a - Manually

@IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}

• Create a manual segue • ctrl-drag from File's Owner (VC) to Exit • choose Manual Segue • Select it in the outline view • Give it an Identifier "backToAPlease"

• Call it from Code

Step 2b - Programmatically

self.performSegueWithIdentifier("backToAPlease", sender:nil)

File's Owner Exit

• "Unwind" the navigation stack

• Including through push, modal, popover, tabs, etc…

• Passes data back (replacing custom @protocols)

• Less code

Unwind Segue : Recap

Custom SegueGo beyond push and modal

• Step 1) Select • Step 2) Set your class • Step 3) Enjoy !

Setup a Custom Segue

3DFlip Seguegithub.com/GlennChiu/

GC3DFlipTransitionStyleSegue

Fold Seguehttps://github.com/mpospese/

MPFoldTransition

DoorwaySeguegithub.com/jsmecham/DoorwaySegue

• Create your own transitions by subclassing UIStoryBoardSegue

• Componentize transistions in reusable blocks

• Share and reuse them !

Custom Segue : Recap Go beyond push & pop

One More ThingTip & Tricks

& Xcode 7 new features

Click Through Views

+ctrl + click⏏ shift

Measure distances

⌥alt + mouse over

🎉 Insert Emoji " Or any symbol really©★✔

+ctrl + space⌘ cmd

println("⛔ Found Error: ") println("⚠ Warning: ") println("✅ All Good: ")