how does focus engine work on tvos

Generated on 8/9/2024

1 search

The focus engine on tvOS is a key component for creating interactive and engaging user interfaces. It allows elements to respond dynamically when they are focused, providing visual feedback to the user. Here are some details on how it works, particularly in the context of migrating TVML apps to SwiftUI:

  1. Lockups and Focus Effects:

    • The most common type of lockup on tvOS consists of an image floating above some text. When focused, the image lifts and tilts with a specular lighting effect, and any nearby text slides to avoid being occluded by the raised image. This can be achieved using SwiftUI by placing the image and text in a button, which by default uses the bordered style on tvOS. (Migrate your TVML app to SwiftUI)
  2. Search Field Interaction:

    • When focusing on a suggestion in a search field, an on-screen preview is provided within the search field, indicating both the action the suggestion will perform and how this term matches the current input. This interaction is consistent across platforms, including iPad, Mac, and Apple Vision Pro. (Migrate your TVML app to SwiftUI)
  3. Design Language and Navigation:

    • A typical tvOS media app design includes a homepage with promoted content and shelves of items below. Each item is shown with a vibrant and colorful lockup that showcases its artwork. A tab bar across the top provides direct access to different sections of the app, including a search function. This design language helps create a familiar and intuitive navigation experience for users. (Migrate your TVML app to SwiftUI)

For more detailed information on building tvOS apps with SwiftUI and leveraging the focus engine, you can refer to the session Migrate your TVML app to SwiftUI.