TabView Background disappears at second tab item

Community
1

Hi,

I have a TabView where I simply display to views.

TabView {
                TeamsListView()
                    .tabItem {
                        Image(systemName: "person.3")
                        Text("Teams")
                    }
                GamePlanView()
                    .tabItem {
                        Image(systemName: "calendar")
                        Text("Game Plan")
                    }
            }

In the first view, the background of the tabbar is correct (set in init function)

init() {
        let appearance = UITabBarAppearance()
        appearance.configureWithTransparentBackground()
        appearance.backgroundColor = UIColor(.black.opacity(0.5))
        appearance.stackedLayoutAppearance.normal.iconColor = .white
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]

        appearance.stackedLayoutAppearance.selected.iconColor = UIColor(Color.accentColor)
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor(Color.accentColor)]

        UITabBar.appearance().standardAppearance = appearance
    }

this looks as the following:
image

but when I change to GamePlanView, the background disappears. When I switch back to the TeamsListView, the background is like in the picture above.
image

Does anyone have any hints or is this maybe a known issue?

2

Hi David,

The default way that the Tab View operates in SwiftUI is that where there is not enough content in a tab that fills the screen (and some) the TabBar background is not shaded behind the tab buttons. When the content extends below the tabBar buttons, as in the case of a List (table), you will get shading and the content behind is obscured by default.

You can change the background so that the shaded section is somewhat opaque, which is what you appear to have done via the init(), and the content behind is visible. When you change Tabs to a tab that has content that does not fill the screen, the shading will disappear which is really annoying. I don’t know how you can change that other than to build your own Custom Tab Bar which is what Chris Ching did for the Chat App.

3

Hi Chris,

thanks for your quick reply. That behaviour is a bit annoying, that’s true. Than I’ll go the way and implement it on my own.

Thanks :slight_smile: