Mastering Interface Builder - Istanbul Tech Talks

Every year, Interface Builder gains new features that you could easily have missed out or overlooked. Storyboards, AutoLayout, Segue (including Custom Segues and Unwind Segue), IBDesignable and IBInspectable, Static TableViews, Self-sizing cells, Power of TableViewControllers, Custom Fonts, Localization workflow… We’ll go trough some of these power features that Interface Builder has to offer, including hidden gems and tips & tricks, so you can build your next-generation UI, with less code and more features.

Presented on April 27th, 2015 at Istanbul Tech Talks (http://www.istanbultechtalks.com).
Vidéo: www.youtube.com/watch?v=UvZNqn7Wn_o

Transcript

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 3x 1x
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 !