How can I preview a device in landscape mode in SwiftUI?

Felipe Peña picture Felipe Peña · Jun 17, 2019 · Viewed 11.1k times · Source

How can I preview a device in landscape mode in SwiftUI?

I just have a simple preview like this:

struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer

Mojtaba Hosseini picture Mojtaba Hosseini · Jun 17, 2019

You can't rotate the device in preview (yet), but you can set the size to any landscape size you want for PreviewProvider:

struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.fixed(width: 1024, height: 768))

// iPad Mini landscape size } }

This is iPad Mini landscape mode size.

Update: Xcode detects the device associated to the preview from the selected simulator at the top left of the IDE and it and will apply the safe area as you expected for some iPads and iPhones landscape mode.

Master-Detail Demo

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Master")
            Text("Detail")
        }
    }
}

Demo

Also, you can play with these two modifiers as your needs:

    .environment(\.horizontalSizeClass, .regular)
    .environment(\.verticalSizeClass, .compact)