美文网首页程序员
tvOS中动态TopShelf的使用方法

tvOS中动态TopShelf的使用方法

作者: 芮星晨 | 来源:发表于2016-01-18 18:06 被阅读353次

    全新的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就制作好了,第一次发文,求赞!

    相关文章

      网友评论

        本文标题:tvOS中动态TopShelf的使用方法

        本文链接:https://www.haomeiwen.com/subject/lbykkttx.html