You use Interface Builder, the visual design editor that’s integrated into Xcode, to lay out your app’s user interface and make connections to your code.
Select a user interface file in the Project navigator, and the file opens in Interface Builder in the editor area. The first time you open a user interface file, a sheet appears asking you to choose a device family from a pop-up menu. Pick the device you expect most people will use.
The views appear in the canvas area and the structure of the underlying objects appear in the outline view. If you create your project from a template, the Main.storyboard file contains default view controllers and views that will appear when your app first launches.
To hide or show the outline view, choose Editor > Hide Document Outline or Editor > Show Document Outline. Or click the Show Document Outline button (
) at the lower-left corner of the canvas.
In the utilities area, drag objects from the Object library (
) or media files from the Media library (
) to the canvas where you lay out your user interface.
As you add object to the user interface, you can write the code that implements their behavior in the assistant editor. Use Interface Builder to visually connect the user interface objects to your code.
Start by viewing the user interface using different device configurations that you expect most users running your app will have. Then create variations of the user interface as needed.
When an object in your user interface changes its size or position, layout constraints cause that object and its neighboring objects to adjust their sizes and positions automatically. Layout constraints are represented by blue lines on the canvas.
Graphically lay out the user’s path through your app in a storyboard consisting of scenes, segues that connect the scenes, and controls to trigger the segues.
Preview your app’s user interface layout before building and running your app. You can preview different device families and localizations too.
