How to make a colorful TabView in SwiftUI?

Question

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.

score 1 · Answer 1 · answered Nov 07 '22 at 07:13

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)

Thank you! I try to make it as native-looking as possible – Denis Sologub Nov 08 '22 at 05:49 — Denis Sologub, Nov 08 '22 at 05:49

score 1 · Accepted Answer · answered Nov 07 '22 at 07:14

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.

How to make a colorful TabView in SwiftUI?

2 Answers2