how to animate section header of collectionview in tvOS app?

Question

Need to animate the section header title when the collection cell below the header is focused. Just like if you go to "movies itunes" app on apple tv and go to top movies tab, if you look at the playlists below, when you scroll through items, the header animates, up and down to not to overlap with focused cell. any help is appreciated tvos screen shot link

Answer 1

I can't exactly provide the code; but this is basically what you're going to want to do.

1 - Create an intermediary class headingRouter; whose purpose will be to mediate between the scrollView header (collectionView or tableView) and the cell selection. An instance of heading router will live on your collectionView main level methods. You could use a delegate pattern to abstract out the image logic to the router and then on the collectionView; conform to the delegate in order to update the view in question.

2 - Headers and footers are what is called a supplementary view; so they can be assigned any custom subclass of uiView. In this headerView; you should have a method that takes in an identifier, possibly id and changes the image displayed. You can animate this change with a fade if you want it to look like iTunes.

3 - On your focused cell section; have the cells have an identifier that is assigned during the cellForRowAt method in your delegate/datasource methods. When a specific view is focused; using one of the various collection/tableView methods; you want to take that id; pass it to your headingRouter, which in turn will notify your header to change it's image to the corresponding image (possible held in cache) to the image you're focusing.

This is more the logic of implementation; but you haven't posted any code, so there isn't much of the way of specifics. You could do without the Router class but this is a cleaner solution.

Cheers