How to preview your layout in different devices
About 2 min
How to preview your layout in different devices 관련
SwiftUI by Example
Back to Home
How to preview your layout in different devices | SwiftUI by Example
How to preview your layout in different devices
Updated for Xcode 15
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 14”.
For example, this shows a preview on the iPhone 14 Pro Max:
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone 14 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 14"))
.previewDisplayName("iPhone 14")
ContentView()
.previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro Max"))
.previewDisplayName("iPhone 14 Pro Max")
}
}
Similar solutions…
How to preview your layout at different Dynamic Type sizes | SwiftUI by Example
How to preview your layout at different Dynamic Type sizes
How to preview your layout in light and dark mode | SwiftUI by Example
How to preview your layout in light and dark mode
How to preview your layout in a navigation view | SwiftUI by Example
How to preview your layout in a navigation view
How to preview your layout in portrait or landscape | SwiftUI by Example
How to preview your layout in portrait or landscape
How to return different view types | SwiftUI by Example
How to return different view types
