[MUSIC] Okay, let's take a look at a slightly more advanced user interface. This is going to be based on the same project as before, but I've added some new classes and some new elements in the storyboard. You can download the starter project in the module as well for this video. So here's the motivation. Since we have so much space on this television, let's show all the image feeds at once instead of forcing the user to choose only one. Having a focus engine and a grid layout, and being able to navigate up down and left and right makes this easier to navigate. And makes it easier to have like all these information on the screen at once. Okay, so I'm going to open the storyboard here and we'll take a look at what changes have been made. There's a bunch of new stuff in this project. All right, so main storyboard. So this is based on the same storyboard as before, but I've actually added a bunch of new stuff here. Okay, so this app is kind of set up. This story, this collection view's going to be set up in a similar way as in the UI kit catalog as well. So if you're looking at the collection view focus engine example in the UI kit catalog, you can see the difference and the similarities with what I've been doing here. Okay, so we're looking at this view controller here. So I have a view controller which is a collection view controller just like before but in this case, it's a little bit tricky. So each cell, in this collection view is actually the entire width of the screen. So each row it's going to be a row for each cell, so it's kind of hard to see on this screen all at once, but each cell in the main collection view is an entire width of this screen. And then what we're doing is kind of tricky, but kind of cool actually. So we're taking another Collection View and embedding it within each cell of the outer Collection View. So this Collection View here has a container cell, so has one type of cell and in cell which is the width of the entire screen, it has another collection view. And then in that Collection View, there's going to be a bunch of cells that are just the same image used cells as before so it's like an embedded collection view, and don't worry this is totally legit. It works, but it's a great way to do complicated layouts of multiple kind of rows of scrolling data and this is kind of how it's all set up. Okay, so maybe it's easier to see that in action, so I'm just going to run that. Okay, and you'll see here. Now, we have three different feeds. And you'll see that we have the kittens, the pugs and the pizza all showing on the screen at the same time. And you'll see that the collection views that are in the inner collection views for each row, there's like a collection view that's a horizontal collection view. So it lays out those image horizontally and then the outer collection view that parent collection view scrolls vertically so that we can scroll up and down through the different rolls. But you can see here, here's something that's interesting. You can see as I scroll up and down as I swipe up and down, all the cells in each row are receiving the focus. It's not just an individual cell like before, so that's because the system thinks I want like my top level cells, each row to be actually what's focused. But what I really want is the lower level cell, the individual images to be focused, not the rows themselves. So we're going to have to make a tweak to this system to tell it or to the app to tell the system that it shouldn't focus rows and that way it will keep searching down that stack, down that tree of views for the lower views to focus. So we'll do that in our outer view controller. So this main, the full screen view controller is controlled by this Master Feed Collection of your controller class. So go here, all right. So let's scroll down. So in this class, it finds all those feeds, uses the same method really to go in for each feed and load it. And then when it downloads a feed it gets called, this completion block gets called and it's going to insert that row into the CollectionView. Otherwise it's pretty simple. So the function we want to get into this class to add is this canFocus item at index path. And if we give it false what it will tell the collectionView is that it shouldn't focus that item. So what's actually going to happen is as it sort of scrolls up and down the focus engine is going to try and focus on the lower level views instead, not the outer views. Okay, so we'll try that again. Here we go, okay. Now great, you can see now I can scroll up and down with my arrow keys here, and I can scroll left and right. And now you see the advantage of having multiple collection views now, because I can scroll these rows individually. So they kind of each row is like section with different items in it. And then I could scroll up and down to the different tasks or sections and go in and select different things. Okay, so you'll also notice here there is a kind of cutoff here, so you see where the shadow is there. You'll see that it kind of gets cut off by the border of the collection view. So that's another thing we're going to have to go and fix, so let's stop that. And that's really happening because one of our views is clipping its sub views. And in this case, we actually want to let this shadow show through, so we're going to have to disable clipping. And it actually happens to be happening on the collection view itself. So the row collection view is clipping in subview. So we'll click on this row here. That's the top level one. You notice if I go down that's the Intercollection View here. Let's see here. That should be it. It's kind of hard to remember sometimes. Okay, let's try this one. Let's take a look under here. Yes, it says it's clipping sub views so I'm going to disable that, not 100% sure. Let's see here. Yes, okay. So now you can see that kind of harsh sort of cut off there is not happening anymore, we disabled that clipping. So this row here is not clipping its shadows anymore. It's just kind of showing up underneath. So it's kind of nice. So it's another little thing you have to keep in mind. This is kind of a little bit more of a special thing for TVOS, because when you're focusing on views and they're growing and shrinking, they could maybe overlap other views and maybe outgrow their boundaries. But that doesn't mean they necessarily have to get cut off and you have to be careful not cut things off when they grow and shrink. You have to leave a little bit of room for them to grow and shrink as well sometimes. Okay, so that one looks much better. Okay, so when I click on one of those items, what we have here is another view. There's a segue, and this segue is connected to these imaging cells, and it's going to go to a detail view, which is going to show the image and some buttons on the screen. So how does that work? Well this is like similar to other apps in iOS, you get a prepared for segue function and that lets you customize what's going to happen in the destination view controller. So I'm going to show you where that lives. That's also in this master view controller here. So I'm just going to uncomment that. Okay, now something special is happening here again just because of the way we've arranged everything. This CollectionView is actually not the CollectionView that's where the row is getting selected. So these selects the row or selects the image and then the segway happens, but the outer view controller has no way of really knowing which image was selected. It doesn't get a delegate callback that happens on the lower level collection view controller object. So what's going to happen is we're going to actually going to have to look for the focused cell. But it turns out that the UI screen object actually keeps track of what's focused. So I can actually ask it what view is focused and that actually should be a UI image collection view cell. And then I can find out what image it has and then just transfer that to the destination view controller there so let's try that and see what happens. So that's one way to find out if you're not directly related to or connected to whatever is being focused you can find out from the globalize screen object as well. And then we see that we pushed our new view controller onto the stack. Now this is like a navigation controller, so in iOS you'd see like a right to left kind of push animation. In this kind of Apple TV idiom it kind of just fades in over top, and then to go back, I just press Escape. Okay, so let's go back into that. And there is one more thing that I want to show you here. All right, so you see these buttons here. You can see how on the top right at these three buttons, there's an empty blank space if I'm on the dislike button. What I would really like to do is to be able to press up and go back to that share button here without having to go left first and then up. But as it stands right now, what's happening is that when I press up, the focus engine that kind of knows what views to click on to go to, when it goes up and down is looking up, it's looking up above this just like this button and it suddenly see anything I can focus on. I can't focus on this image and I can't focus on any empty space or these labels. They're not really interactive elements. So it's just saying no, it can't go up. So it's not going to make any changes at all. So I have to go back here and then go up this way. And I think for this, if I press right it will be kind of nice just to be of the jump over this Dislike button here. But again, if the focus engine is looking to the right of this Share button and it sees nothing there. So it's not able to jump over to the Dislike button. So what we need to do is actually give it a hint, to tell it what to jump to between these two buttons here. So what we can add is something called a focus guide. And the focus guide is like an invisible view that sits here. And it's not really a view, it's just like a place holder. And what it does is it tells the interface that you want something special to happen and it sort of the focus engine is actually able to find it. So instead of just looking and finding nothing, it sits in that search path for the focus engine. And in it can tell the focus engine where to go, in that case. So it's kind of this hidden imaginary place holder. So you create that in code. I don't think you can create that in story boards at the moment. Maybe that'll be added in the future, but for now that's something that we have to create in code. So I'm just going to exit out of this and we're going to go to that detail view controller where all this stuff is implemented. And let's just uncomment this here. Okay, so this is where that special focus guide thing is. It's a very helpful FocusGuide is created here. So the FocusGuide, it works kind of with layout constraints as well. So this is using this incurs to create this layout constraints and it's adding it to the view. So you can actually add it as a special layout guide. The FocusGuide is actually a sub class It's a classical delay off guys, so you can add it to the view that way. Okay, so what it does is it just sits in there and then we implement another one of these focus environment call backs on this view, this view controller to update this focus guide with what we want to actually happen. So when the system finds its guide it's going to look for a special attribute, the focus guide called the preferredFocusView. So when it looks at that the preferredFocusView is going to tell the system where to go. So what we use is like this call back method to update that preferredFocusedView each time the systems tells us that the focus has changed. So if the focus is on the bottom right, what we're going to do is tell that it should actually jump over to the top left button And then if the case is that it's on the topLeftButton, then we tell it that the next thing it should do is if it hits that focusView, focusGuide, it should jump to the bottomRightButton. And then if it's neither, then it's just not going to have any effect at all. So we just nill it out there. So let's just go back and try it again. Okay, so we just hit that and then now, if I press right so that you can't really see it. So I'm just going to press right, press up, I can jump back to the top row there, if I press right, I jump back to the bottom. So it's now acting in kind of a more kind of usable way, the way user's might expect it to work. We've given the focus engine a bit of a hint and it's jumping how we expect it to do. So these are just some basic ways to tweak the focus engine and as your UI gets more complicated and has more embedded levels, you'll find that you need to think really carefully how the user navigates it using simple directional adjusters. Okay, hope you enjoyed this video, that's it and good luck with your TV OS apps. Thank you very much.
