Is there a way to keep animated swiping with TabView (.page) and transparent toolbar at the same time?

Question

I want to keep animated swiping (.page) and toolbar transparency together. Here is my code with toolbar transparency:

struct TestView: View {
    
    @State private var tabSelection = 1

    var body: some View {
        TabView(selection: $tabSelection) {
            Tab_HomeView(tabSelection: $tabSelection)
                .tabItem {
                    Image(systemName: "house.fill")
                }.tag(1)
            Tab_UserView(tabSelection: $tabSelection)
                .tabItem {
                    Image(systemName: "person.badge.key")
                }.tag(2)
        }
    }
}

struct Tab_HomeView: View {
    
    @Binding var tabSelection: Int
    
    var body: some View {
        ZStack {
            Color.red
            Text("1")
        }
        .ignoresSafeArea()
    }
}

struct Tab_UserView: View {
    
    @Binding var tabSelection: Int
    
    var body: some View {
        ZStack {
            Color.green
            Text("2")
        }
        .ignoresSafeArea()
    }
}

It looks like:

But when I changed it to a page view and create my own toolbar, background became solid and it's color unchangeable...

struct TestView: View {
    
    @State private var tabSelection = 1

    var body: some View {
        TabView(selection: $tabSelection) {
            Tab_HomeView(tabSelection: $tabSelection).tag(1)
            Tab_UserView(tabSelection: $tabSelection).tag(2)
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                HStack {
                    Button(action: { tabSelection = 1 } ) { Image(systemName: "house.fill") }
                    Button(action: { tabSelection = 2 } ) { Image(systemName: "person.badge.key") }
                }
            }
        }
    }
}

Anyone know how to beat this?

Answer 1

Creating a TabView in SwiftUI that acts as a page view with a custom bottom tab navigator involves several steps. When you .tabViewStyle(.page(indexDisplayMode: .never)), you should't not be able to see toolbar.

What I will do is to create a custom tab bar. You can copy and paste the code to your xcode and test it out. But remember to add padding to your tabbar.

[![enter image description here][1]][1]
// Define your tab views
struct FirstTabView: View {
    var body: some View {
        // Your content here
        Text("First View")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.red)
    }
}

struct SecondTabView: View {
    var body: some View {
        // Your content here
        Text("Second View")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.blue)
    }
}

// Your main view with TabView
struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        ZStack {
            // Tab view with manual paging enabled
            TabView(selection: $selection) {
                FirstTabView()
                    .tag(0)
                SecondTabView()
                    .tag(1)
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never)) // This hides the default tab view indicators
            
            // Custom tab bar
            VStack {
                Spacer()
                
                HStack {
                    // First tab button
                    Button(action: {
                        withAnimation {
                            selection = 0
                        }
                    }) {
                        Image(systemName: "1.circle")
                            .font(.largeTitle)
                    }
                    .buttonStyle(PlainButtonStyle())
                    .foregroundColor(selection == 0 ? .yellow : .gray)
                    
                    Spacer()
                    
                    // Second tab button
                    Button(action: {
                        withAnimation {
                            selection = 1
                        }
                    }) {
                        Image(systemName: "2.circle")
                            .font(.largeTitle)
                    }
                    .buttonStyle(PlainButtonStyle())
                    .foregroundColor(selection == 1 ? .yellow : .gray)
                }
            }
            .padding()
        }
        .ignoresSafeArea()
    }
}

#Preview {
    ContentView()
}