I use the Apple SwiftUI tutorial code. Then I set the previewDevice to iPad Pro (12.9-inch). But the preview has something wrong. Does anyone know where the problem is?
You can override the default splitView used on iPad, by having the NavigationView display the same stacked view you see on iPhone, by setting
.navigationViewStyle(StackNavigationViewStyle())
Quite helpful during development and debugging, and when you have not developed the detailedView() yet.
-
I want to see the detail view I'm working on in my preview, so this is exactly what I needed to add to my
PreviewProvider
. Thanks! – Tony the Tech Dec 27 '20 at 19:26
In my case what make the difference was using StackNavigationViewStyle
and no padding were needed.
NavigationView {
...
}
.navigationViewStyle(StackNavigationViewStyle())
Slide the drawer from the left side of the screen.
If you would to remove the drawer and have it constant, you can do the following (note the padding is what makes the drawer constant):
.navigationViewStyle(DefaultNavigationViewStyle())
.padding(0)
or
.navigationViewStyle(DoubleColumnNavigationViewStyle())
.padding(0)
Note: This does not currently work perfectly with all iPad views. For example on the iPad 9.7in, the above padding(0) would make the portrait view have the list, but the landscape view have the slideout. This would also not work correctly on the iPad 12.9in. If you don't have the padding included, it works in landscape on the 9.7in, but not in portrait.
It looks like the master view (the one on the left) is hidden on iPads running iOS 13 by design. The master view is there, you can pull it out from the left edge of the screen.
Unfortunately, there is currently no API to opt-out of this behavior other than applying a non-zero padding for the leading
edge:
var body: some View {
GeometryReader { geometry in
NavigationView {
self.content
}.padding(.leading, self.leadingPadding(geometry))
}
}
private func leadingPadding(_ geometry: GeometryProxy) -> CGFloat {
if UIDevice.current.userInterfaceIdiom == .pad {
// A hack for correct display of the SplitView in SwiftUI on iPad
return geometry.size.width < geometry.size.height ? 0.5 : -0.5
}
return 0
}
-
This looked really promising, but doesn't work for Plus-sized iPhones in landscape. (The master view still needs to be dragged in manually) – Matthew Mar 22 '20 at 15:35
You have embedded your body in NavigationView.In iPad,you have to slide the drawer from left side to view your content view.
Remove NavigationView and observe the behaviour
To override default behaviour, use below code
NavigationView {
...
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
.padding()
-
I notice that, in the standard view style, the detail view in the OP's mentioned tutorial runs underneath the list view, making it useless. Using double-column style restricts the detail view to the exposed screen area, which is what the view design is expecting. – brotskydotcom Dec 27 '19 at 19:21
Using the code provided by nalexn I came up with this as the solution.
As commented by matthew in the same post iPhones in landscape mode will still cause the drawer to be hidden thus, using StackNavigationViewStyle()
is more suitable for iPhone whilst for iPad it will use the DoubleColumnNavigationViewStyle()
var body: some View {
GeometryReader{ geo in
if (UIDevice.current.userInterfaceIdiom == .pad){
NavigationView{
self.makeContents()
}.navigationViewStyle(DoubleColumnNavigationViewStyle())
.padding(.leading, geo.size.width < geo.size.height ? 0.25 : 0)
}else{
NavigationView{
self.makeContents()
}.navigationViewStyle(StackNavigationViewStyle())
}
}
}
Hope this helps anyone that comes to this post after me :D
.navigationViewStyle(.doubleColumn)
– A.C. Wright Jul 17 '19 at 13:32