Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ITT 2015 - Dimitri Dupuis-Latour - Mastering Interface Builder

ITT 2015 - Dimitri Dupuis-Latour - Mastering Interface Builder

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.

Istanbul Tech Talks

April 27, 2015
Tweet

More Decks by Istanbul Tech Talks

Other Decks in Programming

Transcript

  1. Mastering Interface Builder — Or how to stop cursing and

    love IB — Dimitri Dupuis-Latour — @dupuislatour
  2. 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)
  3. Storyboard • Bird’s eye view • Visual way describe workflow

    • Communication Tool • Living Documentation
  4. • 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
  5. • 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
  6. • Design / communication tool • Split them • Removes

    some push() / present() code • best feature… Storyboards : Recap More than just a meta XIB
  7. • 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
  8. • 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
  9. • 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
  10. A B C D E F G Submit navController.pop().pop() presentingController.dismiss()

    presentingController.navController.pop().pop().pop() Problem 1: hardcoding Hierarchy in code
  11. => write custom @protocols => Store global variable / Singleton

    Problem 2: passing data back to A A B C D E F G Submit
  12. A B C D E F G Submit @IBAction func

    unwindTo### @IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {} Step 1
  13. 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) {}
  14. A B C D E F G Submit Step 2a

    - Manually @IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}
  15. • 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
  16. • "Unwind" the navigation stack • Including through push, modal,

    popover, tabs, etc… • Passes data back (replacing custom @protocols) • Less code Unwind Segue : Recap
  17. • Step 1) Select • Step 2) Set your class

    • Step 3) Enjoy ! Setup a Custom Segue
  18. • Create your own transitions by subclassing UIStoryBoardSegue • Componentize

    transistions in reusable blocks • Share and reuse them ! Custom Segue : Recap Go beyond push & pop
  19. • 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
  20. Handle all color, size, state Record Recording… recorded: Today, 7:00pm

    Enregistrement #1 recorded: Today, 7:00pm Enregistrement #1 2x 3x 1x
  21. • Use directly • in IB • in Code (NSAttributedString)

    • Use a helper framework : • FontAwesomeKit (iOS) • Iconify (Android) Helper Frameworks New in Interface Builder 6
  22. • 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
  23. @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
  24. @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
  25. Example: Stacked Icons // No Photos please ! let icons

    = [ FAKFontAwesome.photoIconWithSize(30), FAKFontAwesome.banIconWithSize(30) ] let noPhotosPlease = UIImage(stackedIcons:icons, imageSize:CGSizeMake(30, 30))
  26. • 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
  27. — 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
  28. ! Insert Emoji " Or any symbol really©✔ + ctrl

    + space ⌘ cmd println("⛔ Found Error: ") println("⚠ Warning: ") println("✅ All Good: ")