Every year, with each release of iOS and OSX, Interface Builder gains new features that we could easily have missed out or overlooked. Dimitri Dupuis-Latour goes through all those power features that Interface Builder has to offer, including hidden gems and tips & tricks, so we can build your next- generation UI, with less code and more features.

1. Mastering Interface Builder
— Or how to stop cursing and love IB —
Dimitri Dupuis-Latour — @dupuislatour

2. Once Upon a Time
A brief History of IB

3. Interface Builder
1986

4. IB History
A Brief Story of Time…
2001
Mac OS X
1986
NeXT
2008
iPhone SDK

5. Modern IB History
A Dramatic Acceleration of Features
2011
iOS 5
AutoLayout(OSX)
Storyboards
Segue
2010
iOS 4
Xcode Integration
All-in-one window
2014
iOS 8
IBDesignable
IBInspectable
Size Classes
Custom Fonts
Localisation
2013
iOS 7
New AutoLayout
iOS7 makeover
Asset Catalogs
2012
iOS 6
AutoLayout(iOS)

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

7. Agenda
Storyboards
TableView Controllers
Static TableViews
Unwind Segue
Custom Segue Icon Font
Vector artwork
Secret shortcuts

8. Storyboards
More than just a meta XIB

9. Storyboard

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

11. Not Approved

12. • 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

13. • 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

14. • Design / communication tool
• Split them
• Removes some push() / present() code
• best feature…
Storyboards : Recap
More than just a meta XIB

15. TableView Controller
More than just a TableView + a Controller

16. • TableView Controllers = awesome
• TableView Controllers + Storyboard = Even Better !
TableView Controller

17. • Common setup for free:
.delegate, .datasource, autoresizingMasks, editButton…
• Design your cell directly in the tableView
No 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

18. • Table-View like layout
with known number of items
• Good examples:
- Settings Screen
- Detail View of a List View
Static TableView Cells
Only within a Storyboard

19. Static TableView Cells
Only within a Storyboard

20. • 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 cells
Implement delegates and call [super ] for static rows
Static TableView Cells
Only within a Storyboard

21. Unwind Segue
Push-pop-dismiss : sooo 2011

22. What are Unwind Segue ?
Auto-rewind to a specific screen

23. A B C D
E F G
Submit
navController.pop().pop()
presentingController.dismiss()
presentingController.navController.pop().pop().pop()
Problem 1: hardcoding Hierarchy in code

24. => write custom @protocols
=> Store global variable / Singleton
Problem 2: passing data back to A
A B C D
E F G
Submit

25. A B C D
E F G
Submit
@IBAction func unwindTo###
@IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}
Step 1

26. A B C D
E F G
Submit
a) manually (eg: immediate action)
b) programmatically (eg: deferred action)Step 2
@IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}

27. A B C D
E F G
Submit
Step 2a - Manually
@IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}

28. • 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

29. • "Unwind" the navigation stack
• Including through push, modal, popover, tabs, etc…
• Passes data back (replacing custom @protocols)
• Less code
Unwind Segue : Recap

30. Custom Segue
Go beyond push and modal

31. • Step 1) Select
• Step 2) Set your class
• Step 3) Enjoy !
Setup a Custom Segue

32. 3DFlip Segue
github.com/GlennChiu/
GC3DFlipTransitionStyleSegue

33. Fold Segue
https://github.com/mpospese/
MPFoldTransition

34. DoorwaySegue
github.com/jsmecham/DoorwaySegue

35. • Create your own transitions by subclassing
UIStoryBoardSegue
• Componentize transistions in reusable blocks
• Share and reuse them !
Custom Segue : Recap
Go beyond push & pop

36. Icon Font
Vector artwork, everywhere

37. Stop Using PNGs,
Start using Vector Icons
with Icon Fonts

38. FontAwesome
479 icons. 86 Ko.

39. IonIcon
733 icons. 180 Ko. iOS7 style

40. Google
Material
Design

41. Custom Font
Make Your Own !

42. • 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

43. Resolution Hell
Retina
Retina HD
Normal

44. Android : 2 more sizes !

45. Handle all color, size, state
Record
Recording…
recorded: Today, 7:00pm
Enregistrement #1
recorded: Today, 7:00pm
Enregistrement #1
2x 3x1x

46. • Use directly
• in IB
• in Code (NSAttributedString)
• Use a helper framework :
• FontAwesomeKit (iOS)
• Iconify (Android)
Helper Frameworks
New in Interface
Builder 6

47. • 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

48. Example: Attributed Text
Nom Prénom
Paris, France
⋆ ⋆ ⋆ ⋆ ⋆ 10 reviews

49. @IBOutlet private weak var locationLabel: UILabel!
// …
let icon = FAKFontAwesome.locationArrowIconWithSize(30)
locationLabel.attributedText = icon.attributedString()
Example: Attributed Text
Nom Prénom
Paris, France
⋆ ⋆ ⋆ ⋆ ⋆ 4,5

50. @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

51. Example: Stacked Icons
// No Photos please !
let icons = [
FAKFontAwesome.photoIconWithSize(30),
FAKFontAwesome.banIconWithSize(30)
]
let noPhotosPlease = UIImage(stackedIcons:icons,
imageSize:CGSizeMake(30, 30))

52. • 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

53. The Noun Project
Google Image for Icons

54. — 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

55. One More Thing
Keybord Shortcuts

56. Click Through Views
+ctrl + click⏏
shift

57. Measure distances
⌥
alt + mouse over

58. ! Insert Emoji "
Or any symbol really© ✔
+ctrl + space⌘
cmd
println("⛔ Found Error: ")
println("⚠ Warning: ")
println("✅ All Good: ")

59. Recap
Storyboards
TableView Controllers
Static TableViews
Unwind Segue
Custom Segue Icon Font
Vector artwork
Secret shortcuts

61. Dimitri Dupuis-Latour @dupuislatour
Thank You !