Are you tired of constantly running your app on a simulator or physical device just to see how your SwiftUI or UIView changes look? Well, fret no more! Xcode Previews is here to revolutionize your development workflow.
With Xcode Previews, you can now view real-time previews of your UI changes without the need for constant building and running. Whether you’re working on a complex SwiftUI layout or incorporating a UIView into your project, Xcode Previews has got you covered.
With Xcode Previews, you can easily adjust the zoom level, preview on a physical device, and even simulate different device settings. The power is in your hands to ensure pixel-perfect designs and seamless user experiences. Xcode Previews simplifies the process by providing a dedicated preview window, making it effortless to show or hide your previews.
In this comprehensive guide, I will walk you through the ins and outs of Xcode Previews. From creating previews to utilizing multiple variants, we’ll cover it all.
Get ready to supercharge your development process and unlock the full potential of Xcode Show Preview, Xcode Preview, and SwiftUI Preview. Let’s dive in!
What are Xcode Previews?
Xcode Previews are a powerful feature in Xcode that allow developers to see real-time previews of their user interfaces while building SwiftUI and UIView-based apps. With Xcode Previews, developers can visualize and interact with their UI components without the need to constantly run the app on a simulator or device.
It provides a live preview of how the interface will look and behave, making it easier to iterate, experiment, and fine-tune the design. Xcode Previews offer a convenient way to quickly assess the visual appearance and functionality of UI elements, saving developers valuable time and effort during the development process.
Benefits of using Xcode Previews
Using Xcode Previews offers several benefits for developers. Firstly, it provides instant feedback on the user interface, allowing developers to make design decisions and adjustments on the fly. This iterative approach saves time by reducing the need for repetitive build and run cycles.
Additionally, Xcode Previews enable developers to test and validate different configurations, variants, and device sizes, ensuring that their app looks and functions correctly across various scenarios.
The ability to interact with previews in real-time also facilitates the identification of potential issues or bugs early in the development process. Overall, Xcode Previews enhance productivity, streamline the UI development workflow, and contribute to the creation of visually appealing and user-friendly apps.
How to show/hide preview window?
The Preview window in Xcode allows developers to visualize and interact with their SwiftUI or UIView previews. However, at times, you may accidentally hide the Preview window or want to toggle its visibility. Fortunately, there are a couple of ways to show or hide the Preview window in Xcode.
Use the “Adjust Editor Options” menu and toggle the “Canvas” setting
What is the shortcut for preview in Xcode?
The shortcut for preview in Xcode is Command + Option + Enter. Whit this you can quickly toggle to show and hide the preview in Xcode.
If you want to rebuild the preview you can use the shortcut Command + Option + P.
Xcode 15 Preview Marco
Xcode 15 introduced the preview macro which replaces the previous PreviewProvider. This has the advantage that you can now preview UIKit and Appkit views and view controllers directly.
@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)
#Preview(traits: .portrait, body: {
CustomUIView()
})Note that I added the availability check which allows you to use the preview macro also for projects that support older versions.
How to show multiple preview tabs
You can define multiple previews.Preview macro allows you to set a name for the tab, which is used in the canvas.
import SwiftUI
struct TitleView: View {
let title: String
var body: some View {
Text(title)
.font(.largeTitle)
.bold()
.underline()
}
}
#Preview("short title") {
TitleView(title: "Hello world")
}
#Preview("Long title") {
TitleView(title: "This is a very, very, very long title")
}
@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)
#Preview("medium title", traits: .sizeThatFitsLayout) {
TitleView(title: "This is a title")
}
Additionally, you can set traits. In the above example, I used a “sizeThatFitsLayout”. This is useful when you have very small views and you don’t want to show them on a device. Note that this only works when you are in the selectable preview.
Here is a list of all the available traits:
- fixedLayout(width: CGFloat, height: CGFloat) and sizeTahtFitsLayout
- portrait and portraitUpsideDown
- landscapeLeft and landscapeRight
Xcode 15 Preview for UIKit and Appkit
Preview macro has the advantage that you can now preview UIKit and Appkit views and view controllers directly. In the following is a simple example:
import UIKit
class CustomUIView: UIView {
...
}
@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)
#Preview(traits: .portrait, body: {
CustomUIView()
})Using the Preview Macro with SwiftUI
You can use the preview macro to show any SwiftUI in the canvas. Every time you create a new view, the new preview macro is automatically added.
import SwiftUI
struct TitleView: View {
let title: String
var body: some View {
Text(title)
.font(.largeTitle)
.bold()
.underline()
}
}
#Preview {
TitleView(title: "Hello world")
}Oftentimes you will want to show a view with a binding in the canvas. If you want to be able to edit the control view the uses this state, you can use a helper view that holds the state for the preview. In the following is a simple example:
import SwiftUI
struct ContentView: View {
@Binding var text: String
var body: some View {
TextField("type something", text: $text)
}
}
fileprivate struct PreviewView: View {
@State var text: String = "" // helper state
init(testText: String = "") {
self._text = State(initialValue: testText)
}
var body: some View {
ContentView(text: $text)
}
}
#Preview("empty text") {
PreviewView()
}
#Preview("Long text") {
PreviewView(testText: "something longer")
}Preview Controls
Preview has a lot of custom controls that help you test the different scenarios. In the following, I will walk you through all the different settings.
How to change which devise type is shown in the canvas
With Xcode 15 you can now choose whether to always use a different device as the run target or to automatically use the same device as you specified for the run target.
You can tap on the devise name and choose which device to use for the canvas. Since there are a lot of devices, most of them are now hidden behind a “More” menu:
Life Preview to Test User Interactions and Animations
You have two modes for the canvas that are used for different scenarios. If you want to test user interactions like scroll behavior or navigation links, then you should choose life preview. This is also great when you want to test animations.
Select the left most button in the bottom of the canvas.
Selectable Preview
Use the selectable preview to see which code corresponds to which view in the canvas. In the following example, I have a view text view. In order to see what the “LayeredView” is, I am selecting in. The canvas then highlights the corresponding view with a blue border. You can also use this to see quickly how large individual views are and identify how spacings and paddings are involved in the layout.
Preview Variants to show multiple simulators with different device settings
If you want to see multiple devices with different device settings at the same time, you can use the variants menu. This is great to quickly check if your design looks great in both light and dark mode. Here are the available variants in previews:
- color scheme
- dynamic type
- device orientations
Canvas Device Settings
You change individual or all of the canvas device settings at once. For example you can change the color scheme, dynamic type and device orientation.
How to zoom in/out in the canvas
You can use the zoom buttons in the bottom right corner of the canvas to :
- zoom in out and out
- zoom to 100%
- zoom to fit
Pin: how to edit one view when you want to show another view in the preview
I tend to create a lot of smaller subviews in SwiftUI. But in order to see if the view looks good, I want to see it in the context of a view higher in the view hierarchy. For example, I have the following “TestView” containing another ” TitleView ” view. I want to change the font of the title text but still see the current preview canvas. This can be done with the pin button in the canvas’s top left corner.
If I now go to another view like the “TitleView”, I have an additional tab in the preview where I can still see the “TestView”.
Conclusion
In conclusion, Xcode Previews are a game-changer for iOS developers. These powerful tools allow you to design, test, and iterate on your user interfaces with ease. By following the steps outlined in this guide, you can create Xcode Previews, customize their settings, and utilize advanced techniques to enhance your development process.
With Xcode Previews, you can save time and effort by previewing your designs in real-time, making it easier to spot and fix any issues before deploying your app. Whether you’re working with SwiftUI or UIView, Xcode Previews provide a seamless experience, allowing you to create visually stunning and user-friendly interfaces.
By incorporating Xcode Previews into your workflow, you can take your iOS development skills to the next level. So, start exploring Xcode Previews today and unlock new possibilities for creating exceptional apps.