How to convert an iOS app to tvOS app?

How to convert an iOS app to a tvOS?

Expanding an iOS app to tvOS isn’t hard, but you have to know that it is not the same as porting iOS into macOS.

Apple TV is getting more and more popular so many developers think about how to adapt their apps to this platform. But tvOS is a little bit different than iOS. I’m talking mainly about UX, not the code. If porting iPhone/iPad apps to macOS is a piece of cake (Apple Silicon made it even easier), with tvOS you’ll need to do more work. Mostly at the planning stage.

First: get familiar with Apple TV

Never used tvOS on your TV set? Do it. Its UX is completely different than on iOS/macOS. Just take a look at the Apple TV remote. The gestures may be similar (slide, tap), but are more limited than on iOS. The navigation is harder. And typing a username or password is much harder than with a mobile keyboard.

When I was preparing to make my first tvOS app, I started using Apple TV. Not only for watching videos, but getting familiar with the system, other apps, navigation, and so on. For me, it’s even more important than learning Apple Guidelines about making apps for AppleTV.

Then I started to think about moving my iOS app into tvOS. Why? Because, as I said, tvOS uses a different approach to navigation. And the main problem with your iOS app is that you will need to change its navigation.

Second: navigation is the key

Getting familiar with Apple TV has one aim: to learn how to change the current iOS app. Apple provides many features that work out of the box, bo you shouldn’t leave your brain at the door.

A good example is UITabBarController which is automatically adjusted for tvOS but works a little bit differently than on iOS.

Firstly, it’s placed on top of the view. Secondly, it isn’t so easy to modify. The aim of UITabBarController in tvOS is to be bold and distinct, so if you’d like to change colors or behavior, you may find a few restrictions.

For example on tvOS you won’t be able to use:

• UITabBar.appearance().barTintColor
• UITabBar.appearance().tintColor
• UITabBar.appearance().backgroundImage

Another thing - UINavigationController.

Very often in iOS, UINavigationController is the core of app navigation. It doesn’t work on tvOS in my opinion. Yes, you can use it, but views are mostly just dismissed, so a better way is to present views than use the UINavigationController.

And you have to remember that on tvOS you can always go back, so if an app contains login features, it is very important to remove views from the stack. Otherwise, the user will be able to go back from the logout view.

This can be avoided simply by changing the root view controller:

UIApplication.shared.windows.first?.rootViewController = newController

Third: show your users where they are

In the case of iOS and macOS apps, this is obvious. Users can tap with a finger or click with the mouse pointer in a place of interest. On AppleTV, it’s not so obvious. There is no pointer and of course, there are no touch screens implemented in TV sets.

By the way, this is why Apple allows using only keyboard arrows if you want to navigate on the tvOS Simulator. Surprised?

This is the reason why you need to show the users, where they are. Many, if not the majority, of tvOS apps use UITableView or UICollectionView objects. They are easy to use and easy to access by a user on a tv screen. And also UITableView or UICollectionView are suited to show the user, where they are inside the app, which cell or view is currently selected, etc.

On UICollectionView you can use:

func collectionView(_ collectionView: UICollectionView, didUpdateFocusIn context: UICollectionViewFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator)

UITableView has almost the same function:

func tableView(_ tableView: UITableView, didUpdateFocusIn context: UITableViewFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator)

Inside these functions you can define a previously selected cell (context.previouslyFocusedIndexPath) or the currently selected cell (context.nextFocusedIndexPath). Based on this, it is easy to select an animation or add an extra frame, or whatever you want.

For example:

if let previousIndexPath = context.previouslyFocusedIndexPath,
    let cell = collectionView.cellForItem(at: previousIndexPath) {
        UIView.animate(withDuration: 0.3) {
            cell.transform = CGAffineTransform.identity
        }
}

if let indexPath = context.nextFocusedIndexPath,
    let cell = collectionView.cellForItem(at: indexPath) {
        UIView.animate(withDuration: 0.3) {
            cell.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
        }
}

Showing the user a selected view is very important. Otherwise, they will be confused and will not be able to properly use the app. Of course, didUpdateFocusIn can be used also on other types of views - buttons, UIView, etc. Objects like UITextField have a built-in focus, so you do not have to implement it. But sometimes (e.g. dark background) it may look weird, so it is good to adjust it anyway.

Summary of tips for converting iOS apps to tvOS

Porting your app from iOS to tvOS is not hard, but it is good to remember that Apple TV is a wholly different world from iOS or macOS. Focus on UX and you will avoid many mistakes. Another thing is that not every app can be (nor should be) transformed to tvOS. Maybe this is obvious, but it is good to remember that iOS apps are more universal and have more opportunities to use than tvOS apps. Good luck and see you again!