Android TV开发总结(五)TV上屏幕适配总结

前言:前面几篇总结一些TV上的小Sample,开源到GitHub: https://github.com/hejunlin2013/TVSample, 点击”阅读原文“,可以持续关注。今天总结下TV上屏幕适配.

一、屏幕适配的一些背景知识

介绍几个在Android屏幕适配上非常重要的名词:

1

什么是屏幕尺寸、屏幕分辨率、屏幕像素密度?

  • 屏幕尺寸是指屏幕对角线的长度。单位是英寸,1英寸=2.54厘米;
  • 屏幕分辨率是指在横纵向上的像素点数,单位是px,1px=1像素点,一般是纵向像素横向像素,如1280×720;
  • 屏幕像素密度是指每英寸上的像素点数,单位是dpi,即“dot per inch”的缩写,像素密度和屏幕尺寸和屏幕分辨率有关。
  • 例如:计算Nexus5的屏幕像素密度: 屏幕尺寸:4.95inch、分辨率:1920×1080,屏幕像素密度:445

和官方给出的一样,说明我们计算正确。

2

什么是dp、dip、dpi、sp、px?之间的关系是什么?

  • dip:Density Independent Pixels(密度无关像素)的缩写。以160dpi为基准,1dp=1px
  • dp:同dip
  • dpi:屏幕像素密度的单位,“dot per inch”的缩写
  • px:像素,物理上的绝对单位
  • sp:Scale-Independent Pixels的缩写,可以根据文字大小首选项自动进行缩放。Google推荐我们使用12sp以上的大小,通常可以使用12sp,14sp,18sp,22sp,最好不要使用奇数和小数。

说明:如果A设备的参数为480×320,160dpi,B设置的参数为800×480,240dpi。我们要画出一条和屏幕宽度一样长的直线,如果使用px作为单位,必须在A设备上设置为320px,在B设备上设置480px。但是如果我们使用dp作为单位,由于以160dpi为基准,1dp=1px,所以A设备上设置为320dp就等于屏幕宽度(320px),在B设备上设置为320dp就等于320×(240/160)=480px,即B设备的屏幕宽度。这样,使用dp作为单位就可以实现简单的屏幕适配。这知识一种巧合,也有B设备的像素密度不是这样刚刚好的,就需要我们运用别的屏幕适配技术。

3

什么是mdpi、hdpi、xdpi、xxdpi、xxxdpi?如何区分?

用于区分不同的像素密度。

在Google官方开发文档中,说明了 mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi=2:3:4:6:8 的尺寸比例进行缩放。例如,一个图标的大小为48×48dp,表示在mdpi上,实际大小为48×48px,在hdpi像素密度上,实际尺寸为mdpi上的1.5倍,即72×72px,以此类推。

二、TV屏幕适配怎么适配?有哪些规则?

先看下一些盒子的分辨率

屏幕密度值未列入其中,第二栏的说明最后的值,就是通过在不同分辨率下,屏幕密度值不同,得到的不同结果,可以看到同样是1280*720的盒子,由于屏幕密度值不同,对得到的dpi不同。

于是就有了这种适配,在此之前,无论是做Android TV开发,还是做phone端开发,永远不要迷信大家说的万能适配,对于图片之类的素材,根本没有所谓的捷径。所以要了解,当apk,运行在android系统中时,系统是如何读取各drawable的先后顺序的。以之前奇葩的小米2代为例,相比正常的盒子英菲克I9,同样1280*720,dpi一个是160,一个是213dpi,当图片放到hdpi下,发现在小米2代,图片永远显示不正常。

三、多屏幕适配,android读取res/drawable优先级是什么?

以下是我的总结(按读取优先级顺序排列):

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

说明:

  • 对于第一项:可以看到先从语言类开始读取,如果做国际化的,可以关注此项,第1项暂时不看。
  • 对于第二项:就是values-sw540dp,诸如此类,sw代表最短可用宽度,注意,是和屏幕方向无关,如一个分辨率为1280*720,sw就是720,假设它的density(屏幕密度)为2,通过公式720/2=360, 这个360就是densityDpi(屏幕密度DPI),所以,在适配时,用values-sw360dp,适配就行了。那问题来了,drawable要不要这样呢?对于文章开头那个表格,360dp是属于xxhdpi,所以把图放到对应有xxhdpi就能完成适配。
  • 对于第三项:诸如values-w540dp/values-h,这种是有和屏幕方向有关,第一个后缀w<N>dp 如layout-w600dp, values-w600dp带这样后缀的资源文件的资源文件制定了屏幕宽度的大于Ndp的情况下使用该资源文件,但它和sw<N>dp不同的是,当屏幕横向纵向切换时,屏幕的宽度是变化的,以变化后的宽度来与N相比,看是否使用此资源文件下的资源。第二个后缀h<N>dp 如layout-h600dp, values-h600dp这个后缀的使用方式和w<N>dp一样,随着屏幕横纵向的变化,屏幕高度也会变化,根据变化后的高度值来判断是否使用h<N>dp ,但这种方式很少使用,因为屏幕在纵向上通常能够滚动导致长度变化,不像宽度那样基本固定,因为这个方法灵活性不是很好,google官方文档建议尽量少使用这种方式。
  • 第四项,是指写死对应的分辨率,android碎片化严重的情况下,显然不可取
  • 第五项,这个就是为解决同一分辨率下,不同的density引起的适配问题。如上面的小米2代解决方案,最后就是加上这个资源目录,换了一个图(图片比原来小),问题解决。
  • 第六项,就是平时经常用到的,通常是这种方法不能解决适配的需要时,才配合前面的几种一起使用解决适配问题。

四、屏幕分辨率及density 、densityDpi代码

mText = (TextView) findViewById(R.id.text);

DisplayMetrics metric = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(metric);

int width = metric.widthPixels; // 屏幕宽度(像素)

int height = metric.heightPixels; // 屏幕高度(像素)

float density = metric.density; // 屏幕密度(0.75 / 1.0 / 1.5)

int densityDpi = metric.densityDpi; // 屏幕密度DPI(120 / 160 / 240)

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 Enviriment", info);

mText.setText(info);

原文发布于微信公众号 - 何俊林(DriodDeveloper)

原文发表时间:2016-10-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

创意饼图的制作技巧——图标填充饼图!

今天给大家介绍一种创意饼图的制作技巧——图标填充饼图! 创意饼图 ▽ 觉得默认的饼图不够炫酷、不够养眼,木有逼格 没关系,今天就交给大家一种创意饼图的制作技...

38310
来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

77113
来自专栏程序员的知识天地

利用HTML5,无JS实现各种交互效果

<details> 标签在Chrome,Firefox等浏览器下默认是有展开收起行为的,例如下面HTML:

8292
来自专栏IMWeb前端团队

animation动画实践

由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

2350
来自专栏斜述视角

0基础学习网页制作-Html

文章来自:4月14日早,在贵州大学北校区10栋715寝室,对物理学院同学培训的内容。

1172
来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

2225
来自专栏前端知识分享

第131天:移动web页面的排版与布局

html{  font-size:1mm;  }  .titleheight{  height:10rem; //这里等于10mm  width:11rem; ...

2791
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

2384
来自专栏前端儿

细说移动端 经典的REM布局 与 新秀VW布局

说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等...

2782
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

2696

扫码关注云+社区

领取腾讯云代金券