Notes from "Implementing UI Designs in Interface Builder"

imlementing_ui_designs_in_Ib.md

Implementing UI Designs in Interface Builder

Speakers: Kevin Cathey, Tony Ricciardi (Interface builder engineers)

tl;dr: IB helps you save time

Presentation Outline

• IB at design time
• IB at build time
• IB at run time

Design time - Best practices, tips and tricks

• Note: not totally organized teh same as the talk
• Demo case - add a tab to a road trip application, based on a design spec from designer
  • Design specs tell you about layout + appearance
• Tip 1: Adapt autolayout. Specifically stack views.
  • Autolayout abstracts ?? into relationships
  • Stack view abstracts relationships into behaviors
  • Stack view button in bottom right corner of canvas, by other constraint buttons
  • Stack views have all sorts of attributes. Alignment, distrubtion, spacing.
    • Alignment: i.e baseline, top, center. Affects the non(?)-stacking direction
  • Stack views can be stacked
  • You can constrain your stackview to the view's margins, and then you don't have to separately constrain each item to the margins.
  • You can use constraints to finetune the layout within the stack view
  • "Our recommendation - try to use stack views first, and only use constraints when you need to"
  • Axis property of stack view: allows you to add a size class customization. i.e - you can have a stack view that lays out horizontally for regular width screens, but vertically for compact width sceens
• Xcode protipe #1: Fast selection. Ctrl+left click (or right click) to see subviews of a view
• Tip 2(?): Appearance.
  • 3 best practices:
    1. Dynamic type styles. They're defined by the system. They auto-adjust based on user's settings, i.e if they bump the font size up (via settings) while your app is running. Includes Headline, title, etc.
    2. Designables: See programmatic code inside IB canvas. Really simple 2 step process: first, mark subclass of UI view as @IBdesignable, then set an IB view's class to be that subclass.
    3. Inspectables - Generates IB menu/dropdown for editing those properties
  • Goal of designables + inspectables is to enable rapid iteration on design w/o having to build app.
• XCode protip #3: Advanced navigation. Choose where to open a file
• CTRL + Click and drag to create segue between scenes
• IB -> Simualted metrics section: what will my app look like if the top bar is black? What if it's in an iPhone 4? Etc. Answers quesions about what the app will look like at run time.
• Preview Assistant: See what app looks like on multiple devices AT THE SAME TIME
• XCode 7 lets you add multiple bar buttons to a navbar
• Select VC's you want to move from storyboard: Editor menu -> refactor storyboard: Moves selected VC's to their own storyboard, and adds a reference to the old storyboard

Build time

• Storyboards get compiled down to nib files. 1 nib file for a view controller, one for its view
• IB wants to minimize the # of nib files it creates - they're both small and optimized
• Views + view controllers aren't loaded into memory until they're requested
• dequeueReusableCell... - cells aren't loaded until their dequeued. Nib files are reused.

Run time

• 3 ways to control UI at run time: connections (ib actions + ib outlets), API, adaptability (autolayout, size classes)
• Connections:
  • Implicitly unwrapped optionals. Safe to use after viewDidLoad
• Storyboard API
  • Can initialize a storyboard, instatiate view controllers from a storyboard
  • Perform segues
  • iOS 9: Can now subclass segues.
• Adaptability
  • Autolayout
  • Size classes

Run time demo

• Storyboards let you have container views for child view controllers
• UIViewControllers have a storyboard property
• You can edit views that aren't initially part of your view hierarchy
• Outlet collections: useful for adding/removing groups of subviews or constraints all at once
• Outlets only need to be weak if they reference their parents. What??? Is this specific to storyboards?