CODEWITHSUNDEEP
swiftswiftui
radicalappdev
radicalappdev

Reputation: 1422

SwiftUI Navigation on iPad - How to show master list

My app has simple navigation needs

I have this setup and working on iPhone, but when I run the app on iPad in portrait mode the master list is always hidden.

I'm using .isDetailLink(false) on the navigation link from the first list to the second, so both lists always stay in the master column. In iPad landscape everything works as expected but in portrait the detail view fills the screen. I can swipe in from the left side of the screen to show the list but I'd like to provide more clarity to the user.

I'd like to show or add the back button to show the master/list side (sort of like the Apple Notes app). On the iPhone I get the back button by default but on iPad in portrait mode there is nothing in its place.

This is what I see on iPhone enter image description here

But this is what I see on iPad enter image description here

Parent list

struct ParentList: View {

    let firstList = ["Sample data 01", "Sample data 02", "Sample data 03", "Sample data 04", "Sample data 05"]

    var body: some View {
        NavigationView {
            List{
                ForEach(firstList, id: \.self) { item in
                    NavigationLink(destination: ChildList()){

                        Text(item)
                    }
                    .isDetailLink(false)

                }
            }
        }
    }
}

Child list

struct ChildList: View {

    let secondList = ["More Sample data 01", "More Sample data 02", "More Sample data 03", "More Sample data 04", "More Sample data 05"]

    var body: some View {
        List{
            ForEach(secondList, id: \.self) { item in
                NavigationLink(destination: ChildDetail()){

                    Text(item)

                }
            }
        }
    }
}

Child detail

struct ChildDetail: View {

    var body: some View {
        Text("Child detail view")
    }

}

Update: As of Oct 17, 2019 I have not found a way to get this to work. I decided to use .navigationViewStyle(StackNavigationViewStyle()) for the time being. Interestingly, this needs to go outside of the navigation view like a normal modifier, not inside it with the navigation title.

Upvotes: 25

Views: 12149

Answers (5)

Alexander
Alexander

Reputation: 51

For my project I'm using this extension. They will always use StackNavigationViewStyle for iPhone, iPad in a vertical orientation, and if you provide forceStackedStyle: true. Otherwise DoubleColumnNavigationViewStyle will be used.


var body: some View {
  NavigationView {
    Text("Hello world")
  }
  .resolveNavigationViewStyle(forceStackedStyle: false)
}

extension View {
    func resolveNavigationViewStyle(forceStackedStyle: Bool) -> some View {
        
        if forceStackedStyle || UIDevice.current.userInterfaceIdiom == .phone {
            return self.navigationViewStyle(StackNavigationViewStyle())
                .eraseToAnyView()
        } else {
            return GeometryReader { p in
                if p.size.height > p.size.width { self.navigationViewStyle(StackNavigationViewStyle())
                } else {
                    self.navigationViewStyle(DoubleColumnNavigationViewStyle())
                }
            }
            .eraseToAnyView()
        }
    }
}

Upvotes: 0

iGhost
iGhost

Reputation: 1054

Look this solution here

I hope this help

Upvotes: 0

ptc
ptc

Reputation: 734

In portrait the default split view does not work. This may be fixed in future but it appears the current options are:
(a) change the navigation view style of your first list to .navigationViewStyle(StackNavigationViewStyle()) so the navigation will work like on iPhone and push each view.

(b) leave the style to default and only support landscape for iPad

(c) implement a UIKit split view controller

Upvotes: 36

Benjamin Kindle
Benjamin Kindle

Reputation: 1844

in iOS 13.4, a "back to master view" button has been added to the iPad layout. From the release notes:

When using a NavigationView with multiple columns, the navigation bar now shows a control to toggle the columns. (49074511)

For example:

struct MyNavView: View {
    var body: some View {
        NavigationView {
            NavigationLink(
                destination: Text("navigated"), 
                label: {Text("Go somwhere")}
            )
            .navigationBarTitle("Pick Item")
        }
    }
}

Has the following result: An iPad with a button at the top left saying "Pick Item" An iPad screenshot with a navigation column on the left side. The column has a header with the text "Pick Item"

Upvotes: 3

simonnickel
simonnickel

Reputation: 557

There also is a quite hacky workaround (see https://stackoverflow.com/a/57215664/3187762)

By adding .padding() to the NavigationView it seems to achieve the behaviour of always display the Master. 

NavigationView {
        MyMasterView()
        DetailsView()
 }.navigationViewStyle(DoubleColumnNavigationViewStyle())
  .padding()

Not sure if it is intended though. Might break in the future (works using Xcode 11.0, in simulator on iOS 13.0 and device with 13.1.2).

You should not rely on it. This comment seems to be the better answer: https://stackoverflow.com/a/57919024/3187762

Upvotes: 8

Related Questions