LinearGradient on TabItem in TabView SwiftUI

Question

Is it possible to apply a LinearGradient to a TabItem? AccentColor only takes a color, and I haven't found another way to apply any color to a TabItem. Any Ideas? (This in a Gradient from blue to green, for example)

Could you show some demo, like screenshot, mockup, etc. of what do you try to achieve? — Asperi, Dec 16 '20 at 14:04
Maybe this will help: https://stackoverflow.com/questions/61509167/how-to-apply-gradient-to-an-accentcolor-of-any-view-swiftui — koen, Dec 16 '20 at 14:17
@koen since SwiftUI only show no more than one Image and Text view , we cannot use mask with Gradient. — YodagamaHeshan, Dec 16 '20 at 14:51

score 1 · Accepted Answer · answered Dec 16 '20 at 14:34

There is no chance to apply gradient in SwiftUI for the accentColor. So in your case you will have to create your own Tab Bar Items Images with a gradient and save them as a png. You will have to match the sizes, as you can not resize Image inside tabItem. See this answer for the sizes

You will need an active Image with your gradient and a inactive Image maybe gray like the default TabBar behavior. Then just load your Images in the TabView and depending on the selection..

Here is an example

struct ContentView: View {
    @State var selection = 0
    var body: some View {
        TabView(selection: $selection) {
            Text("First")
                .tabItem {
                    Image(selection == 0 ? "home_active" : "home_inactive") //<< here you load your different images 

                    Text("Home")
                        .colorMultiply(Color.yellow)
                }

            Text("Second")
                .tabItem {
                    Image(selection == 1 ? "setting_active" : "setting_inactive")
                    Text("Setting")
                }
        }
    }
}

score 0 · Answer 2 · answered Dec 16 '20 at 14:55

0

Yes we cannot apply gradient on tabItem in SwiftUI. It only shows no more than one Image and one Text view, although we have put more views inside .tabItem{}.

So that you have to make custom tab bar.

answered Dec 16 '20 at 14:55

YodagamaHeshan

4,996
2
26
36

LinearGradient on TabItem in TabView SwiftUI

2 Answers2