Mastering Interface Builder

Mastering Interface Builder

• 1.
  Mastering Interface Builder —Or how to stop cursing and love IB — Dimitri Dupuis-Latour — @dupuislatour
• 2.
  Once Upon aTime A brief History of IB
• 3.
  Interface Builder 1986
• 4.
  IB History A BriefStory of Time… 2001 Mac OS X 1986 NeXT 2008 iPhone SDK
• 5.
  Modern IB History ADramatic 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 IBlike your Grandfather ! It’s 2015
• 7.
  Agenda Storyboards TableView Controllers Static TableViews UnwindSegue Custom Segue Icon Font Vector artwork Secret shortcuts
• 8.
  Storyboards More than justa meta XIB
• 9.
  Storyboard
• 10.
  Storyboard • Bird’s eyeview • Visual way describe workflow • Communication Tool • Living Documentation
• 11.
  Not Approved
• 12.
  • Split byFeature / 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 yourscreens 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.
  Unwind Segue Push-pop-dismiss :sooo 2011
• 16.
  What are UnwindSegue ? Auto-rewind to a specific screen
• 17.
  A B CD E F G Submit navController.pop().pop() presentingController.dismiss() presentingController.navController.pop().pop().pop() Problem 1: hardcoding Hierarchy in code
• 18.
  => write custom@protocols => Store global variable / Singleton Problem 2: passing data back to A A B C D E F G Submit
• 19.
  A B CD E F G Submit @IBAction func unwindTo### @IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {} Step 1
• 20.
  A B CD E F G Submit a) manually (eg: immediate action) b) programmatically (eg: deferred action)Step 2 @IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}
• 21.
  A B CD E F G Submit Step 2a - Manually @IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}
• 22.
  • Create amanual 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
• 23.
  • "Unwind" thenavigation stack • Including through push, modal, popover, tabs, etc… • Passes data back (replacing custom @protocols) • Less code Unwind Segue : Recap
• 24.
  Custom Segue Go beyondpush and modal
• 25.
  • Step 1)Select • Step 2) Set your class • Step 3) Enjoy ! Setup a Custom Segue
• 26.
  3DFlip Segue github.com/GlennChiu/ GC3DFlipTransitionStyleSegue
• 27.
  Fold Segue https://github.com/mpospese/ MPFoldTransition
• 28.
  DoorwaySegue github.com/jsmecham/DoorwaySegue
• 29.
  • Create yourown transitions by subclassing UIStoryBoardSegue • Componentize transistions in reusable blocks • Share and reuse them ! Custom Segue : Recap Go beyond push & pop
• 30.
  One More Thing Tip& Tricks & Xcode 7 new features
• 31.
  Click Through Views +ctrl+ click⏏ shift
• 32.
  Measure distances ⌥ alt +mouse over
• 33.
  🎉 Insert Emoji" Or any symbol really©★✔ +ctrl + space⌘ cmd println("⛔ Found Error: ") println("⚠ Warning: ") println("✅ All Good: ")