Xcode is an Integrated Development Environment (IDE) built by Apple for programmers to develop applications for Apple platforms (macOS, iPadOS, iOS, watchOS, tvOS, and visionOS). The app is loaded with tons of features, which make the developer’s life easy, Preview being one of them. In this article, we will discuss how you can use Xcode Previews effectively and make the most out of it.
What are Xcode Previews?
Available on Xcode 11 and its later versions, Previews, along with Predictive Code Completion, is my favorite feature. It allows you to see the visual representation of your code without running the whole app, using simulators and real devices. You can see the live Preview of your code on the right side of the Canvas, helping you view and test code changes in real time (For example, you can see the GIF below).
How to Use Xcode Previews?
After installing Xcode for Windows, you can use Previews to view the UI design of an app in real time while coding on different frameworks such as SwiftUI, UIKit, and AppKit.
Adding a Preview to Your View in Xcode
You can add a Preview Canvas using the “Preview Macro” snippet.
Preview Macro- Preview Macro is a snippet of code that makes and configures a view. They are not nested inside of any “Types” or “Functions.”
Preview Macro: #Preview
To add a Preview in Xcode, you can follow the given steps.
- Open the Xcode app on your Mac.
- Create a new project or open an existing one.
- Select the Interface as per your choice. Here, we choose SwiftUI as our interface.
- After creating a new project, the Preview will be shown automatically on the right side of the screen (Canvas) after loading.
- If you open an existing project, the Preview may not appear on your screen. In this case, you must ensure that you have enabled the “Canvas” option. You can enable it by going to “Adjust Editor Options” (Top right corner ) > Canvas.
- If you have enabled the Canvas option and even after that, you are unable to see the Preview, then make sure that you have added the Preview Macro in your SwiftUI file.
Customizing Preview in Xcode
After adding the Preview, you can customize the Preview according to your needs, such as you can change the Preview device, size, orientation, etc, with the help of various options available at the bottom corner of the Preview (Canvas) section.
Preview Modes
Three different Preview modes can be used to view the Preview of your code from different perspectives. Options for Preview Modes are present in the left corner of the screen, just below the Canvas.
Live Mode
Live Mode is the default Preview Mode in Xcode. It is an interactive Preview mode, and with the help of this mode you can interact with your Preview in Canvas as like in a simulator, or device or in a real app.
For example, if we add a button in our code, then we can press the button in the Canvas section in real time, as you can see in the GIF below.
Select Mode
Select mode shows a snapshot of your Preview, and whenever you interact with any element in the Canvas, it highlights the corresponding code line, helping you do quick edits.
Variants Mode
With the help of Variant mode, you can see various different Previews for a particular attribute (size, color, etc.) simultaneously. There are three options in variants mode that you can choose to see multiple previews simultaneously. This particular feature is not available on many competitive IDEs.
Color Scheme Variants
Using this option, you can display your Preview in light and dark appearances in the Canvas simultaneously.
Orientation Variants
With the help of this option, you can display your Preview in different orientations, such as landscape and portrait.
Dynamic Type Variants
This option helps you preview different text sizes for your app and gives you an idea about how the UI looks in different scenarios.
You can inspect an individual variant by clicking on it, and then you can move to the next or previous variant by clicking on the “Arrow” present in the respective direction, as shown in the GIF below.
Device Settings
With the help of “Device Settings,” you can change the Color Scheme, Orientation, and Dynamic Type in a particular Preview mode. To change the attribute (Color Scheme, Orientation, etc.), you need to enable the particular attribute by toggling it on and selecting the options in it accordingly (Light Appearance, Portrait, etc.).
Preview Device
You can change your Preview device in the Canvas section by clicking on the “Help” button below the Canvas (red rectangle in screenshot below). You can choose between the various devices available in it as per your choice.
Zoom
Using this option, you can zoom in and out of your Preview as per your needs. It is present at the right side of the screen, below the Preview Canvas.
Here are the following Zoom options from left to right in the screenshot above.
- Zoom Out
- Zoom to 100%
- Zoom to Fit
- Zoom In
Assigning a Name to the Preview Macro
You can assign a name (optional) to your Preview Macro, which can help you track a particular Preview display in case of multiple Preview Macros. You can add the name to your Preview Macro as a string, and that will appear as a title in the Preview Canvas.
This was all about Xcode Previews and how you, as a developer, can make the most of this amazing tool. With the help of Xcode Previews, you can speed up your development process by removing the need to run the entire app frequently in a simulator or real device to check minute UI changes in the code.
So, you’re welcome!