What's New in tvOS

Session 209 WWDC 2017

tvOS allows you to deliver incredible apps and games for the big screen with the tvOS SDK. Gain insights into new tvOS 11 capabilities and enhancements such as Right-to-Left support, image overlays, background app updates, and user interface style improvements. And with the new AVKit capabilities you can take your media playback experience even further.

Good morning.

[ Applause ]

Welcome to What's New In tvOS?

I'm Hans, and I'm an engineer on the tvOS Team.

This morning, with my colleague Marshall, I'd like to talk to you about some of the enhancements and new APIs in tvOS.

We're going to do this in two parts, beginning with updates on the overall SDK.

We're going to take a look at system-wide improvements, and then narrow down to individual widgets.

Then, Marshall will talk to you about some of the new APIs around view controllers.

We have a lot of ground to cover, so let's get started.

First, is ODR or On Demand Resources.

For those of you, new to ODR, it allows your app to keep its resources in the App Store, instead of including in the App Bundle.

And then, your app can download them as they become needed.

This helps your app to download fast, launch quickly, while still providing very high-quality content to the users.

And all of this, without taking up a lot of local storage on the customer's device at any given time.

Last year, there was an upper bound to your app bundle at 200 megabytes.

This helped your app to be very lean, and ultimately, your customers were able to start using your app that much sooner.

But since then, we have received many requests that this limit be increased.

So, in tvOS 10.2, we increased this to over 20 times at 4 gigabytes.

So, if you have an existing project that conformed to the old limit, and you have some resources that you wish you could have included in the app bundle, the new limit will enable you to do that.

First, go to the Asset Catalog, and select the resource that you want to move back into the app bundle.

And at the bottom of attributes inspector, simply delete the tags.

Now, this resource is bundled, so at runtime, you can directly access it without first having to make the bundle resource request for it.

And of course, this increase does not come at the cost of counting towards the rest of your asset pack allowance, which remains the same at 20 gigabytes.

So, now, the combined size of your app bundle and content can be up to 24 gigabytes.

And this is a lot of content.

And we believe it will help you make your app's user experience even richer than before.

So, that's ODR in tvOS.

Next, we're thrilled to report that beginning tvOS 11, RTL or right to left languages, are fully supported.

So, if your app looked like this in English, it will look like this in Arabic, and like this in Hebrew.

In other words, your text will flow right to left, and most of your user interface will appear automatically mirrored.

And if you're used to supporting RTL in iOS or macOS, you'll be pleased to know that everything works the exact same way on tvOS as well.

But if you're not, we have a few recommendations.

First, is to use based internationalization.

Base internationalization separates string localization from UI layout, so while you're working on the UI, your localization expert can continue to translate the strings without worrying about interfering with the layout.

And all new projects are created with base internationalization turned on by default.

So, if you're starting anew, you're already there.

But if you have an existing project that has yet to take advantage of this, you can go to the Project Info, and check the Use Base Internationalization checkbox to start using it.

Next, is to use Auto Layout.

In particular, leading and trailing attributes instead of left or right when creating the constraint.

This is so that when the system lays out the UI, it can infer the appropriate left or right directions based on the current language direction.

And finally, constantly test your layout during development.

And to help you with this, there's an option in Scheme Settings where you can temporarily set the application language.

So, you can set it to Arabic, Hebrew, or even right to left pseudo language, which simply flips the direction without changing the actual language.

Now, RTL support is new in tvOS this year, but it has been around for iOS and macOS for a number of years.

And previous years' sessions have great guidelines and best practices that now apply to tvOS.

So, we highly recommend that you check them out.

And of course, RTL support is built into TVML.

So, if you're using TVML templates in your app, you'll get all the right behaviors for free.

So, that's RTL support in tvOS.

Next, is Safe Area.

Many TVs use Overscan in some shape or form, creating a situation where not all the pixels are displayed to the user.

So, in the past, we have recommended that you manually compensate for this by insetting your view's content.

And the API to assist you was UIScrollView.

overscanCompensationInsets.

This provided you with the values that you can then plug into your view or view controller's configuration code.

tvOS 11 introduces a more, robust framework for you to make sure your content is within the Safe Area, with much less work.

So, for example, some properties are automatically updated for you.

Your view's safeAreaInsets is updated as it moves in and out of the view hierarchy.

And your view's safeLayoutGuide is also updated as the Safe Area Inset changes.

But you can also customize your own things, by using UIView Controller's additionalSafeAreaInsets.

And the values you specify here, will be added when calculating the Safe Area Insets of the View Controller's view.

Now when you link your app against tvOS 11, your app will be subject to the new behavior.

And we highly recommend that you take opportunity to audit your app, and adjust the layout in the context of these new APIs.

There was a session yesterday, Updating Your App for iOS 11, that goes into this very topic in depth.

So, we recommend you check it out.

But if you have a view or view controller that manually compensates for Overscan, and it does so in a rather delicate way, and you're hesitant to touch it just yet, you can opt out of the new behavior on the view or view controller basis.

And to do this, there are Insets Layout Margins from Safe Area for your view, and view respects system minimum layout margins for your view controller.

And our own experience suggests that oftentimes, it's your scroll view that requires some of your attention.

So, for scroll views, there is Content Inset Adjustment Behavior.

And by setting this to Never, you're effectively opting out your scroll view to the new behavior.

So, that's Safe Area.

Next, is updating your app's data in the background.

Last year, we brought user notification framework to the tvOS, so you can send remote or push notifications to your app.

But there was one notable aspect.

When the system received multiple notifications while your app is not running, it only delivered the very last one and that, when the app is explicitly launched by the user.

And this is improving.

In tvOS 11, when a notification is received by the system, the system wakes your app in the background, and delivers it.

And this provides an effective means for what's called a silent notification.

A silent notification is a notification that wakes up your app in the background, so it can do some work transparently for the user.

That's where the word "silent" comes from.

And by using silent notification, you can periodically download new content, refresh your app's data, or even set up to alert the user in the app, when the app enters foreground.

So, to configure your app to process silent notification, first, add remote notifications background mode.

And then, make your app delegate, the user notification center delegate.

And register to receive remote notifications.

And then user notification center did receive with completion handler, do the work.

So, that's silent notifications.

The second way of updating your app's data in the background is through a mechanism called Background Fetch.

So, if your app needs to for example, periodically check for new content, it can register for Background Fetch.

Then the system, when it deems an opportunity arises for you, wakes it up in the background.

Your app can then initiate a fetch operation and do the work.

To configure your app to do a Background Fetch, first add Background Fetch Background Mode, and then, in your app delegate, register for Background Fetch.

And finally, in your application perform Fetch with Completion Handler, implement the work, and don't forget to call the Completion Handler with the fetch result.

So, that's Background Fetch.

And as you can see, tvOS11 provides two new ways of updating your app's data.

Often, you know exactly when new data is available for your app, and that's when you call silent notification.

On the other hand, it's the system that knows, "When is the best time to check for updates for your app?"

And this is because it not only looks into its own resource availability, but also takes into account user behaviors such as which apps the user has been using most frequently.

So, to take advantage of that, register for Background Fetch.

And we hope you take advantage of these new ways to make sure your app is up to date, even before it enters the foreground.

So, that's Background Update.

[ Applause ]

Next, is scrolling.

When a scroll view has a large amount of content, it is often tedious, if not frustrating, to scroll through them all, to get to the exact item you want.

So, in tvOS 10.2, we introduced Accelerated Scrolling to help users scroll more efficiently.

To enter the accelerated scrolling mode, all it takes is a few large swipes in the same direction on the touch pad.

Additionally, the user can swipe on the far-right edge of the touch pad, to browse through the indices.

And the good news for us developers, is that we don't have to do any additional work to get this new behavior.

In fact, it's built into any scroll views, including table views, or even collection views.

And this behavior is always on, and you can't turn it off.

But there are some things you can customize to make sure that your scroll view works well within your design.

So, by default, the index bar appears as you enter the accelerated scrolling mode.

But you can completely hide this by overriding the Index Display Mode to Hidden.

Also, the default scroll indicator style works really well because it adapts to the view controllers light or dark user interface style.

But if your design requires you to have an explicit style, you can override this to black or white, and then do that.

Additionally, you can customize the index titles for your table views by using the two data [inaudible] methods.

First, to get the array of index titles, and to get the index for a given index title.

Similarly, for collection view, you can get the array of index titles and get the index path for a given index title.

So, that's updates in Scroll View.

Next, is a new button type, UIButtonTypePlain.

But before that, let's take a look at the system button.

UIButtonTypeSystem provides interactive focus effect when the button is in focus, and background blur when it isn't.

The background blur, provides the affordance of a button and also, enhances the legibility of the title.

It is one of the most widely used controls in tvOS, which is perhaps why we have heard from many of you that you'd like to customize this a little bit more, to add a background color, for example.

So, in tvOS 11, we're making a new button type, UIButtonTypePlain.

A plain type button has all of the interactive focus effect of a system button, but without the background blur, which lends itself to full customization.

And using a plain type button is straightforward.

First, create the button with UIButtonTypePlain, and continue customizing it.

So, that's the plain type button.

Thank you.

[ Applause ]

The last set of enhancements in this first part, is around UIImageView.

On tvOS, interactive focus effect is an important technique.

It gives your users a sense that they're connected with the screen, and also tells them exactly where their focus is.

And most often, we use floating, layered images to maximize the effect.

Since it was first introduced, many of you have asked for a way to customize this further, by adding your own content at runtime, so they can participate in the focus effect.

In tvOS 11, we're introducing an easy and safe way to do that, and that's Image Overlay.

Image Overlay uses a new property, Overlay Content View, which is similar in concept to the content view in table view or collection view cells, in that that's where you add your content as sub-views.

By default, overlay content view clips its child views to the image views bounds, but you can override this and draw outside of it, by setting the clips to bounds of the overlay content view to false.

The next improvement in UIImageView is in Alpha Channel Support.

As you know, layered image are required to have an opaque background.

And even floating flat single layered images, for floating effect, they are also required to have an opaque background.

In tvOS 11, that is no longer the case.

So, you can now have arbitrary shape alpha-channel, and for some of you, this might scream non-rectangular shadows.

So, instead of just talking about this, I'd like to ask my colleague Paul to show us in a demo.

Paul?

[ Applause ]

So, yes, I'd like to demo some of the new features of UIImageView in tvOS 11.

I've been working on this simple video playing app here.

I liked they had a couple of new features.

The first thing I like to do, is add an icon to the poster to make it obvious that when you select the poster, the video will start playing.

And I also like to add a progress bar, to the posters of the videos that I've started watching.

And that way, I can quickly see how far through the videos I am.

So, I'm just going to add some views to the image view of the poster to implement that UI.

And you can see that the UI shows up, but it feels pretty disconnected from the image that's moving behind it.

And I'd really like for that UI to move along with the image.

Luckily, that's easy to do in tvOS 11.

Instead of adding those views to my image view, I'm just going to add them to the image view's overlay content view.

Build and run and see how that looks.

That's more like the effect I was going for.

[ Applause ]

Yes, the UI moves along with the image, as if it was another layer in the layered image.

And the next thing I'd like to do is add some gadgets to these posters, and that way I can mark videos that might be new or otherwise interesting to the user.

And I'm just going to add a touch button to the app that will let me toggle those badges on and off so they can make sure the UI's working the way I want.

To make that touch button, I'm going to make a button of type custom, so that I don't get system chrome that you ordinarily get with a button.

And I'm going to set the button's image view to adjust image when ancestor focused, and that way it'll get the nice, floating effect when the button becomes focused.

And I'm going to use the same image for the button that I'll use for the actual badges themselves.

And the badge image, has a circular alpha channel.

And in tvOS 11, that works well with the floating effect of the shadow and the spotlight and work the way that you would expect.

When I tap the button, I'm going to add the badge image to the overlay content view of these posters.

We'll see how that looks.

We can see that there's a problem.

The badge is there in the upper left corner, but it's being clipped to the transformed frame of the image view.

And often, that's exactly what you want for your overlays.

In this case, it's not what I want.

Luckily, I was listening to Hans' talk, and he let me know how to fix this.

I'm just going to set clips to bounce to false on the overlay content view.

Let's try that one more time.

So, I'll toggle the badges on.

That's what I was I hoping to see.

So, now the badges draw the way I want them to.

And then continue to move with the image along with the rest of the UI.

[ Applause ]

So, that's just a quick look at some of the new features of UIImageView in tvOS 11.

Back to you, Hans.

[ Applause ]

Thanks, Paul.

That was a great demo.

And that was enhancements in UIImageView.

We have just looked at seven new enhancements in tvOS.

But there are many more enhancements in iOS that also apply to tvOS.

Among them, we think one deserves a special attention.

And for that, I'd like to invite Dan from the Media Framework's Team to tell us all about it.

[ Applause ]

Thanks, Hans.

Alright, I'm going to take a few minutes to talk about what's new in AVKit in tvOS 11.

AVKit provides standard, interactive video playback for all apps on tvOS.

Includes, scrubbing, skipping, scanning, and a variety of advanced features like interstitials, and content proposals.

Now, we talked about the basics last year, so if you need to catch up, you can watch the AVKit on tvOS session from last year.

And here we have AVPlayerViewController providing the standard video playback, in this case, showing scrubbing.

And advanced features include custom content proposals, which we introduced last year.

Now, let's talk about what's new in tvOS 11.

When you want to play static images, such as a logo or a hint or other information on top of your video but below the playback controls, you use the overlay view.

In tvOS 11, we're introducing a new layout guide, the Unobscured Content Guide, which indicates what portion of the screen you can use for your static content, without overlaying the playback controls or hints.

Here we see where the unobscured content guide lays.

As you can see, the hint the swipe down for info hint is above it.

The bottom edge of the layout guide goes right against the transfer bar.

But you do notice that the scrubbing thumbnail however is not included in that excluded region.

If your content is in the overlay view, it'll be underneath that scrubbing thumbnail.

Now, let's talk about the transfer bar.

Many of you have content, logos, or what have you, that you want to show at the same time that the transfer bar is visible.

Or perhaps you have something like a channel logo that you want to hide or get out of the way when the playback controls are visible.

You can do both of these things with the transfer bar animation coordinator.

To use it, you simply implement the delegate method.

Player View Controller will transition to visibility of transfer bar with coordinator.

And you add your animations.

Now, in this example, we are we have a logo image view and we're going to hide it or show it with the transfer bar.

Now, by no means are you limited to this.

You could reverse that visibility and hide it instead of showing it.

You could have an additional animation where your view slides in from the side, for example, or whatever you can you want.

Next, we're giving you greater control over controlling dismissal with three new delegate methods.

And these are Player View Controller should dismiss, will begin dismissal transition, and did end dismissal transition.

In many instances, Player View Controller can provide an automatic transition when it's presented or dismissed.

If you simply present or dismiss it, it can fade in and fade out.

If you embed the view in your own view as a thumbnail for example, it can automatically zoom out and automatically zoom it back when it's dismissed.

However, in some cases, you may have some sort of custom presentation where AVKit isn't going to be able to provide a reasonable transition and you need to do it yourself.

Well, the way you can do that now is, by implementing the Should Dismiss method, and here you would implement your transition and return False to indicate that AVKit should not provide the standard transition.

When AVKit does provide the transition, it will also call the Will Begin Dismissal and Did End Dismissal transition methods.

So, at the beginning and at the end of animation.

So, you can perform whatever operations you want to do there, such as controlling the playback rate for example.

The info views, are shown when the user swipes down during video playback.

And the standard info views provide a variety of interesting things, including metadata, navigation markers, subtitle controls, and audio options, as you can see here.

Now, a lot of you would like to have your own controls here.

And so, I'm pleased to announce that we are introducing custom info views.

In tvOS 11, you can provide a custom info view as you can see in this example.

[ Applause ]

So, all you need to do is create your own UIView Controller.

You need determine the contents of it.

Set the custom Info View Controller Property of your Player View Controller, and that's it.

Now, we ask that you keep your style consistent with the other info views so that the user won't feel out of place or confused.

And to that end, we have some guidelines.

So, first, use the standard font styles.

Second, keep your view background transparent so that the effect's view will show through.

You can indicate the desired height of your info view, using auto layout, which is the best way to do it.

But if you prefer, you can override Preferred Content Size on your View Controller instead.

And regardless of which of those you use, keep your content to no more than half of the height of the screen because you don't get to use the entire screen.

And as for controls, while, you can use whatever you want, we would recommend that you avoid things like text fields and buttons, which feel out of place, and instead prefer things like collection and table views.

Alright, finally, I'd like to talk about Live Streams.

We're adding four new metadata identifiers in tvOS 11 that lets you specify the starting date and ending date of your live stream or your event stream.

Now, as an example, one example where you want to use the exact end date, would be something like a traditional broadcast stream, where you have a continuous live stream that's broken up into scheduled blocks of 30 minutes or 60 minutes.

And in that case, you can use the exact start and exact end dates to indicate what part of that program you're watching right now.

How about the approximate end date?

Well, the easiest example there would something like a sporting event where you know for example that the game will probably last about three hours, but you really have no idea up front how long it's going to go.

It could end sooner.

It could end later.

And in that case, you use an approximate end date.

In either case, the transfer of our timescale will reflect these dates.

So, it will either reflect more time or less time.

When you provide exact values, those are displayed on the transfer bar with a clock time and approximate values are not shown, so that these are isn't misled into thinking it's going to end precisely at the end time.

And this helps to orient the user to where they are in your program.

How much they've missed, how much they should expect to have before the program is over.

So, let's just to visualize that, this in the case where you have a live stream, and you haven't specified either a start or an end date, you get the default or legacy behavior.

Now in the past, this differs a little bit from what we did in tvOS 10, because in the past, we showed the start and the end times.

We no longer do that because they're both approximate.

But you would have a 30-minute window.

So, in this example, it would run from 11 to 11:30, and so the 11:28 mark is near the end.

However, now that's fine if your program actually from 11 to 11:30, but what if it doesn't?

What if it's you're in the middle of a three-hour baseball game or something?

Well, here's an example with exact start and end dates, in this case, 10 o'clock to 1 o'clock, 11:28 you see is now roughly in the middle, and the scale has been adjusted.

And of course, we can set an approximate end date instead and that just makes the end time disappear.

But the scale remains the same.

So, let's look briefly at the code for this.

If you've seen last year's session, the new metadata item helper function will look familiar.

All we're going to do is we're going to create our start dates.

We're going to create a metadata item for it.

We're going to do the same thing for our end date.

And finally, we're going to add our two metadata items to our player item, to the external metadata property.

Alright, now we're going to try a brief demo.

I've got a few things I can show here.

First, here's our Unobscured Content Guide.

And, if we let it fade out, it fades with it, because I'm using the transfer bar animation coordinator.

So, it fades out quickly.

I feel like I should wave at myself.

And here we have a custom info view.

As we saw earlier, and we can switch it from to let's put it on exact dates.

And there we go.

Now, the good news alright.

[ Applause ]

The good news is that the session is not in fact going three hours.

I just did that because if I set the actual end time, the current time would be too close to the end time and they would the event time would be hidden because they'd be overlapping otherwise.

But, here's another look at that code.

People viewing this at home later are going to be very confused that you just dropped in right now, because the audio track seems a little bit off.

Alright, and that's our demo.

[ Applause ]

Back to the slides.

Alright, so that's we've talked about several new features in AVKit, and there are a couple more that I haven't talked about, but these are the most important ones.

For more information about using AVKit on tvOS, see last year's session.

And you can also join us in the AVKit lab, shortly after this session at 11, until 1, in Tech Lab F.

And bring us your questions.

And now, I'd like to introduce Marshall to the stage to talk about View Controller enhancements.

[ Applause ]

Thank you, Dan.

My name is Marshall, and today I'm going to talk about View Controller Enhancements in tvOS 11.

Let's dive right in.

First, we're going to take a look at mobile presentations.

If you've ever used the UI Alert Controller or put your Apple TV to sleep, you might recognize this transition where we progressively blur the content and animate in the View Controller.

Well, starting in tvOS 11, you can now do that in your own applications, using the new UI Multi-Presentation Style called, .blurOverFullScreen.

This will progressively blur the content of the presenting view controller, and it uses the same timings in the animations that UI Alert Controller does.

Implementing this is easy.

You set the mobile presentation style to blur over full screen, and present your view controller, like you normally would.

Next, we're going to talk about some enhancements, the UI Split View Controller.

If you've used a split view controller in your application before, then you know that the master view controller's on the left, and the detailed view controller's on the right.

Well, starting in tvOS 11, we now have a new property that will allow you to swap the layout.

In order to support this, we have a new enum called UI Split View Controller Primary Edge with two values, leading and trailing.

And then, a property that you can set the primary edge.

Now, these names are important because as we heard, tvOS now supports RTL languages.

So, in this case, if you have a left to right language and use leading, the master view controller will be on the left, and trailing the master view controller, would on the right.

But in RTL languages, those will be mirrored, so the master would be on the right, and for trailing, it will be on the left.

Last year, we announced a new use facing feature where users can change their system appearance to dark.

And this allows a great experience when their Apple TV's in a movie room or perhaps for use at night.

Well, starting this year, we have another mode which we call automatic.

And what this will do, is it will automatically change the user's system appearance to dark at night, and light during the day, based on their current location.

Now, it's more important than ever to make sure apps adopt the light and dark appearance to offer the best user experience.

In order to support this, we've added some new APIs.

First, let's take a look at Top Shelf.

If you've provided a Top Shelf extension, you know you can provide an image URL to provide images up in the Top Shelf.

Now, we are allowing a new API to provide a dark image asset as well, and the system will automatically choose the correct asset to show, based on the system appearance.

So, if you've looked into this before, you have then a TV content item and then set the image URL.

Starting in tvOS 11, you can now call Set Image URL for traits and provide a light and dark trait to provide those image assets.

If you'd like to still use the same image, then you can just provide the same image URL to both these method calls.

Finally, today, we're going to talk about how you can adapt your app's appearance to your content.

We do this in our apps, such as our movies where if a movie has artwork that's light, we'll show appropriate controls, and if it's dark, we'll also show controls that look best on that.

Well, in order to make this easier for developers, we have a new property on UI View Controller, called Preferred User Interface Style.

If you've ever used preferred status bar style, then this might look familiar to you.

What it lets you do is specify a specific UI User Interface Style, on your view controller, which will customize the appearance by updating the trait collection, and update the system wallpaper.

Let's take a look at what this looks like.

Here, I've got a Tab-R controller, where the first view controller specifies a preferred style of light, and the second view controller specifies a preferred style dark.

When we switch tabs, we see that the application's trait collection automatically get updated, as does the system wallpaper.

So, we've added three new API method for you to implement this in your own apps.

First, we have a read only property, called Preferred User Interface Style that you override in your View Controller.

Here you can provide UI User Interfaced Style, light, dark, or unspecified, which means follow the system style.

For most people, this is probably enough to handle what you want.

But if you're using custom view controllers, and using Child View Controller Containment, there's two more methods that you're going to want to use.

First, the Child View Controller For User Interface Style, let's you delegate that decision to review controller.

In the case of tab bar controller, the current selected tab bar view controller or the current selected View Controller, gets returned here.

And then, when that change occurs, you need to call Set Needs User Interface Appearance Update.

This lets the system know that a change occurred and we can refigure out what the preferred style's going to be for your application.

So, those are our View Controller Enhancements today.

Let's take a look and see what we covered.

First, we learned that on-demand resources bundle size have been increased from 200 megabytes to 4 gigabytes that allow you to package more content on the application install.

We learned that tvOS now supports RTL languages, so make sure to use the tools we provide to test your layouts for those languages.

We learned about new ways to do work in the background to make sure that your content's always updated and ready for the user when they launch your application.

We talked about new AVKit enhancements including, the custom info views.

We also saw a new API on Image Views, so you can make your content more interactive for the user.

And finally, we talked about how to adapt your content, your application's appearance to your content, using preferred user interface style.

If you'd like any more information, please develop please visit developer.apple.com.

If you want to expand on any of the topics we have, we have a lot of related sessions, including a few videos this year.

Thank you for coming and I hope you enjoy the rest of the conference.

[ Applause ]

Apple, Inc. AAPL
1 Infinite Loop Cupertino CA 95014 US