fdvfarzin
fdvfarzin

Reputation: 1285

How to switch between tabBar and toolbar swiftUI?

In the files App after you pressed the Select button the tabBar switch to the toolbar.enter image description here

How can I do this with swiftUI?(Switch between tabBar and toolbar)

struct tabBar: View {
  
    var body: some View {
        TabView {
            ContentView().tabItem {
                Image(systemName: "paperplane.fill")
                Text("tabBar")
            }
        }
        .toolbar {
            ToolbarItem(placement: .bottomBar, content: {
                Button(action: {
                }){
                    Text("toolBar1")
                }
         
            })
            ToolbarItem(placement: .bottomBar, content: {
                
                Button() {
                } label: {
                    Text("toolBar2")
                }
             
            })
        }

    }
}

Upvotes: 3

Views: 841

Answers (1)

glyvox
glyvox

Reputation: 58029

For iOS 16 and above, you can use the toolbar(_:for:) method to toggle between visible and hidden states. Also, don't forget to wrap the view in a NavigationView, or else, setting the visibility of the bottom toolbar won't work.

import SwiftUI

struct ContentView: View {
    @State var shouldShowTabBar = false

    var body: some View {
        NavigationView {
            TabView {
                Group {
                    Button("Switch Between Tab Bar and Toolbar") {
                        shouldShowTabBar.toggle()
                    }
                    .tabItem {
                        Label("Tab 1", systemImage: "list.dash")
                    }

                    Text("Tab 2")
                        .tabItem {
                            Label("Tab 2", systemImage: "square.and.pencil")
                        }
                }
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button {

                        } label: {
                            Text("Toolbar Button")
                        }
                    }
                }
                .toolbar(shouldShowTabBar ? .visible : .hidden, for: .tabBar)
                .toolbar(shouldShowTabBar ? .hidden : .visible, for: .bottomBar)
            }
        }
    }
}

If you have to support iOS 14 and 15, you can check every item if it should be visible and hide/show them one by one.

import SwiftUI

struct ContentView: View {
    @State var shouldShowTabBar = false

    var body: some View {
        NavigationView {
            TabView {
                Group {
                    Button("Switch Between Tab Bar and Toolbar") {
                        shouldShowTabBar.toggle()
                    }
                    .tabItem {
                        if shouldShowTabBar {
                            Label("Tab 1", systemImage: "list.dash")
                        }
                    }

                    Text("Tab 2")
                        .tabItem {
                            if shouldShowTabBar {
                                Label("Tab 2", systemImage: "square.and.pencil")
                            }
                        }
                }
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        if !shouldShowTabBar {
                            Button {

                            } label: {
                                Text("Toolbar Button")
                            }
                        }
                    }
                }
            }
        }
    }
}

Upvotes: 2

Related Questions