How to rotate tvOS into portrait mode
Continuing with some more niche topics, let’s have a look at how we could rotate your tvOS application to work in portrait mode. So what is “portrait” in tvOS, well… the concept from an SDK perspective does not exist. None of the rotation-related methods from iOS made it over to tvOS, and for a good reason. With that said, there is still a small segment where it could be useful to have your tvOS application being rendered with more vertical than horizontal space. A good example of this is Panic’s status board application that was built back in 2013 using an iPad that would preferably be mounted on the back of the TV it was attached to. You could, of course, go with this option as well, but for our use case and this article’s topic, we will stick to using tvOS as the platform.
Before we tried to tackle this problem, we thought long and hard about how we could do this and still keep the application maintainable in the future. The first fear that stirred up was that this would affect how we write constraints, having to translate the layout in your head before writing it down in code. This felt like an unbearable scenario, so unbearable that we almost decided to ditch the idea of portrait entirely. After a small brainstorming idea on how to best tackle this, we came up with the idea to go down to the lowest (or highest) point in the hierarchy, more specifically the application’s window.
If we swap width and height, we end up with the correct frame measurements. However, the window was now misplaced. This is where our good friend transform made an entrance and saved the day.
The first thing that we did was to get the rotation right, for our use case, we had to rotate the screen -270 degrees. This was easily done with a CGAffineTransform. And voila, now we had the correct screen rotation. However, the screen was now somewhat misplaced.
To fix the position, we needed yet another transform to be applied to the window, this time a translation of the x and y coordinates. These values are easily calculated, simply take the width minus the height and divide it by two, do the same for the y-position but negate the value. We then create the translation and apply it to our already existing rotation transformation by calling .concatenating. Using this method we can combine the two transform into one and finally apply it to the window.
And there you have it; the application’s window now uses a portrait window size, it has been rotated and positioned to fit in the middle of your TV screen.
The kicker is that you can now use the same kind of constraints that you would normally apply to your views without having to think about the screen rotating. Except for one small detail that I’d like to highlight when it comes to over-scanning.
In the tvOS human interface guidelines, Apple mentions that should have used at least 60 for your top and bottom insets and 90 for your left and right insets. Now that you have rotated your TV screen, you should reverse these values to be on the safe-side when dealing with over-scanning. So 90 in top and bottom and 60 on for the left and right insets.
