Apple TV’s Top Shelf .. how to create

As we know the top shelf of Apple’s TV. We can say that it is the showcase for top row of the installed apps. User can see the featured content of the focused app. As shown in the images, the focused application , tv shows , its featured content is shown at the top of the screen. User can navigate through this content and can open any featured item directly without opening application.

We will discuss how can we implement the top shelf for a tvOS app.

To implement top shelf, we have to add a new target to our tvOS application.

Select File -> New -> Target -> and from tvOS section select TV Service Extension.

In that created target, we can see the ServiceProvider.swift (or ServiceProvider.h & m) Class. We can see that this class already adopts a class TVTopShelfProvider with definition of two required methods

var topShelfStyle: TVTopShelfContentStyle {

return .Sectioned

}

And

var topShelfItems: [TVContentItem] {

return []

}

in topShelfStyle , we can return types Inset and Sectioned .

In topShelfItems method, we can Add items as follows

var topShelfItems: [TVContentItem] {

// Create an array of TVContentItems.

let wrapperID = TVContentIdentifier(identifier: “shelf-wrapper”, container: nil)!

let wrapperItem = TVContentItem(contentIdentifier: wrapperID)!

var ContentItems = [TVContentItem]()

for (var i = 0; i < 10; i++)

{

let identifier = TVContentIdentifier(identifier: “VOD”, container: wrapperID)!

let contentItem = TVContentItem(contentIdentifier: identifier )!

contentItem.imageURL = NSURL(string: imageurl as String)

contentItem.imageShape = .Poster

contentItem.title = titleStr as? String

ContentItems.append(contentItem)

contentItem.displayURL = NSURL(string: displayUrl as String)

}

// Section Details

wrapperItem.title = “Featured Title”

wrapperItem.topShelfItems = ContentItems

return [wrapperItem]

}

Whenever you change the content provided by the extension, post a TVTopShelfItemsDidChangeNotification notification to prompt the system to reload your content.

Source : https://developer.apple.com/tvos