View the user interface using different device configurations

In Interface Builder, use the device configuration pane to view the layout using different device configurations. For example, the layout of an iOS app can be different on an iPhone and iPad and using portrait or landscape orientation. The user interface of a tvOS app may be different using a light or dark interface style. The first time you open a user interface file, pick the device you expect most users of your app to use, and then create variations of the user interface for other devices as needed.

To open the device configuration pane, click the “View as” button in the layout bar below the canvas.

Select a device: In the Device area, select a device. The device family you select appears next to “View as” in the layout bar. For iOS apps, select an iOS device family, and for watchOS apps, select a Apple Watch size.

Select an orientation: In the Orientation area, select the portrait or landscape icon.

Select an adaptation: In the Adaptation area, select an adaptation, a variation in the amount of screen space available to your app—for example, select a split view for an iPad device.

Select an interface style: In the Interface Style area, select an interface style that affects the visual appearance—for example, the light or dark interface style on tvOS.

SEE ALSOCreate user interface variations for different device configurationsEdit trait-based variations of property values using the inspector