Splitview in SwiftUI

Hello,


Does anybody know how to create a splitview in SwiftUI for the iPad?

I mean a view like Settings, left the options and right the details.


If I use HSplitView(), I got the error: 'HSplitView' is unavailable in iOS.

VSplitView() got the same error.


Kind Regards,


Kitty

Replies

According to the SwiftUI Essentials session this is achieved the following way


NavigationView {
     MasterView()
     DetailView()
}


Unfortunately like other things shown during sessions (for example TabbedView tab items with icons) it seems to not be working right now.

I would keep an eye on upcoming betas, since the code comes from Apple it's bound to be correct - the SDK just needs to catch up.

I've tried creating a SplitView myself with a UIViewControllerRepresentable. It works initially, but it crashes in many more complex scenarios. For example, trying to use NavigationDestinationLink to drive navigation constantly causes a crash about some internal environment object not existing. My thought is that the master and detail view controllers are getting split up into two different scopes somehow and making an environment object become unreachable.


This may explain why Apple shows using a NavigationView to implicitly create a split view, so the internal environment object exists in both scopes.


I also tried to implement the SplitView manually using a delegate, but then SwiftUI ends up not laying out views, so everything appears on top of each other initially until I interact with it.


At this point, I'd just wait until Apple's official version is added.

While Swift UI is new on the scene, I'd be surprised if a splitview's related underpinnings have been abandoned.


To help bifurcate between what may/may not lie at SUI's feet, it may help to review the docs on 'combined view controller interfaces' & 'order of containment':

https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/ViewControllerCatalog/Chapters/CombiningViewControllers.html

Thanks for the reply. I'll keep an eye on the next upcoming betas.

I'm looking for just the opposite.... I don't want a splitview on the ipad when using NavigationView.


For example in this very simple view...


struct ContentView : View {

var body: some View {

NavigationView {

VStack {

Text("Hello World")

}.navigationBarTitle(Text("Nav Title"))

}

}

}


How do just get a simple view on the iPad?

Thanks!

To get a regular NavigationView on iPad just force the navigationViewStyle to .stack.


NavigationView {

VStack {

Text("Hello World")

}.navigationBarTitle(Text("Nav Title"))

}.navigationViewStyle(.stack)

Hi,


How to add NavitaionBarTitle for the DetailView in SplitView?. I was able to add it for the master but for detail, it's not adding?. Am I missing something?

I am pretty sure that the tutorial example makes that happen automatically. If not then try what I did below, worke for me:


The JobTableView below will open in the detail section when running on an iPad otherwise it replace the master on an iPhone. I however have a problem to figure out and that is how to have JobTableView replace the master instead of opening in the detail. If anyone knows, please advise.


struct ContentView : View {
    private var jobs =  Jobs()
    var body: some View {
        NavigationView{
            List {
                NavigationLink(destination: JobTableView(jobs: self.jobs)) {
                    MenuRowView(title: "Job System", subTitle: "Job System Detail")
                }
                MenuRowView(title: "Abc123", subTitle: "bbb")
               
            }
            .navigationBarTitle("TITLE", displayMode: .inline)
        }
    }
}


struct JobTableView : View {
    @ObjectBinding var jobs: Jobs
    
    var body: some View {
        NavigationView{
            List(jobs.list ?? []) { job in
                JobTableViewCell(job: job)
            }
            .navigationBarTitle("Jobs", displayMode: .inline)
                .navigationBarItems(trailing:
                    Button(action: {
                        self.isNewJobPresented = true
                    }, label: {
                        Text("New")
                    })
            )
        }
    }
}

Note that as of the release version of SwiftUI that would be...


NavigationView {
...
}
.navigationViewStyle(StackNavigationViewStyle())


In keeping with all of the general "structs as styles" changes in SwiftUI.

For some reason it's not working for me on iPad. Still see my window glued to the left side of the screen.

To force the NavigationLink to push onto the master, use the modifier

.isDetailLink(false)