Exploring tvOS Development: CardButtonStyle

I started by creating a TV app for Quoting just for fun. After a few #if !os(tvOS) #endif sprinkled in the codebase, I got it working.

The grid items weren’t looking native to tvOS. I found out from Build SwiftUI apps for tvOS that there exists a unique button style for tvOS. This new style was introduced in tvOS 14.

CardButtonStyle

When the button is in focus, we want a directional movement effect when we drag on the Siri remote. Also, a raised platter effect of knowing the particular item is highlighted.

For this, we use the CardButtonStyle. You can also use it on the button using the instance property card.

Button(action: { 
    viewModel.detailedAuthor = author 
}) {
    AuthorRow(author: author)
}
#if os(tvOS)
.buttonStyle(.card)
#else
.buttonStyle(.plain)
#endif

CardButtonStyle Features

Few things to note from the documentation:

• Doesn’t apply padding to its contents, so images, text, and other content display edge-to-edge.
• Appears partially translucent.
• When focused, the button animates up to a raised position with more opacity.
• Applies the standard background colors for unfocused and focused states in light and dark mode.

Conclusion

While the initial impressions with SwiftUI’s support for tvOS haven’t been great, I am still looking forward to experimenting on the large screen.

Tag @rudrankriyam on Twitter if you have experience working with tvOS and want to spread some knowledge around!

Thanks for reading, and I hope you’re enjoying it!