Mobile Development

Interface Builder

Interface Builder (aka IB) is included within the Xcode IDE. You will use it to drag and drop visual elements onto a canvas and build a compelling user interface.

Let's begin with an overview of the tool, where the various buttons, toolbars and view are and why you would use them.

Overview of Interface Builder

Below is a labeled diagram describing Xcode - its panes, toolbars and general layout. In the below diagram, Xcode is currently building an example iPhone app:

  1. Build Controls - Runs and stops the current build
  2. Active Scheme, Device - Selectable list of schemes and available simulator and connected devices to run the build
  3. Project Status - Current status of the project including active errors and warning counts
  4. Project Navigator - List of files contained in your project or workspace
  5. Quick Controls - Contains a filter for the above Project Navigator
  6. Interface Builder - Represents an abstract view used for positioning and layout. Meat and potatoes. Where you will spend most of your time when buliding UI.
  7. Storyboard Configuration - Selectable variants of the above storyboard used to differeniate specific layouts for varying devices
  8. Autolayout Constraints - Add new constraints, and respond to constraint errors. Also contains the ability to remove contraints.
  9. Library - UI Library available for Interface Builder
  10. Utility Pane - Configuration and utility functions available per file or control within Interface Builder

As with other parts of Xcode, the more you use the tool, the more familiar you will become with it.

[Video] Universal Storyboards

This is a little advanced in detail, but from a cursory overview, you can watch how this developer moves through Interface Builder, configuring Xcode and navigating various controls and utilities.

Interface Builder

Although some of that video was advanced, have no fear. We will be returning to Interface Builder in later chapters.

References

Overview of Interface Builder - https://developer.apple.com/xcode/interface-builder/

Build a User Interface - https://developer.apple.com/library/ios/recipes/xcode_help-interface_builder/Chapters/AboutInterfaceBuilder.html

Advanced - Visual Debugging with Xcode https://developer.apple.com/library/ios/recipes/xcode_help-debugger/using_view_debugger/using_view_debugger.html