Search code examples
swiftbuttonswiftuitvos

Changing the color of a Button in SwiftUI on tvOS

I am trying to change the color of a SwiftUI Button on tvOS.

Modifying the background almost works, except that you can see that the underlying UIButton is actually using a rounded, translucent image over the top of the background. This results in a different colour at the corners where the rectangular background lies outside the rounded image.

enter image description here

Adding .padding emphasises this issue:

enter image description here 

struct ContentView: View {

    @State
    var selected = false

    var body: some View {

        Button(action: {
            self.selected.toggle()
        }) {
               Text($selected.wrappedValue ? "On":"Off")
                .foregroundColor(.white)
            }.padding(.all)
             .background(self.selected ? Color.green : Color.blue)
        }
    }
}

A related issue is the changing the color of the "focus" view, as I suspect that this is the same view as the button itself, transformed win size and color.

The typical technique in tvOS with a UIButton is to change the button image, but there doesn't seem to be any way to access the image of the underlying UIButton.

Solution

  • Again, I have only checked it on iOS, but this should help:

    struct ContentView: View {

    @State var selected = false

    var body: some View {

        Button(action: { self.selected.toggle() }) {
            Text($selected.wrappedValue ? "On":"Off")
                .foregroundColor(.white)
        }   .padding(.all)
            .background(RoundedRectangle(cornerRadius: 5.0)
                            .fill(self.selected ? Color.green : Color.blue))

    }
}

    You can pass any view into .background() modifier, so you might also want to try placing an Image() in there.