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

TableView ControllerMore than just a TableView + a Controller

• TableView Controllers = awesome

• TableView Controllers + Storyboard = Even Better !

TableView Controller

• Common setup for free: .delegate, .datasource, autoresizingMasks, editButton…

• Design your cell directly in the tableViewNo more extra xib just for a cell No more registerCell / registerClass

• Pull-to-Refresh for (almost) free

• Keyboard handling for free:Textfield at bottom of a form : will scroll up automagically

TableViewController Whether in a XIB or Storyboard

• Table-View like layoutwith known number of items

• Good examples:- Settings Screen- Detail View of a List View

Static TableView Cells Only within a Storyboard

Static TableView Cells Only within a Storyboard

• No dequeing

• No delegate to implement

• Directly set the number of cells & sections header/footer section title, etc…

• Outlet directly to a cell or a cell subview

• Mix static and dynamic cellsImplement delegates and call [super ] for static rows

Static TableView Cells Only within a Storyboard

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

Icon FontVector artwork, everywhere

Stop Using PNGs, Start using Vector Icons

with Icon Fonts

FontAwesome479 icons. 86 Ko.

IonIcon733 icons. 180 Ko. iOS7 style

Google Material Design

Custom FontMake Your Own !

• Vector !

• Light

• Change color, size, state, shadows… on the fly

• Works on the Web & Android too !

• No need for 3 resolutions for each icon

Advantages

Resolution Hell

RetinaRetina HD

Normal

Android : 2 more sizes !

Handle all color, size, state

! Record

! Recording…

! recorded: Today, 7:00pmEnregistrement #1 "

! recorded: Today, 7:00pmEnregistrement #1 "

!

2x

!

!

!

!

3x

!

!

!

!

1x

!

!

!

• Use directly • in IB • in Code (NSAttributedString)

• Use a helper framework : • FontAwesomeKit (iOS) • Iconify (Android)

Helper Frameworks

New in Interface Builder 6

• iOS library to ease FontAwesome Integration

• pod ‘FontAwesomeKit’

• Create / Modify / Stack icons from code

• Generates UIImage or NSAttributedString

• Bundles 4 popular Icon Fonts (1594 icons, 380Ko)

FontAwesomeKit github.com/PrideChung/FontAwesomeKit

Example: Attributed Text

Nom Prénom

# Paris, France⋆ ⋆ ⋆ ⋆ ⋆ 10 reviews&

@IBOutlet private weak var locationLabel: UILabel!

// …

let icon = FAKFontAwesome.locationArrowIconWithSize(30) locationLabel.attributedText = icon.attributedString()

Example: Attributed TextNom Prénom

# Paris, France⋆ ⋆ ⋆ ⋆ ⋆ 4,5&

@IBOutlet private weak var userPicture: UIImageView!

// …

let icon = FAKFontAwesome.userIconWithSize(30) icon.addAttribute(NSForegroundColorAttributeName, value:UIColor.lightGrayColor())

userPicture.image = icon.imageWithSize(CGSize(width: 44, height: 44)) userPicture.layer.borderColor = UIColor.darkGrayColor().CGColor userPicture.layer.borderWidth = 1 userPicture.layer.cornerRadius = 22

Example: User Picture Placeholder

Nom Prénom# Paris 9ème⋆ ⋆ ⋆ ⋆ ⋆ 4,5&

Example: Stacked Icons

// No Photos please ! let icons = [ FAKFontAwesome.photoIconWithSize(30), FAKFontAwesome.banIconWithSize(30) ]

let noPhotosPlease = UIImage(stackedIcons:icons, imageSize:CGSizeMake(30, 30))

• Great to centralize your assets, across your properties (website, iOS app, android app)

• Desktop Tools (Glyphs.app, FontLab…)

• Online Tools (icomoon.io, prototypo.io…)

• Check thenounproject.com

Creating your own Font Icons

The Noun Project Google Image for Icons

— Joan Zapata, Creator of Iconify Library

« If, like me, you're tired of copying 3 images (@1x, @2x, @3x) for each icon you want to use in your app, for each color you

want to use them with, and bang your head on the wall when you suddenly need to change their color or size, then I think

Icon Font can help you. »

Icon Fonts: One-sentence Summary

One More ThingKeybord Shortcuts

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: ")

RecapStoryboards

TableView ControllersStatic TableViews

Unwind SegueCustom Segue Icon Font

Vector artworkSecret shortcuts

Dimitri Dupuis-Latour ' @dupuislatour

Thank You !