Android TV开发总结(二)构建一个TV Metro界面(仿泰捷视频TV版)

前言:上篇是介绍构建TV app前要知道的一些事儿,开发Android TV和手机本质上没有太大的区别,屏大,焦点处理,按键处理,是有别于有手机和Pad的实质区别。今天来介绍TV中Metro UI风格,并结合实例说明。

Android TV发展离不开Metro UI,先看最新的泰捷TV的会员区效果,属于典型的Metro风格,如下:

这里写图片描述

什么是Metro UI:

Metro的设计意念来源于交通局巴士站站牌机场和地铁的指示牌给了微软设计团队灵感,设计团队说Metro是来源于美国华盛顿州金县都会交通局(King County Metro)的标识设计,其风格大量采用大字体,能吸引受众之注意力。微软认为Metro设计[2] 主题应该是:“光滑、快、现代”。Metro的图标设计也会不同于Android和iOS。

Metro UI软件

Metro是微软为了方便开发者编写Metro风格的程序而提供的一个开发平台,可以调用微软WinRT暴露出来的接口编写Metro风格的程序。 而Metro风格的控件[3] 拓展Win8标准控件方法和属性,实现一些新的功能,如Component One Studio for WinRT XAML,Component One Studio for WinJS。在Windows8中开放的Windows应用程序市场也使用并推荐采用Metro风格界面的应用程序.

Metro 界面,开机后首先映入眼帘的第一个界面,个人感觉主要是为了触屏设备而设计的,但是在TV中使用起来也一样的方便。我们在Desktop中安装的程序以及 在应用商店中下载的程序都会在Metro中展现出来,所以我们要定期或不定期的对其进行分组、排序、整理,以方便我们的操作以及界面的美观。Metro界面同时提供了便捷的选项,使操作更加方便。

案例效果

今天来仿照并实现这个Metro界面,以下是我实现的效果图:

这里写图片描述

这里写图片描述

gif图:(TV上没有好的录屏工具,盒子系统一般低于5.0,有些厂商已经升到5.0,我用的是i71,很老的盒子,基于API 17, 4.2.2的系统)


这里写图片描述

源码分析

看下其中一个MetroItem的布局:


这里写图片描述

每一个MetroItemFrameLayout下包含一些子View,ImageView就是对应图片,CornerVew表示上下左右的的角标,TextView表示下方的描述,这些可视具体情况进行选择。

这里写图片描述
这里写图片描述

​其他相关代码,下篇博客具体分析。案例已开源到Github,对应链接: https://github.com/hejunlin2013/TVSample。喜欢可以star.

License

Copyright (C) 2016 hejunlin

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

第一时间获得博客更新提醒,以及更多android干货,源码分析,欢迎关注我的微信公众号,扫一扫下方二维码或者长按识别二维码,即可关注。


这里写图片描述

如果你觉得好,随手点赞,也是对笔者的肯定,也可以分享此公众号给你更多的人,原创不易

已标记关键词 清除标记
相关推荐
Android_tv_metro是一款安卓TV Metro框架和服务器API。API和数据结构专辑和显示项目:Metro风格是由两个元素构成专辑可以包含多张专辑和显示项目显示项目可以被定义为视频,游戏,应用程序,音乐等您可以从显示项目中删除你自己的游戏/应用/视频详细条目主页也被定义为专辑。API风格API描述http://host/v1/ns/type/?id=res_id NS:命名空间,资源类型类型:项目或项目列表ID:后端服务器系统的资源ID详细信息http://host/game(video/app)/item?id=12346 return item list专辑http://host/game(video/app)/album?id=6464 return album类别http://host/game(video/app)/category?id=123456 return album注意:专辑和类别接近同一概念。选项卡“应用程序/游戏”选项卡“视频”选项卡“视频类别”首页JSON定义首页JSON示例服务器API定义请看:https://github.com/XiaoMi/android_tv_metro/raw/master/server/TVMarketAPI.md首页显示数据{    "data": [        {            "items": [display items],            "images": {},            "name": "TAB 1",            "id": "recommend",            "type": "album",            "ns": "video"        },        {            "items": [display item],            "images": {},            "name": "TAB 2",            "id": "recommend",            "type": "album",            "ns": "video"        }    ] }显示项目:{    "target": {        "type": "item"    },    "images": {        "back": {            "url": "",            "ani": {},            "pos": {}        }    },    "name": "Display Name)",    "times": {        "updated": 1409202939,        "created": 1409202939    },    "_ui": {        "layout": {            "y": 2,            "x": 3,            "w": 1,            "h": 1        },        "type": "metro_cell_banner"    },    "id": "987722",    "type": "item",    "ns": "video" }专辑{ "data": [     {         "items": [display items],         "images": { },         "name":"game tab name",         "times": {             "updated": 0,             "created": 0         },         "_ui": {             "type": "metro"         },         "id": "recommend",         "type": "album",         "ns": "game"     },     {         "items": [display items],         "images": { },         "name": "game tab Name",         "times": {             "updated": 0,             "created": 0         },         "_ui": {             "type": "metro"         },         "id": "categories",         "type": "album",         "ns": "game"     },     {         "items": [dispay items],         "images": { },         "name": "video tab name",         "times": {             "updated": 0,             "created": 0         },         "_ui": {             "type": "metro"         },         "id": "recommend",         "type": "album",         "ns": "video"     },     {         "items": [display items],         "images": { },         "name": "video tab name",         "times": {             "updated": 0,             "created": 0         },         "_ui": {             "type": "metro"         },         "id": "categories",         "type": "album",         "ns": "video"     } ], "preload": {     "images": [] }, "update_time": 0 }显示项目{ "target": {     "type": "item" }, "images": {     "text": {         "url": "",         "ani": {},         "pos": {}     },     "icon": {         "url": "",         "ani": {},         "pos": {}     },     "back": {         "url": "http://xxx/fffff.png",         "ani": {},         "pos": {}     },     "spirit": {         "url": "",         "ani": {},         "pos": {}     } }, "name": "name", "times": {     "updated": 1404466152,     "created": 1404454443 }, "_ui": {     "type": "metro_cell_banner",     "layout": {         "y": 1,         "x": 1,         "w": 1,         "h": 2     } }, "id": "180", "type": "item", "ns": "game" }TV Metro库和APIandroid库:提供一个建立sw540dp metro布局的框架。API:服务器API和数据结构。该框架能够帮助您轻松构建一个TV metro UI风格的应用程序。至于具体的业务数据定义,你需要自己处理。android库:用于专辑的RecommendCardView Card浏览GenericSubjectLoader Loader(选项卡是专辑的一个实例)如何集成Android库?你只需要继承MainActivity并执行选项卡装载。请参阅TVMetroSample应用如何运行自己的服务器?1.定义你的主页数据2.执行您的详细资料/列表API下载测试APK下载测试APK,你可以在Android平板或电视运行点击下载设计文档:https://github.com/XiaoMi/android_tv_metro/raw/master/design/app_api.ppt 标签:Android
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页