Focusing on apps, now playing on AppleTV

   UX

Apps are now playing on the new AppleTV. The apps use the same familiar tools and frameworks as apps for the iPhone, but there is one major difference: navigation. The AppleTV remote allows you to move in four general directions for controls: up, down, right and left. Think of this like navigating an old computer with keyboard arrows on a high-definition screen.

Highlighting an item on your TV is called focus. Focus is similar to a hover state on a desktop computer. This guide will show you some of the new tools Apple has provided to their existing frameworks to help add life and interactivity to your tvOS app.

Buttons, Tables, Collections and Text Fields

Apps for tvOS have all the common user interface elements that phone or desktop apps can have. Simple controls such as buttons and text fields will grow and wiggle when given focus. Table Views and Collection Views let you customize the appearance rows and items when they obtain focus.

02tvOS_tableView

There is a delegate method for both table views and collection views that let you know what item was previously focused and which item will gain focus. The default appearance for focused table cell rows is to raise them with a slight shadow.

03tvOS_collectionView

Collection Views are very similar to table views in handling the focus of items. However, unlike table views, there is no default appearance for focused items. You have to customize the appearance of focused items yourself. In the example above, when an item is given focus the text fades in and the image zooms with a parallax effect.

You can give images parallax effects with a single line of code:

TV Shelf Items

Apps on the home screen in tvOS can optionally display items on the shelf. The items on the shelf show off content inside your app. In the example app, we’re showing off some cool comics. These shelf items take the user directly to that content screen for quick, easy access.

04tvOS_shelf

You can serve TV Top Shelf items with an extension of your tvOS app. Xcode by default contains this extension in the “New” panel so most of the boilerplate is automatically done for you. All you need to provide is the images, text and deep link URLs into your app. You can also customize the appearance of top shelf items into groups, poster shapes or widescreen previews.

Wrap-Up

The new AppleTV and tvOS create a whole new segment of exciting new apps for users with a very simple navigational pattern: up, down, left and right. Priced at $150, the AppleTV can provide a cost-friendly alternative to presenting dynamic dashboards of content. Creating an app for the AppleTV is very similar to iOS development and should be an easy transition for existing Apple developers.

Data provided by Marvel. © 2015 Marvel


Like What You See?

Got any questions?