tvOS SwiftUI TabView Dynamically Change Bar Color

Question

I have a tvOS App with a TabView across the top. I want to use the background color of the TabView to indicate status. Initially it will be red and when something occurs in one of the views, I want to change the background color of the TabView to green.

I'm using the UITabBar.appearance().barTintColor = UIColor.red in my init() to set the initial color to red, but I can't find a way to change that to green later in execution.

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

    init() {
        UITabBar.appearance().barTintColor = UIColor.red
    }

    var body: some View {
        TabView (selection:$selection){
            Tab1View()
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("Tab 1")
            }
            .tag(1)
            Tab2View()
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Tab 2")
            }.tag(2)
            Tab3View()
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Tab 3")
            }.tag(3)
        }
        .font(.headline)
        .accentColor(.white)
        .ignoresSafeArea()
    }
}

When do you want it to turn green? Putting `UITabBar.appearance().barTintColor = UIColor.green` whenever that happens should be enough, I think — aheze, Feb 26 '21 at 02:22
I want it to turn green when a state variable is updated. Like an isConnected Boolean. — Andrew Dorsett, Feb 26 '21 at 02:37
Try something like [this](https://stackoverflow.com/a/66073813/14351818) — aheze, Feb 26 '21 at 02:51
Negative. onChange executes when it should as the state var changes but it doesn't change the background color. Looks like TabView only sets its background color on creation and updating the appearance will not redraw it. I came across this but it doesn't change anything on tvOS. https://schwiftyui.com/swiftui/customizing-your-tabviews-bar-in-swiftui/ — Andrew Dorsett, Feb 26 '21 at 16:00

ikbal · Answer 1 · 2022-09-28T22:49:10.317

You can use the code below.

import SwiftUI

struct ContentView: View {
   
  @State private var selectedTab = 0
  var tabViewTitle = ["First Page","Second Page","Third Page"]
  var body: some View {
    VStack {
      TabView(selection: $selectedTab){
        Text(tabViewTitle[0])
          .tag(0)
        Text(tabViewTitle[1])
          .tag(1)
        Text(tabViewTitle[2])
          .tag(2)
      }
      .frame(width: 300, height: 500)
      .tabViewStyle(PageTabViewStyle())
      .background(Color.purple)
      .cornerRadius(15)
    }
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    HStack(spacing: 16) {
        ForEach(tabViewTitle, id: \.self) { index in
            Rectangle()
                .fill(self.selectedTab == tabViewTitle.firstIndex(where: {$0 == index}) ?  Color.purple : Color.purple.opacity(0.5))
                .frame(width: self.selectedTab == tabViewTitle.firstIndex(where: {$0 == index}) ? 16 : 12,height: self.selectedTab == tabViewTitle.firstIndex(where: {$0 == index}) ? 16 : 12)
        }
    }
    .padding()
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

tvOS SwiftUI TabView Dynamically Change Bar Color

1 Answers1