tvOS中动态TopShelf的使用方法

全新的tvOS中引进了一个很重要的东东,叫 top sheft ,top shelf 是什么呢?先上图

有图好说话,简单来说,top shelf 就是一个可以像App Store 一样用卡牌style向用户进行内容推荐的这么一个东东,当然,不仅仅可以显示推荐内容,动态的top shelf 还可以显示用户最近浏览,收藏等,如果是游戏的话,可以显示存档信息。选中某个卡片,点击play按键,即可直接进行内容浏览或者开始游戏,非常方便。

Top shelf大大增加了应用的存在感,给app的交互带来新的方式,然而一切并没有开发者心中想的那么美好:只有位于列表第一行的app才有资格显示top shelf,其他的app都只能显示一个孤零零的图标。怎样才能让用户心甘情愿地把自己的app放在第一行呢,你们自己想去吧,反正我是不用管这事,嘿嘿。

另外需要说明的是,tvOS没有本地持久化存储,因此,所有的数据都要从服务器获取,so,使用cloudKit或者自己搭建服务器吧。

废话不多说,下面开始教大家使用 top shelf。

静态图像

这个没什么好说的,把图片直接拖进assets里面就OK了,注意分辨率一定要是1920x720。

动态显示

动态显示是个大头,没有谁愿意看着一成不变的图片放在首页上亮瞎狗眼,下面开始隆重介绍动态显示的 top shelf。

  1. 创建一个tvOS的app,这很简单,不介绍了。

  2. 创见完毕后,File->New->Target,选择tvOS下面的Application Extension -> TV Services Extension


  3. 输入名称,建议使用topshelf就OK


  4. 点击 Activate


  5. 这时主项目中会出现一个名称为topshelf的文件夹,里面有一个叫做ServiceProvider的文件,编辑它的代码如下:

import Foundation
import TVServices

class ServiceProvider: NSObject, TVTopShelfProvider {
    
    override init() {
        super.init()
    }
    
    var topShelfStyle: TVTopShelfContentStyle {
        return .Sectioned //
    }
    
    var topShelfItems: [TVContentItem] {
        let ID = TVContentIdentifier(identifier: "identifier1", container: nil)!
        let Item = TVContentItem(contentIdentifier: ID)!
        var Items = [TVContentItem]()
        
        for (var i = 0; i < 8; i++)
        {
            let identifier = TVContentIdentifier(identifier: "identifier2", container: ID)!
            let contentItem = TVContentItem(contentIdentifier: identifier )!
            
            if let url = NSURL(string: ["https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1416240957,410020165&fm=58","https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=216248366,1253432148&fm=58","https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3314685794,229436694&fm=58","https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1316079114,162208842&fm=58","https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=470891324,227323529&fm=58","https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3495368848,1024610533&fm=58","https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3305383698,853442007&fm=58","https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1778394871,4237479606&fm=58"][i])
            {
                contentItem.imageURL = url
                contentItem.imageShape = .Poster
                contentItem.title = ["星球大战","老炮儿","寻龙诀","我滴个神啊","神探夏洛克","夏洛特烦恼","游戏","不可思异"][i]
                contentItem.displayURL = NSURL(string: "hehe://\(i)")
                contentItem.playURL = NSURL(string: "hehe://\(i)")
            }
            Items.append(contentItem)
        }
        
        Item.title = "热门电影"
        Item.topShelfItems = Items
        
        return [Item]
    }
}

对上面的程序的解释

  1. topShelfStyle : 控制显示的方式,有两种,.Inset.Sectioned ,前者会让卡片铺满视图。
  2. topShelfItems : 它的getter控制top shelf 显示的内容,参数如下:
  • ID : 一个独一无二的ID
  • imageURL : 图片在网络上的地址
  • imageShape : 图片形状,有三种,.Poster,.Square,.HDTV,图片按照顺序逐渐变大
  • title : 每张卡片对应的标题,标题只会显示一个
  • displayURL : 用户点击聚焦的卡片时发送给主app的URL
  • playURL : 用户点击播放按钮时发送给主app的URL

此时运行程序,我们应该就能看见效果了,如下图,如果你看不到图片,可能是图片网址已经失效,可以尝试更换一个图片地址试试。


好了,现在我们就可以通过top shelf来向用户展示数据了。但是还是有个问题,top shelf 是可以点击的,但是我们无论用大力金刚手还是粗壮的麒麟臂来点这些图片,却什么都没有发生,这是因为我们没有加入 deep link,下面开始加入deep link。

在主app的info中添加以下项目

好了,现在点击某个卡片元素就能直接打开app了,在app中获取打开的是哪个卡片的办法:在appdelegate中添加下面这个函数

func application(app: UIApplication, openURL url: NSURL, options: [String : AnyObject]) -> Bool {
    //url即为传进来的信息,进行解析并执行相应的操作
    return true
}

上面的函数对url进行解析并执行相应的操作即可,这里就不再往下写了。

如此,一个简单的top shelf就制作好了,第一次发文,求赞!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容