| < 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 12.0
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 XS Max”.
For example, this shows a preview on the iPhone SE:
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone SE"))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:
#if DEBUG
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone SE"))
.previewDisplayName("iPhone SE")
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone XS Max"))
.previewDisplayName("iPhone XS Max")
}
}
}
#endif
SPONSORED Are you tired of wasting time debugging your Swift app? Instabug’s SDK is here to help you minimize debugging time by providing you with complete device details, network logs, and reproduction steps with every bug report. All data is attached automatically, and it only takes a line of code to setup. Start your free trial now and get 3 months off exclusively for the Hacking with Swift Community.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
