Interacting with previews in the canvas
Use the canvas controls to test your view’s appearance and behavior on different devices and configurations.
Overview
Previews let you interact with your views and identify interface issues without needing to run your app. Most projects that you create from a template, and most sample code projects, have previews in their interface files. You can also generate previews and playgrounds using coding intelligence.
To view previews, in the Project navigator, select an interface file that contains a preview macro. Xcode opens the file in the source editor on the right. To display the preview in the file, click Show Canvas in the upper-right corner of the project window toolbar. If the canvas is paused, click the Restart button to run the preview.
[Image]
If you add multiple preview and playground macros to a file, you can switch between them using the tabs that appear at the top of the canvas. Xcode uses the name that you pass to the macro as the label for that preview.
For more information on adding previews and playgrounds, see Adding previews to your interface files and Running code snippets using the playground macro.
Interact with your view in live mode
Use live mode to test control logic, animations, text entry, and responses to asynchronous code. The behavior of a live mode preview is similar to running your app on a simulated or physical device.
To switch to live mode, click the Live button in the lower-left corner of the canvas and interact with the single device preview that appears. This is the default mode for new previews that you add to your interface files.
[Image]
Change the preview screen size
To verify that your interface adjusts for different device sizes, you can change the preview to an arbitrary size without switching device types.
Click the Resizable button in the lower-left corner of the canvas. Then drag a handle on the top, bottom, or sides of the preview to resize the screen. Alternatively, enter dimensions for the screen at the bottom of the canvas.
[Image]
Highlight code using selectable mode
Use selectable mode to display preview code while interacting with it in the canvas.
To highlight the code for an element in the source editor, click the Selectable button in the lower-left corner of the canvas, and double-click the element in the canvas. Xcode highlights both the element in the canvas and the corresponding code in the source editor.
[Image]
Then you can change the code for the element in the source editor and see the results immediately in the canvas.
Compare different view configurations
Use variant mode to compare your view in different configurations side by side. For example, test how well your view supports different device orientations and text sizes for accessibility.
Click the Variant button in the lower-left corner of the canvas and choose a variant option from the pop-up menu:
[Image]
- Color Scheme Variants
Displays light and dark appearances of your view.
- Contrast Variants
Displays different contrasts of your view.
- Control Borders Variants
Displays the edges and borders of interactive controls, such as buttons.
- Orientation Variants
Displays your view in different portrait and landscape orientations.
- Dynamic Type Variants
Displays your view in different accessibility text sizes.
Test views with different device settings
Choose a specific device from the Preview Device pop-up menu in the lower-right corner of the canvas, such as an iPhone or My Mac. Then select device-specific options from the Device Settings button in the lower-right corner of the canvas.
For example, to see how your view looks in dark appearance, landscape right orientation, and extra large text:
Click Device Settings in the lower-right corner of the canvas.
Toggle Color Scheme on and select Dark Appearance under Color Scheme.
Toggle Orientation on and select Landscape Right under Orientation.
Toggle Dynamic Type on, and move the Dynamic Type slider to the X Large text setting.
[Image]
To reproduce interface issues, try turning on a combination of variant and device settings. For example, to see how your view adapts to different languages, select Orientation Variants from Variants. The canvas shows multiple orientations of your view. Then turn Language on and select a localization in Device Settings.
Capture screenshots of previews
To take a screenshot, click the Screenshot button in the lower-right corner of the canvas. In the sheet that appears, enter a file name, choose a location, and click Save.