UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

iOS 14 recommendations for TabView and NavigationView?

Forums > SwiftUI

I have developed an app which uses a TabView and a NavigationView. I want the tabs to disappear once you start navigating into other views. Despite what Paul Hudson says at the bottom of this article https://www.hackingwithswift.com/books/ios-swiftui/creating-tabs-with-tabview-and-tabitem#:~:text=Tip%3A%20It's%20common%20to%20want,than%20the%20other%20way%20around. the only way I could get this to work was to put the TabView inside the NavigationView. This has been working great in iOS 13, however the same code on iOS 14 doesn't behave well. Often times when you've nagivated deep into several views the navigation bar misbehaves and the back button can bring you back more than one view.

Is there a recommended way in the latest SwiftUI and iOS 14 to have a TabView where the tab bar disappears after you start navigating into views?

Thanks.

3      

i remind effectivly that you can do this before, but i think it´s not a good conception choice. I had to take same decision two months ago, and i chose to embed navigation view inside tabbar (the fact that you cannot do the reverse anymore seems to confirm my choice...) i think that the tabbar ux design is to allways stay on screen. Anyway if you really want to achive this i think that you will have to make your own custom tabbar...

3      

@linkiliz I am having hard times understanding how is it possible that I have to always mandadory show the tab bar. For example I have a tab bar with 4 items:

  1. Quiz
  2. Videocourse
  3. ....other
  4. .....last item

But logically when the user opens one quiz pack from the Quiz tab, he shouldn't be able to navigate into the Videocourse tab to watch the video with explanations.

I don't know if I've explained well, buf If I did, how would you solve this situation?

3      

hi,

this has come up before in the forums ... can't put my finger on the relevant references right now in previous posts, although i think @NigelGee might have weighed in on this ... but i would say two things:

  • Apple's Human Interface Guidelines: see the comment under Don't hide a tab bar when people navigate to different areas in your app.

  • if the TabView is inside a NavigationView (rather than each view displayed in the TabView being inside a NavigationView), then i think that the TabView effectively owns the menubar. you cannot move to a new tab and have that view put up its own navbar items (i know i had this issue one time; i am guessing it's still there).

curiously, i know it was possible at one point in UIKit to hide or dismiss the tabbar when you segued to other views; i don't whether that's still a thing anymore.

hope that helps,

DMG

3      

Thanks @delawaremathguy You started to make me have a think and I think I have come up with a solution (at least for @gabfeudo)

By using .fullScreenCover( :). Here a quick example

Set up as Normal the Window Group as per Apple Human Face Guide Lines.

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            TabView {
                TabOneView()
                    .tabItem {
                        Image(systemName: "list.bullet")
                        Text("Tab One")
                    }
                TabTwoView()
                    .tabItem {
                        Image(systemName: "list.bullet")
                        Text("Tab Two")
                    }
                TabThreeView()
                    .tabItem {
                        Image(systemName: "list.bullet")
                        Text("Tab Three")
                    }
                TabFourView()
                    .tabItem {
                        Image(systemName: "list.bullet")
                        Text("Tab Four")
                    }
            }

        }
    }
}

Then in the have your View that you want full screen (but not TabOneView())

struct FullSheetView: View {
    @Binding var isPresented: Bool

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: NextScreenView(isPresented: $isPresented)) {
                    Text("Next Screen View")
                }
            }
            .navigationBarTitle(Text("Full Screen View"), displayMode: .inline)
            .toolbar {
                Button {
                    isPresented = false
                } label: {
                    Text("Close")
                }
            }
        }
    }
}

Then in TabOneView()

struct TabOneView: View {
    @State var isPresented = false

    var body: some View {
        Button {
            isPresented = true
        } label: {
            Text("Full Sheet View")
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
                .cornerRadius(20)
        }
        .fullScreenCover(isPresented: $isPresented) {
            FullSheetView(isPresented: $isPresented)
        }
    }
}

When this is presented it a NavagationView I have tested it with a NextScreenView the only issue is that you have to pass the @Binding to each new view if you want the user to close from that view.

But it does fulfil HIG

The exception to this is in modal views

So @gabfeudo could have a "Start Quiz" Button then the quiz is in full screen which hides the TabBar and when quiz finishes the "Quiz" sheet goes and still have TabBar and can navigate to the other tabs as normal.

6      

@NigelGee you literally saved my work. Thank you so much for the help!

3      

@NigelGee You're a lifesaver, thank you!

3      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.