How to change Tabbar image in SwiftUI

Question

Santiago_1991 OP

Created Jan ’21

Replies 1

Boosts 0

Views 5.5k

Participants 2

I have a Tabbar which is created by SwiftUI, but I use different images for different status of selected Tabbar(selected and unselected), how can I do that.
I tried to change image name in

Code Block 	TabView1().onAppear() {
			tabImageName1 = "image1_active"
			tabImageName2 = "image2"
			tabImageName3 = "image3"
			tabImageName4 = "image4"
	}

seems this not worked, and I think it's not so elegant, how can I change the image rightly, do we have better ways to do thing like this?

Answered by Santiago_1991 in 658947022

Solved

Code Block struct ContentView: View {
    @State var selection = 0
    
    var body: some View {
        TabView(selection: $selection) {
            Home().tabItem {
                if selection == 0 {
                    Image("home_active")
                } else {
                    Image("home")
                }
                Text("tab1")
            }.tag(0)
                        
            Message().tabItem {
                if selection == 1 {
                    Image("message_active")
                } else {
                    Image("message")
                }
                Text("tab2")
            }.tag(1)
            
            Discover().tabItem {
                if selection == 2 {
                    Image("discover_active")
                } else {
                    Image("discover")
                }
                Text("tab3")
            }.tag(2)
            
            Mine().tabItem {
                if selection == 3 {
                    Image("mine_active")
                } else {
                    Image("mine")
                }
                Text("tab4")
            }.tag(3)
        }
    }
}

Boost

Answer 1

Santiago_1991 OP

Jan ’21

Accepted Answer

Solved

Code Block struct ContentView: View {
    @State var selection = 0
    
    var body: some View {
        TabView(selection: $selection) {
            Home().tabItem {
                if selection == 0 {
                    Image("home_active")
                } else {
                    Image("home")
                }
                Text("tab1")
            }.tag(0)
                        
            Message().tabItem {
                if selection == 1 {
                    Image("message_active")
                } else {
                    Image("message")
                }
                Text("tab2")
            }.tag(1)
            
            Discover().tabItem {
                if selection == 2 {
                    Image("discover_active")
                } else {
                    Image("discover")
                }
                Text("tab3")
            }.tag(2)
            
            Mine().tabItem {
                if selection == 3 {
                    Image("mine_active")
                } else {
                    Image("mine")
                }
                Text("tab4")
            }.tag(3)
        }
    }
}

0