Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Once Upon a Time A brief History of IB

Slide 3

Slide 3 text

Interface Builder 1986

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Storyboards More than just a meta XIB

Slide 9

Slide 9 text

Storyboard

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Not Approved

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

• 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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

TableView Controller More than just a TableView + a Controller

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

• 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

Slide 18

Slide 18 text

• 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

Slide 19

Slide 19 text

Static TableView Cells Only within a Storyboard

Slide 20

Slide 20 text

• 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

Slide 21

Slide 21 text

Unwind Segue Push-pop-dismiss : sooo 2011

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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) {}

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

• 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Custom Segue Go beyond push and modal

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

3DFlip Segue github.com/GlennChiu/ GC3DFlipTransitionStyleSegue

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

DoorwaySegue github.com/jsmecham/DoorwaySegue

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Icon Font Vector artwork, everywhere

Slide 37

Slide 37 text

Stop Using PNGs, Start using Vector Icons with Icon Fonts

Slide 38

Slide 38 text

FontAwesome 479 icons. 86 Ko.

Slide 39

Slide 39 text

IonIcon 733 icons. 180 Ko. iOS7 style

Slide 40

Slide 40 text

Google Material Design

Slide 41

Slide 41 text

Custom Font Make Your Own !

Slide 42

Slide 42 text

• 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

Slide 43

Slide 43 text

Resolution Hell Retina Retina HD Normal

Slide 44

Slide 44 text

Android : 2 more sizes !

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

• 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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

@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

Slide 50

Slide 50 text

@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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

• 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

Slide 53

Slide 53 text

The Noun Project Google Image for Icons

Slide 54

Slide 54 text

— 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

Slide 55

Slide 55 text

One More Thing Keybord Shortcuts

Slide 56

Slide 56 text

Click Through Views + ctrl + click ⏏ shift

Slide 57

Slide 57 text

Measure distances ⌥ alt + mouse over

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Dimitri Dupuis-Latour @dupuislatour Thank You !