Create intuitive and easily manipulated user-interactive controls for your tvOS app.
On Apple TV, people use a remote or game controller to navigate through interface elements like movie posters, apps, or buttons, highlighting each item as they come to it. The highlighted item is said to be focused or in focus. It appears elevated or otherwise distinct from other items. (An item is considered focused when the user has highlighted it, but not selected it.) The user moves focus by navigating through different UI items, which triggers a focus update.
Add Focusable Items to the View
In Xcode, search the Library pane for the item you want to add to your app, and drag it to your app's storyboard. Several UIKit elements are focusable by default, including buttons (
UIButton), text fields (
UIText), and table cells (
UITable). The top-left item is in focus when your app launches. (In right-to-left languages, the top-right item is initially in focus.) You don't need to do anything to UIKit elements that are focusable by default. However, you can add SceneKit and SpriteKit nodes as focusable elements. To make a SceneKit or SpriteKit node focusable, set the
focus property of the node to
focusable, as shown below.
Design Your Layout in a Grid Pattern
The easiest way to ensure that focus moves between focusable items is to arrange the items in a grid pattern. Swiping on the remote triggers the focus engine—the system that controls focus and movement—to find all of the focusable items in the direction of the swipe. The first item found then becomes the newly focused item. Figure 1 shows the items found by the focus engine when the user swipes right, and the resulting focused item.
Figure 2 shows the items found by the focus engine when the user swipes down, and the resulting focused item.
When the focus engine doesn't find any items in the direction of the swipe, by default the focused item doesn't change, as shown in Figure 3.
When necessary, you can change the default behavior by using
UIFocus to redirect focus to other focusable items in the user interface.