How do I add a highlight to a TabItem label in SwiftUI

Question

I have a TabView with custom icons - like this:

    PastView( settings ).tabItem 
    {
        Image("past")
        Text("Past")
    }.tag(1)

which works great - but just the text changing color is very subtle - it's not obvious which tab is "current". I want to make it much more obvious by doing something to the image. I've tried all of thse

      Image("past").shadow( radius:5 )
      Image("past").border( Color.red, width:8 )
      Image("past").background( Color.green )

but none of them have any effect at all - and I don't really understand why

score 0 · Answer 1 · answered Jun 23 '21 at 22:56

0

try adding ".accentColor(.red)" to the TabView.

answered Jun 23 '21 at 22:56

workingdog support Ukraine

26,280
4
27
37

accent color was already working (as mentioned above) - the text changes color fine - I want to do something to _the image_ (and it's not a systemimage) – Darren Oakey Jun 23 '21 at 22:58
my bad of course, I did not see you mentioning accentColor. – workingdog support Ukraine Jun 23 '21 at 23:01

score 0 · Answer 2 · answered Jun 24 '21 at 04:26

TabItem image in SwiftUI has very limited customization at present. Even in UIKit you would be making those changes to the ImageView container not the Image itself.

Design selected and unselected versions of your icons, and then use them as below. You may also want to create different versions of the icons in the Asset Catalog for dark mode.

@State private var selectedTab = 0
    
    var body: some View {
        TabView(selection: $selectedTab) {
            ViewA()
                .tabItem {
                    selectedTab == 0 ? Image("past-selected") : Image("past-unselected")
                }.tag(0)
            
            ViewB()
                .tabItem {
                    selectedTab == 1 ? // etc ...
                }.tag(1)
        }
    }

How do I add a highlight to a TabItem label in SwiftUI

2 Answers2