Create a tvOS App with SwiftUI

Written by Team Kodeco

SwiftUI’s declarative framework extends beyond mobile devices, enabling developers to bring applications to tvOS and the living room. This capability allows you to create engaging, user-friendly applications on Apple TV, incorporating its unique features.

To start with tvOS app development, create a new target for your project in Xcode and select tvOS as the target platform. Then, select App as the template and opt for SwiftUI as the interface.

In designing for tvOS, remember users will interact via a remote control rather than a touch screen. Therefore, navigation should be straightforward, and all elements should be easily visible from afar.

SwiftUI’s tvOS-specific components, like focusable views and the focus engine, enable the creation of a tvOS-tailored experience. Users navigate through the app using their remote control’s directional buttons, ensuring a smooth interaction.

Consider this tvOS app example that highlights a list item when selected:

struct ContentView: View {
  let items = ["Item 1", "Item 2", "Item 3"]
  @State private var selection: Int? = nil

  var body: some View {
    VStack(spacing: 20) {
      Text("My List")

      ForEach(0..<items.count, id: \.self) { index in
        Button(action: {
          self.selection = index
        }) {
          HStack {
            Text(self.items[index])
            Spacer()
            if selection == index {
              Image(systemName: "checkmark")
            }
          }
        }
        .padding()
      }

      if let selection = selection {
        Text("Selected Item: \(items[selection])")
      }
    }
    .padding()
  }
}

Here’s what the preview should look like:

In this example, you define a ContentView struct, which is a view that contains a list of items and displays which item is currently selected. The items are represented by an array of strings: ["Item 1", "Item 2", "Item 3"]. The currently selected item is stored as a state variable selection, which holds an optional integer representing the index of the selected item.

In the view’s body, a VStack is used to vertically stack a Text view that displays “My List” and a loop that creates a Button for each item in the items array. Inside this loop, each button has an action that updates the selection state with the current index when clicked.

The button’s content is an HStack that horizontally aligns the item’s text and a checkmark image. This image only appears when the current index matches the selection state, indicating that the item is selected.

Finally, if the selection state is not nil, meaning an item has been selected, a Text view displays the text of the currently selected item.

To get the full experience working locally, you’ll need to run this one in the simulator. With the simulator running use your arrow keys and press enter on Item 2 and you’ll see the following:

In summary, this ContentView is a simple interactive list for a tvOS app, where users can navigate and select items, and see their current selection. Creating a tvOS app with SwiftUI is a straightforward process, allowing you to design a user experience that feels natural and intuitive on the big screen. By leveraging SwiftUI’s tvOS-specific components, your app becomes seamlessly navigable, catering to remote control interactions.