Android TV 开发之屏幕适配

前言

Android 的屏幕适配是指适配不同机顶盒 UI 框架层输出的分辨率和 dpi,而不是适配不同分辨率的电视机(电视机的适配交由机顶盒本身完成,和各个应用无关)。

获取机顶盒 UI 框架层输出的分辨率和 dpi

可以通过以下代码获取机顶盒UI框架层实际输出的分辨率(对应代码中的 width * height),以及输出的 PPI(DPI)(对应代码中的 densityDpi)。

DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
// 屏幕宽度(像素)
int width = metric.widthPixels;  
// 屏幕高度(像素)
int height = metric.heightPixels; 
// 屏幕密度(1.0 / 1.5 / 2.0)
float density = metric.density;
// 屏幕密度DPI(160 / 240 / 320)
int densityDpi = metric.densityDpi;  
String info = "机顶盒型号: " + android.os.Build.MODEL + ",\nSDK版本:"   
            + android.os.Build.VERSION.SDK + ",\n系统版本:"   
            + android.os.Build.VERSION.RELEASE  + "\n屏幕宽度(像素): "                       +width + "\n屏幕高度(像素): " + height + "\n屏幕密度:  "                              +density+"\n屏幕密度DPI: "+densityDpi;
Log.d("System INFO", info);  

例子

以一个小例子说明:

  • 切图应该放哪个 drawable 文件夹下?
  • UI 应该以什么标准出图?
  • UI 出的标注图 px 和 dp之间如何转换?

比如:某款易思腾的机顶盒,通过如上代码,获取到的分辨率为 1280 * 720 DPI 为 160dpi ,但是机顶盒连接的是 4K 电视,电视的分辨率为 3840 * 2160),此时 :

  • 切图应该放在 drawable-mdpi 文件夹下。因为,android 系统会根据 densityDpi 去不同的 drawable-XXXX 文件夹下获取图片,根据下图,160dpi 对应 drawable-mdpi
  • 不考虑适配其他机顶盒的情况下,UI 应该按照 1280 * 720 出图,而不是电视的 3840 * 2160 出图。因为,app 在机顶盒上实际输出的像素就只有 1280 * 720 像素,而在 4K 电视上 4K 显示效果是机顶盒将系统 UI 框架的 1280 * 720 像素的输出优化放大道 3840 * 2160 像素,以及 4K 电视的优化显示的结果。编写代码时对应的 app 全屏的页面只有 1280 * 720 像素,并没有 3840 * 2160 像素。
  • 160dpi 下,1px 对应 1dp

依据 支持多种屏幕 - Google 官方文档(需翻墙),**dpi 对应的实际 dpi 如下图所示。

六种通用的密度

一些盒子分辨率列表

下图是一些盒子分辨率列表(来自Android TV 开发总结(五) TV 上屏幕适配总结)

一些盒子分辨率列表

对上图中的机顶盒按照宽度( dp )整理如下:

宽度(dp) 机顶盒型号(dpi)
1920dp youku(160dpi)
1280dp i71s(240dpi)、海信电视(240dpi)、i71(160dpi)、Letv New C1S(160dpi)、XMATE_A88(迪优美特)(160dpi)、开博尔C9(KBE_H8)(160dpi)、英菲克i9(160dpi)
961.5dp 小米二代(213dpi)
960dp MiBox3(320dpi)、MiBox3_Pro(320dpi)、华为M321(320dpi)

可以看出宽度大部分的是 1280dp960dp 两个尺寸,还有youku (1920dp)和小米二代(961.5dp)的两个奇葩尺寸。1280dp960dp 的差距还是蛮大的。所以,针对不同宽度,得分别标注不同的值。通过 value-w****dp 适配不同的机顶盒,对照表如下:

value 机顶盒
value-w1920dp youku(160dpi)
value-w1280dp i71s(240dpi)、海信电视(240dpi)、i71(160dpi)、Letv New C1S(160dpi)、XMATE_A88(迪优美特)(160dpi)、开博尔C9(KBE_H8)(160dpi)、英菲克i9(160dpi)
value-w961dp 小米二代(213dpi)
value-w960dp MiBox3(320dpi)、MiBox3_Pro(320dpi)、华为M321(320dpi)

切图的适配比较麻烦一点,在相同 160dpi 屏幕密度下,有 1920dp1280dp 两种宽度。如果 1920dp 宽度的 UI 是按 1280dp UI 等比例放大出来的话,在 1280dp100dpx100dp 宽高的图片,在 1920dp 下宽高就变成了 150dpx150dp。所以,对占大都数的 1280dp 160dpi 分辨率的机顶盒,对应的切图放在 drawable-mdpi 下,对 youku 这种奇葩分辨率的机顶盒,专门用 drawable-mdpi-1920x1032 放置切图。所有机顶盒切图放置对应表格如下:

drawable 机顶盒
drawable-mdpi i71(160dpi)、Letv New C1S(160dpi)、XMATE_A88(迪优美特)(160dpi)、开博尔C9(KBE_H8)(160dpi)、英菲克i9(160dpi)
drawable-mdpi-1920x1032 youku(160dpi)
drawable-213dpi 小米二代(213dpi)
drawable-hdpi i71s(240dpi)、海信电视(240dpi)
drawable-xhdpi MiBox3(320dpi)、MiBox3_Pro(320dpi)、华为M321(320dpi)

机顶盒从 drawable 获取切图的顺序如下(来自Android TV 开发总结(五) TV 上屏幕适配总结):

  1. 语言( zh-rCN )
  2. smallestWidth 最短可用宽度(与屏幕方向无关)
  3. available width(w-<N>dp)(与屏幕方向有关)
  4. values/drawable-1920x1080
  5. drawable-213dpi
  6. ldpi/mdpi/hdpi/xhdpi/xxhdpi

机顶盒切图放置位置和手机不同

UI 按照给手机出切图的方式导出的 xxhpi、xhdpi、hdpi、mdpi等切图,不能直接放置在对应 dpi 的 drawable 目录下。
比如,UI 以 1080 * 1920 为基准,导出的一比一的切图,在手机上,对应的是 xxhdpi,因放置到手机的 drawable-xxhdpi 文件夹中。而在机顶盒上(假设机顶盒分辨率为 1280 * 720 160dpi1920 * 1080 240dpi),对应的应该是 hdpi,因放置到 drawable-hdpi 文件夹中,机顶盒需要其他切图,应该以 hdpi 为基准进行放大或缩小出图。

总结

为了适配大部分机顶盒,UI 应该按照 1920 * 1080 出图,1920 * 1080 效果图导出的1比1的切图,对应的是 hdpi (而非手机开发时候的 xxhdpi)。给 drawable-xhdpidrawable-hdpidrawable-mdpi 的切图。编码时,在 value-w1280pvalue-w960p 下分别设不同的值(value-w960p 下的值可按 value-w1280p 中的值等比例缩放获得)。

其他

Android TV 开发遇到的图片失真问题以及对应的解决办法

美术在出图的时候,适当的给图片周围增加几个个像素的透明区域,然后给这个区域做一个渐变的效果(根据具体图片具体内容来决定,逐渐向图片边缘淡化直至透明),最终显示的结果就是图片周围会有一圈模糊的图像,但是能够消除较大部分的锯齿。

相关文章

Android TV开发总结(五) TV 上屏幕适配总结
智能电视 TV 分辨率处理方案--第 1 问
智能电视 TV 盒子开发选择--第 2 问
Android 电视机(机顶盒)初次开发的一些经验分享

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

推荐阅读更多精彩内容