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

Change background behind TabView in SwiftUI 2.0

Forums > SwiftUI

I have layout like this:

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("mybackground").resizable().ignoresSafeArea()
            TabView {
                InfoView()
                    .tabItem {
                        Image("ico_info")
                        Text("Info").foregroundColor(.white)
                    }

                PhrasebookView()
                    .tabItem {
                        Image("ico_phrasebook")
                        Text("Phrasebook").foregroundColor(.white)
                    }

                OptionsView()
                    .tabItem {
                        Image("icon_options")
                        Text("Options").foregroundColor(.white)
                    }

                TestsView()
                    .tabItem {
                        Image("ico_tests")
                        Text("Tests").foregroundColor(.white)
                    }
            }
        }
    }
}

"mybackground" is not showing until I remove TabView. It's like it's opaque and I want to have background for the whole app. I've tried changing UITabBar.apperance properties, but it only applies to the bottom bar itself, not the whole screen. How can I do this?

4      

The "Background" above the Tabbar is the View (eg InfoView() etc) so you need to put your back ground color there I think.

3      

I know I can add "mybackground" to each of tab views (InfoView etc), but it won't look the same. I want to have one background for the whole app and all the child view should have transparent background. I've set Color.clear background to the InfoView, but still TabView somehow has white background, covering "mybackground" completly.

3      

Has anyone found a solution to this issue. It is definitely an issue with the TabView taking up the full screen of the app and overlapping anything that is displayed behind it.

Edit: I have added a tabViewStyle and this appears to help. I'm not sure how to create a custom TabViewStyle but I'm sure the solution lies there.

struct ContentView: View {
   var body: some View {
        ZStack {
            Image(systemName: "questionmark.square")
                .resizable()
                .ignoresSafeArea()
            TabView {
                PresetsView()
                    .tabItem {
                        Image(systemName: "questionmark.square.fill")
                        Text("Presets")
                    }
                RandomNumberView()
                    .tabItem {
                        Image(systemName: "number.circle.fill")
                        Text("Standard")
                    }
            }
            .tabViewStyle(PageTabViewStyle())
        }
    }
}

3      

Adding your own tab view style is a variation of the tip I gave a few days ago. You can use Extension to extend the functionality of many types - Tip - to use extensions

In that example the extension was for Strings, and it is similar for TabView.

extension TabView {

    func myTabViewStyle() -> some View {
        self.background(Image("BackgroundImage"))              // Replace 'BackgroundImage' with your image name
// or   self.background(Image(systemName: "questionmark.square"))        
            .frame(width: 200, height: 500, alignment: .top)   // Optional, but shows the background
            .opacity(0.5)                                      // Again optional, but shows the effect

        // etc, with other View modifiers, choose the ones you need

    }
}

// then use it as follows

TabView {
    // tabbed items code
}
.myTabViewStyle()

Hope this helps.

3      

Hacking with Swift is sponsored by Superwall

SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.

Learn More

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.