Question 68928 in IOS Swift Question posted in
The official documentation can be found here.

Change bar icon color when selected in SwiftUI – Ios swift

I would like to change the color of the toolbar icon when it is selected. When not selected the color is Gray, when instead the color to be is selected: # FC4949 This is the code:

MainTabView

import SwiftUI

struct MainTabView: View {
@State var selectedTab: Tab = .home
@State var color: Color = .red

var body: some View {
    ZStack(alignment: .bottom) {
        
        Group {
            switch selectedTab {
            case .home:
                HomeView()
            case .corsi:
                CorsiView()
            case .carriera:
                CarrieraView()
            case .messaggi:
                MessaggiView()
            case .profilo:
                ProfileView()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        HStack {
            ForEach(tabItems) { item in Button {
                withAnimation(.spring(response: 0.3,
                                      dampingFraction: 0.7)){
                    selectedTab = item.tab
                    color = item.color
                }
            } label: {
                VStack(spacing: 0) {
                    Image(item.icon)
                        
                        
                        .frame(width: 44, height: 29)
                    
                        
                        //.lineLimit(1)
                }
                .frame(maxWidth: .infinity)
            }
            
       }
   }
        .padding(.horizontal, 8)
        .padding(.top, 30)
        .frame(height: 80, alignment: .top)
        
        .overlay(
            HStack {
                if selectedTab == .profilo { Spacer()}
                if selectedTab == .corsi { Spacer() }
                if selectedTab == .carriera {
                    Spacer()
                    Spacer()
                }
                if selectedTab == .messaggi {
                    Spacer()
                    Spacer()
                    Spacer()
                }
                Rectangle()
                    .fill(color)
                    .frame(width: 32, height: 4)
                    .cornerRadius(3)
                    .frame(width: 60)
                    .frame(maxHeight: .infinity, alignment: .bottom)
                if selectedTab == .messaggi { Spacer() }
                if selectedTab == .home { Spacer() }
                if selectedTab == .corsi {
                    Spacer()
                    Spacer()
                    Spacer()
                    
                }
                
                if selectedTab == .carriera {
                    Spacer()
                    Spacer() }
                
                
            }
                .padding(.horizontal, 14)
        )
        .ignoresSafeArea()

    }
    
}
}



struct MainTabView_Previews: PreviewProvider {
static var previews: some View {
    MainTabView()
   }
}

Tab

  import SwiftUI

struct TabItem: Identifiable {
var id = UUID()
var text: String
var icon: String
var tab: Tab
var color: Color
}

var tabItems = [
TabItem(text: "Home", icon: "HomeIcon", tab: .home, color: .red),
TabItem(text: "Corsi", icon: "CorsiIcon", tab: .corsi, color: .red),
TabItem(text: "Carriera", icon: "CarrieraIcon", tab: .carriera, color: .red),
TabItem(text: "Messaggi", icon: "MessaggiIcon", tab: .messaggi, color: .red),
TabItem(text: "Profilo", icon: "ProfileIcon", tab: .profilo, color: .red)


 ]

 enum Tab: String {
case home
case corsi
case carriera
case messaggi
case profilo
 }

Currently the result of the code is this

Currently the result of the code is this

I would like this:

I would like this

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved this by adding

    } label: {
    VStack(spacing: 0) {               
        Image(item.icon)
            .foregroundColor(selectedTab == item.tab ? Color(.red) : .gray)
    }
    .frame(maxWidth: .infinity)
}

  2. 0

    There is a property named accentcolor which is used to provide color to your selected tab in SwiftUI.You just need to provide that property to your tabView.For example, if you want that selected item to be pink you may use it like that:-

    TabView {
...
}.accentColor(.pink)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search