Learn Courses My Dashboard

TabView - Visability in combination with background rendering / toggle on or off (?)

Hy together,

please see enclosed test code which shows the result in the attached screen shot.

import SwiftUI

struct ContentView: View {

@State var tabIndex = 0

var body: some View {

    TabView(selection: $tabIndex) {
        HomeView()
             .tabItem {
                 Label("Home", systemImage: "house")
             }
             .tag(0)
         TestView()
             .tabItem {
                 Label("Schedule", systemImage: "calendar")
             }
             .tag(1)
     }
     // end of TabView
}

}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

struct HomeView: View {

var body: some View {
    VStack {
        Text("HomeView")
        .font(.title)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(gradient: Gradient(colors: [.white, Color.blue]), startPoint: .top, endPoint: .bottom))
    }
}

}

struct TestView: View {

var body: some View {
    VStack (alignment: .leading) {
        Text("TestView")
            .font(.title)
    }
}

}

I wanted to achieve, that the TabBar has the iOS default background color and differentiates to the rendered background. Or in other words, why does max height: .infinity renders the safe area too?

Next question: is there an easy way to switch the TabBar ON and OFF?

Thanks :blush:

iOS 15 changed the tab bar so that when you aren’t scrolling, it shows as transparent, which is what you are seeing here.

You can fix it by putting this in your ContentView:

init() {
    if #available(iOS 15.0, *) {
        let appearance = UITabBarAppearance()
        UITabBar.appearance().scrollEdgeAppearance = appearance
    }
}

Thanks Patrick for your help! Appreciate this very much.

A point to note with this change in iOS 15 is that if there is content that appears behind the TabBar, the TabBar will automatically give you the opaque view that was the case in previous iOS versions. As soon as you scroll that content up (assuming that it is scrollable) such that the content is no longer behind the TabBar then the TabBar will revert to the new iOS 15 default.

I think over time people will get used to this rather than artificially forcing it back to what they have been used to.

See the attached linked video