How to make a colorful TabView in SwiftUI? - Ios swift

DenisSologub
November 7, 2022
175 views
1 vote
2 Answers

I have the next TabView:

TabView(selection: self.$viewModel.selection) {
    StoriesView()
        .tabItem {
            Label("Stories", systemImage: "play.square") // I need a yellow icon here
        }
        .tag("stories")
    MessengerView()
        .tabItem {
            Label("Messenger", systemImage: "message") // I need a green icon here
        }
        .tag("messenger")
    ProfileView()
        .tabItem {
            Label("Profile", systemImage: "person") // I need a red icon here
        }
        .tag("profile")
}

It works perfectly but I can’t get how to set an own colour for every tab icon. I’ve tried all possible methods already foregroundColor(), accentColor(), tint() and so on… A nothing works. It changes a color of all tab icons or no one icon.

How to make it in TabView?

P.S. Maybe it’s a noobie’s question but I really got challenged.

Answers

Hey this is how i did it. I just used Zstacks and added rectangle() and assigned color to that.

 TabView(selection: $tabSelection) {
        //MARK: ZStack View Starts from Here

        ZStack {
            //MARK: VStack View Starts from Here

            VStack {
                HomeView(tabSelection: $tabSelection, selectedCategory: $selectedCategory)
                Rectangle()
                    .fill(Color.clear)
                    .frame(height: 20)
                    .background(Color.WhiteColor)
            }
        }
        .tabItem{
            
            Image("HomeIcon")
                .renderingMode(.template)
                .foregroundColor(Color(.secondaryLabel))
            Text("")
        }
        .tag(1)
        
        //MARK: ZStack View Starts from Here

        ZStack {
            //MARK: VStack View Starts from Here

            VStack {
               
                CatalogView(valueToPass: selectedCategory)
                    Rectangle()
                        .fill(Color.clear)
                        .frame(height: 20)
                        .background(Color.WhiteColor)

                
            }
        }
        
        
        .tabItem{
            Image("BagIcon")
                .renderingMode(.template)
                .foregroundColor(Color(.secondaryLabel))
            Text("")
        }
        .tag(2)
        //MARK: ZStack View Starts from Here

        ZStack {
            
            
            VStack {
                CreatePosterView()
                Rectangle()
                    .fill(Color.clear)
                    .frame(height: 20)
                    .background(Color.WhiteColor)
            }
        }
        
        
        .tabItem{
            Image("CameraIcon")
            
            Text("")
        }
        .tag(3)
        
        //MARK: ZStack View Starts from Here

        ZStack {
            //MARK: Vstack View Starts from Here

            
            VStack {
                CartView()
                Rectangle()
                    .fill(Color.clear)
                    .frame(height: 20)
                    .background(Color.WhiteColor)
            }
        }
        
        .tabItem{
            Image("CartIcon")
                .renderingMode(.template)
                .foregroundColor(Color(.secondaryLabel))
            Text("")
        }
        .tag(4)
        //MARK: ZStack View Starts from Here

        ZStack {
            
            //MARK: VStack View Starts from Here

            VStack {
                ProfileView()
                Rectangle()
                    .fill(Color.clear)
                    .frame(height: 20)
                    .background(Color.WhiteColor)
            }
        }
        
        
        
        .tabItem{
            Image("ProfileIcon")
                .renderingMode(.template)
                .foregroundColor(Color(.secondaryLabel))
            Text("")
        }
        .tag(5)

        
        
    }
    .background(Color.white)
    .accentColor(Color.BlackColor)

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                HStack(spacing: 40){
                    NavigationLink {
                        ContentView()
                    } label: {
                        VStack{
                            Image(systemName: "play.square")
                            Text("Stories")
                        }
                        .foregroundColor(.yellow)
                        .bold()
                    }
                    
                    NavigationLink {
                        ContentView()
                    } label: {
                        VStack{
                            Image(systemName: "message")
                            Text("Messenger")
                        }
                        .foregroundColor(.green)
                        .bold()
                    }
                    
                    NavigationLink {
                        ContentView()
                    } label: {
                        VStack{
                            Image(systemName: "person")
                            Text("Profile")
                        }
                        .foregroundColor(.red)
                        .bold()
                    }

                }
            }
        }

    }
}

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

I made a custom one. You can make changes as you want. I hope that’s will help you.

Like you can change opacity when changes the pages and hide back button for solid tabview.

Please signup or login to give your own answer.

Click here to cancel reply.

How to make a colorful TabView in SwiftUI? – Ios swift

Answers