This has been a fun and challenging project and I wanted to share my growth as a developer with you. When we are finished you will be able to create a Featured content banner like that in the iTunes Movies App on tvOS.

The concept of this is pretty simple when you break it down. Your initial view will be embedded into a UITabBarController, it will contain a vertical collection view of cells. In each cell we will have a horizontal collection view of our featured content cells.

To get started lets look at TopMostViewController (our view controller inside the tab bar). First we need our presenter, this will do our work for the viewController so that we don’t have a lot of needless logic laying around. I named mine TopMostPresenter. It has one variable which will be our TopMostViewController’s dataSource. It also has one accessible function that will build our content (normally this is where the presenter would talk to our coordinator and preform our network operation, but for this demo we have static content). For this demo I am building DragonBall FighterZ fighters. :)

In our TopMostViewController we need a reference to our presenter and in viewDidLoad we will tell it to build our dataSource. We also will be using collectionViewDelegate and DataSource protocols. I am going to name my one featured cell TopMostCollectionViewCell and I will be calling a build function that we will create next. For this layer our cells do not need to be focusable so lets make sure to turn that off in the delegate method!

Now for the TopMostCollectionViewCell, our build function will tell its presenter to build the data from the TopMostViewController and will have a outlet to our featuredView (the View that will hold our inner collectionView). I have also added our struct for FighterData here, but it should probably be in our TopMostViewControllerPresenter where we are building out fighter.

In our TopMostCollectionViewCellPresenter we will just need a reference to our featuredViewPresenter and our build function.

Our FeaturedViewPresenter will hold our featuredFighters and have a delegate to scroll to the middle of our array of fighter cells when we load.

In our FeaturedView we will need an implicitly unwrapped optional of our presenter that we are passing in from our TopMostCollectionViewCell, we need to reference our collectionView and manage updating focus. This is the tricky part. Basically in the focus update we need to see if we are focusing our cells next and manually scroll the collectionview to the center as well as performing a transform in our coordinator.addCoordinatedAnimations.

Our FeaturedCollectionViewCell will have a simple builder func and references to the imageView and labels for the demo.

Now its time to setup our UI, please look at the gihub link storyboard for detailed information:

Connect your outlets, name your content then build and run. The result:

Full repo: https://github.com/EricADockery/iTunesMoviesFeatureBanner