CODEWITHSUNDEEP
iosswiftxcodeswiftuixcode11
Felipe Peña
Felipe Peña

Reputation: 2850

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

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()
    }
}

Upvotes: 51

Views: 18775

Answers (4)

sonle
sonle

Reputation: 8959

XCode 15, iOS 17, #Preview macros

https://developer.apple.com/videos/play/wwdc2023/10252/

#Preview(traits: . landscapeLeft) { // <- use traits instead
    ContentView()
        //.previewInterfaceOrientation(.landscapeLeft) // <- no longer supported
}

Upvotes: 4

pawello2222
pawello2222

Reputation: 54466

iOS 15+ / Xcode 13+

Starting from iOS 15 we can use previewInterfaceOrientation:

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

Upvotes: 6

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 119272

Xcode 13

Now you can preview in landscape mode with .previewInterfaceOrientation modifier to make it landscapeLeft or landscapeRight.

⚠️ The following image from WWDC21 uses horizontal and vertical that is NOT available in Xcode 13 beta!

enter image description here

Old but not Useless method:

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)

Upvotes: 61

C Williams
C Williams

Reputation: 859

ContentView().previewLayout(PreviewLayout.fixed(width:568,height:320))

View - IOS screen dimensions for different devices

Upvotes: 4

Related Questions