As iOS developers, we usually feel pretty comfortable with the fact that we can count on the infinite possibilities that UIKit and the multi touch input capabilities offer for the iPhone and iPad hardware.
If you haven’t tinkered with it just yet, be aware that tvOS limits these capabilities, since there is no touchable screen for the TV form factor. However, as usual, Apple offers a clever solution so that users can interact with apps easily and naturally.
As previously stated, iOS offers a wide range of view controllers, controls, and other components that are useful for building user interfaces with UIKit, which you can of course use in tvOS, though not necessarily in the same way. Even though porting apps from iOS to tvOS is somewhat simple with UIKit, the paradigm for the TV is way different. Introduce tvOS Focus Engine.
How Does the Focus Engine Work?
Users navigate on the screen by moving the focus from item to item, using the stylish Siri Remote. During this interaction, the item that is in focus stands out on the screen to provide more meaning and sense of motion.
Apple TV's Siri Remote. Source: Apple.
tvOS’s Focus Engine is quite impressive. You can use it to navigate TabBars, Table View, Collections Views, among others. Take the below example of the Text Field’s Keyboard:
To give you a hint, the UIKit classes that can be focusable are narrowed to just a few:
- UIButton
- UIControl
- UISegmentedControl
- UITabBar
- UITextField
- UISearchBar (although UISearchBar itself isn’t focusable, its internal text field is).
The offering above is quite limited, but meaningful and useful for the TV, without a doubt.
In order to determine whether a view or button or any other component is in focus, it’s as simple as:
Supporting Focus
tvOS provides the useful UIFocusEnvironment Protocol, which is in charge of communication between the focus engine and the application in the view hierarchy. The UIKit classes that conform to this protocol are UIView, UIViewController, UIWindow, and UIPresentationController. These are the classes that control the views on the screen.
For example, you can support Focus in View Controllers by overriding the above-mentioned UIFocusEnvironment to delegate methods to customize it by:
- Override the preferredFocusedView: to specify where focus should start by default.
- Override shouldUpdateFocusInContext: to define where focus is allowed to move.
- Override didUpdateFocusInContext:withAnimationCoordinator: to respond to focus updates when they occur and update your app’s internal state.
Requesting Focus
Developers can request focus to update the UI if needed, but it must be managed through the Focus Engine. UIFocusEnvironment’s setNeedsFocusUpdate() and updateFocusIfNeeded() are the delegated methods used to interact with the screen.
To provide an example of this, take Vevo’s tvOS app as a reference. When the app launches, it forces focus on the first item of the collection view at the top, as highlighted below:
Focus Engine Principles
Designing for the Apple TV requires a different approach when it comes to navigation and user interaction. Keep in mind the following principles when you have to decide what components to use and how to organize the layout:
- Only a single item can have focus at any given time.
- Users change focus by selecting a direction on the remote.
- Only the user can directionally change focus.
- Focus is managed by the focus environment.
The Focus Engine is a powerful tool you can leverage on your tvOS apps and will certainly become more familiar after working with this platform for some time. Taking advantage of good practices and the Human Interface Guidelines provided by Apple will lead you to a successful product launch by taking advantage of the stunning and well-engineered frameworks it provides.
