| < How to preview your layout in light and dark mode | How to preview your layout in a navigation view > |
How to preview your layout in different devices
Updated for Xcode 14.0 beta 1
Xcode’s SwiftUI preview lets us show our designs in multiple screen sizes at the same time using the .previewDevice() modifier. This needs to be provided with the exact name of a device as seen in Xcode’s destination menu, e.g. “iPhone 12”.
For example, this shows a preview on the iPhone 12 Pro Max:
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro Max"))When using specific devices for previewing, you’re likely to find it useful to add in the .previewDisplayName() modifier, which lets you put a name under a device in the preview window.
For example, this creates two previews for two different devices, adding the name of each to make it clear what’s going on:
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone 12"))
.previewDisplayName("iPhone 12")
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro Max"))
.previewDisplayName("iPhone 12 Pro Max")
}
}
SAVE 50% To celebrate WWDC22, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
