CODEWITHSUNDEEP
swiftswiftuiios13
LondonGuy
LondonGuy

Reputation: 11098

Selected tab image for a TabView's TabItem is always blue in SwiftUI

I'm playing around with a TabView in SwiftUI and I'm able to set the image of a tab that is not currently selected, however, setting the image for a selected tab doesn't seem to be working. All I see is a blue circle instead of a black one.

Here is my code:

import SwiftUI

struct MainView: View {
    @State private var selected = 0

    var body: some View {

        TabView(selection: $selected){
            Text("First View")
                .tabItem {
                    Image(self.selected == 0 ? "eclipse-tab-icon-black" : "eclipse-tab-icon-grey")
                        .renderingMode(.original)
            }.tag(0)
            Text("Second View")
                .tabItem {
                    Image(systemName: "2.circle")
            }.tag(1)
            Text("Third View")
                .tabItem {
                    Image(systemName: "3.circle")
            }.tag(1)
        }
    }
}

struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
    }
}

As you can see here, the non-selected tab is grey. This is correct:

enter image description here

But the selected tab is blue, instead of black:

tui

Assets:

enter image description here

Asset settings:

enter image description here

Upvotes: 2

Views: 3005

Answers (5)

P. Ent
P. Ent

Reputation: 1823

If you are supplying your own PNG images for tab views, use rendering mode template so that the default colors are applied to the non-background bits of your images.

If found this easiest to do in the Assets folder. Or you can it in code as:

Image("myImage").renderingMode(.template)

Upvotes: 3

Karan Champaneri
Karan Champaneri

Reputation: 915

Use accentColor of TabView

TabView(selection: $selected) {
        SwiftUIMyData()
            .tabItem {
                Image(systemName: "rectangle.fill.on.rectangle.fill")
                Text("My Data")
        }
        .tag(0)
        SwiftUIMyContent()
            .tabItem {
                Image(systemName: "desktopcomputer")
                Text("My Content")
        }
        .tag(1)
        }.accentColor(.black)

Upvotes: 1

Kai Chi Tsao
Kai Chi Tsao

Reputation: 41

use .accentColor(.black)

import SwiftUI

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection){
            Text("First View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image("first")
                        Text("First")
                    }
                }
                .tag(0)
            Text("Second View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image("second")
                        Text("Second")
                    }
                }
                .tag(1)
        }.accentColor(.black)
    }
}

tabItem (black) demo

Upvotes: 0

LuLuGaGa
LuLuGaGa

Reputation: 14388

You do not set a selected and not selected icon on your TabView, you only provide one image and it gets rendered in secondary colour when not selected and in accent colour when selected. If you want your selected tab icons to be black you could set the accent on colour on TabView to black, but it is against Apple's design guidelines and you will change the accent colour of all subviews as well.

Upvotes: 1

EmilioPelaez
EmilioPelaez

Reputation: 19884

Change the rendering mode of your image to original. Either on the xcassets folder, or with the renderingMode modifier in code.

Upvotes: 0

Related Questions