Convert iOS XIBS to tvOS

Developing for tvOS has been a wonderful experience. You get to reuse all the skills that you have as an iOS developer with very few limitations. Part of any new platform, however, is embracing the UI paradigms and the strengths and weaknesses of the user experience. Developing for tvOS is definitely no exception. In most situations directly translating a touch UI experience to TV would be disastrous.

As an experiment, I am porting a storybook app I created, The Adventures of Alex: Electricity to tvOS, hoping to make very little change to the way the book was designed and created. I used UIKit to do everthing, so I thought this would be an interesting use case to see if a direct touch UI port would work. One of the biggest limitations is that the tvOS project will not even compile if there are iOS XIBs or storyboards present. Directly copying and pasting elements in Interface Builder does not work, either. I did, however, find a neat workaround that, with a little bit of work, made porting the XIBs incredibly easy.

At the end of the day XIBs and storyboards are just XML files. You can excise pieces of the layout from the iOS storyboard and transplant them to a tvOS by editing that raw XML. You can view these as XML inside Xcode by right clicking on a your XIB, select Open As->Source Code. In my case, I wanted to transplant the entire root view. You can just select the <objects> and <resources> nodes, copy, and paste them in into a fresh new tvOS XIB.

There is one more thing, however, that you need to do. If you have UIButton instances in your storyboard, you'll need to do a find and replace the eventType. By default in iOS, the event type will be touchUpInside. Inside the XML it will look something like this:

<action selector="didSelectButton:" destination="-1" eventType="touchUpInside" id="20"/>

This event, for obvious reasons, does not exist on tvOS and will need to be replaced with primaryActionTriggered:

<action selector="didSelectButton:" destination="-1" eventType="primaryActionTriggered" id="20"/>

In my explorations I haven't come across any other gotchas when transplanting views this way, but I will certainly update this post if I do.

Happy tvOS programming!