[MUSIC] Okay let's start with a basic project to show off a grid of photos using a collection view and you can download this starter project within the module. Okay, let's take a look at what's inside. You'll see that once I open this, you'll see that I have recycled my feed and feed item classes from the photos feed app in the persistence of networking module, and these are really completely unchanged. And if we take a look at the app delegate, you'll also see that I've copied over the feed loading functions that we created for the photos feed app. So that's one of the great things about IOS, is that most of the same API's that you're used to using for iOS are available on Apple TV as well. So you can take that knowledge and transfer it over. So we're using NSURLSession here to download data and then deserializing it using a JSON serialization object as well. So it works the same way. And we're also opening, restoring a cache of those objects using the KeyedUnarchiver and KeyedArchiver objects to the cache's directory. One important thing to keep in mind though, if you're thinking of doing an Apple TV app that creates user data, is that the Apple TV does not have a documents folder for user data. You can't really store large amounts of data on an Apple TV. I think the maximum is something like 500 kilobytes, or one megabyte per app, that's it. So if you want to store data for users, you have to start thinking about using CloudKit or other online services to save their data. But, you can still use NSUserDefaults and other APIs like NSKeyedUnarchiver. If you're okay with storing that stuff in the caches directory, or if it's small enough to store in the user defaults object. Okay, so let's take a look at the storyboard here. So previously we started out with the single view app, and we've just added and changed that around a little bit here. I'm going to zoom out so we can see what's going on. Okay, so I've added a navigation controller, that's the root view controller, and I've added a collection view controller here, to show a grid of photos. I've created a single cell, this is like a prototype cell, to show my images along with a title. And this is similar to those table view cells that we were using in the photos feed app in the other module. There's a custom UI view controller subclass to manage this collection view and a custom subclass as well, that's these two files here. So that's the ImageFeedCollectionViewController and the ImageFeedCollectionViewCell. So if you look at this view controller, what it does is it fetches this feed and uses it to populate its collection view. So it's very similar to that table view that we created in the iOS app. And again, let me just remind you that this feed is an official Flickr public photos feed, and we're using kittens as the search tag, but really it all depends on what users are uploading. So you may not get exactly the same images as you're going to see here. Okay, well let's run that and see what happens. Okay, here it comes. Alright, so we are getting some images here. We're getting a grid of images. We see that the images are loading. And as we press the down arrow, we see, or like, swipe down on the remote, actually we see that it scrolls. But we see we don't have, we can't see what image we have in focus, right? Like, it doesn't pop out like we were seeing in the example app. So what we're going to do is actually fix that here. So let's go back to the storyboard, and this is actually quite easy to fix, if you would believe it. Let's go in here and we'll select this image view. And you know what, this is pretty easy to fix. We just go over here to this property and it's just as simple as clicking a checkbox on here. So we'll click that checkbox and let's see and let's run it again, see what happens. All right, so now you'll see that the images are popping out and showing a little bit of a shadow underneath, and that's totally automatic. The image view has gained this new feature within tvOS and it's just a new property that's available for tvOS apps, and that allows the image view to know when it's in a focused view, and to pop out. Okay, so we are back in the storyboard here. Now you noticed, actually, let me show you one more thing here. Okay, so you notice that we see all of these titles as well. Maybe we want to kind of make this a little bit more subtle so that the title only shows when the cell actually has a focus. So we're going to add some code to the cell, collection view cell subclass here that will adjust the alpha of the image to make it fade in and fade out depending on whether it has a, has the focus. So we go here. Okay, so we've added three functions here, they're pretty familiar mostly. The prepareForReuse will be called whenever the cell is about to be shown on the screen. So we're just starting with the alpha as zero. Then awakeFromNib is also when the cell originally wakes up. We're also initializing that alpha to be zero so that the title is transparent and you can't see it. Okay, so the interesting function here is the didFocusInContext. This is an optional method and it's part of the UI focus environment protocol. And all UI view subclasses on Apple TV comply with this protocol to let you customize what happens when the focus changes. So in this case, we want to hide and show the title. So we're going to change the alpha of the title depending on whether the cell is focused, but instead of just changing the title, we want to animate it smoothly. To make sure that our animation is smooth and works with the rest of the system, we're going to wrap this change inside a block and add that block to an animation coordinator. This coordinator is passed to you with this function and what it does is it makes sure that any animation to specify in here are going to be synchronized with what the system is doing when it changes the focus. The focus may change quickly. The animations may be much faster depending on how quickly the user is moving around on the screen, so it's important if you want to synchronize all this stuff to use this animation coordinator. It's really quite simple. You just set the alpha and then you're done. Okay, so let's run that again. Okay, and then now we can see that the titles are fading in and fading out. They are coordinating with that animation coordinator so that you can see that they stop, pause if we're going back really quickly, and then they also follow what the image view is doing. So it was really, really easy to implement there, but it's important to make sure that your system works in a way that people expect TV OS apps to work. Okay, so that is how to add a sort of focus animation to image views and to the title for these UI view cells. In the next section we're going to start digging a little bit deeper into how the focus engine works. Thank you.
