Interface Builder Built-In

The Interface Builder editor within Xcode makes it simple to design a full user interface without writing any code. Simply drag and drop windows, buttons, text fields, and other objects onto the design canvas to create a functioning user interface.

Because Cocoa and Cocoa Touch are built using the Model-View-Controller pattern, it is easy to independently design your interfaces, separate from their implementations. User interfaces are actually archived Cocoa or Cocoa Touch objects (saved as .nib files), and macOS and iOS will dynamically create the connection between UI and code when the app is run.

Storyboards

A complete iOS app is composed of multiple views through which the user navigates. The relationships between these views are defined by storyboards, which show a complete view of your app’s flow. Interface Builder’s storyboard designer makes it easy to create and design new views, and chain them together to create a complete user interface that’s ready for your custom code.

Xcode includes storyboard controllers for:

  • Table View Controller
  • Collection View Controller
  • Navigation Controller
  • Tab Bar Controller
  • Page View Controller
  • GLKit View Controller
  • Or build your own

Assistant

Open the Assistant when editing your Storyboard or .xib file to quickly connect UI controls to the code that implements their behavior. If you don’t have the code written yet, Xcode will offer to create the stub for the action (method to launch) or outlet (variable to hold data) that will provide the logic for your interface.

Auto Layout

Both iOS and macOS include a powerful layout system called Auto Layout, with excellent support built in to Interface Builder. Auto Layout is based on the idea that each object in your interface can define a constraint to control how it reacts to the parent view and other interface controls. For example, you can prioritize whether a button stays a specific size or expands to accommodate larger text when displaying a different language.

Interface Builder can automatically create all your constraints for you, ensuring a set of compatible rules. You can also take direct control of constraints to define the exact priority of each, defining how your app will work on different screen sizes, when rotated, or when run in new locales.

Preview

Use the Preview mode to quickly view your interface in a variety of situations without having to run your app, dramatically speeding up the iterative design process. You can view your app in portrait or landscape format, on a previous version of iOS, on different screen sizes, and more.