[tvOS]ホーム画面にシェルフを表示する

シェルフ

棚、という意味

シェルフの表示条件

一番上の段にアイコンが置いてあることが条件となる。

一番上にアイコンがある例

一番上段にアイコンが無いと、シェルフは表示されない。

シェルフの立ち位置

Keyboard Extensionのようにエクステンションの扱いになる。

プロジェクトに追加する

NewからTargetを選ぶ

TVServiceExtensionを選択して追加

ServiceProvider.swift

ターゲットにTVServiceExtensionを追加するとServiceProvider.swiftがプロジェクトに追加される。
ServiceProvider.swiftはTVTopShelfProviderによっていくつかの機能が与えられたNSObjectのサブクラス。

topShelfStyle:TVTopShelfContentStyle

ここではシェルフのスタイルを返す
InsetとSectionedが選べる。

Sectioned

Inset

この違いは画像の大きさではなく、セクションのタイトルが表示されているか否かである。

topShelfItems: [TVContentItem]

ここでは表示するコンテンツを返す。

    var topShelfItems: [TVContentItem] {
        let contentIdentifier = TVContentIdentifier(identifier: "sample", container: nil)
        let contentItem = TVContentItem(contentIdentifier: contentIdentifier!)!
        let imageURL = NSBundle.mainBundle().URLForResource("Unknown", withExtension: "jpg")
        contentItem.imageURL = imageURL
        return [contentItem]
    }

imageURLにはhttps~から始まるURLも指定できる

    var topShelfItems: [TVContentItem] {
        let contentIdentifier = TVContentIdentifier(identifier: "sample", container: nil)
        let contentItem = TVContentItem(contentIdentifier: contentIdentifier!)!
        let imageURL = NSURL(string: "https://placeimg.com/640/480/any")
        contentItem.imageURL = imageURL
        return [contentItem]
    }

imageShape

imageShapeを指定すると、ポスターや四角などの大きさに画像をコンテンツを変更できる。
なおInsetの場合はExtraWideのみ、Sectionedの場合はPoster,Square,HDTVが選べる。

topShelfItems

TVContentItemは一枚のコンテンツとして以外にもコンテンツを束ねる役割もある。

    var topShelfItems: [TVContentItem] {
        let contentIdentifier = TVContentIdentifier(identifier: "sample", container: nil)
        let contentItem = TVContentItem(contentIdentifier: contentIdentifier!)!
        let imageURL = NSURL(string: "https://placeimg.com/640/480/any")
        contentItem.imageURL = imageURL
        contentItem.imageShape = .Poster
        let group = TVContentItem(contentIdentifier: contentIdentifier!)!
        group.topShelfItems = [contentItem,contentItem,contentItem,contentItem]
        group.title = "画像群"
        return [group]
    }