关闭

Android屏幕适配经验谈

162人阅读 评论(0) 收藏 举报
分类:

先来解释一些相关的名词:

屏幕尺寸:  也就是我们平时所说的某某手机是几寸屏, 比如HTC one V这款手机是3.7寸的, 这里的寸说的是英寸(inch),国际上习惯使用的单位,1inch = 2.54cm,3.7寸指的是屏幕的对角线的长度。

屏幕分辨率: 指屏幕的宽和高的像素数, 比如HTC one V是480*800的。

屏幕密度:   每inch的像素数,比如HTC one V, 是252 px/inch。 

px:  像素。一块显示屏是由很多的光点组成的,每一个光点就是一个像素。由于这些光点很小很密,想想看,在上面提到的3.7寸的手机上,横向有480个光点,纵向有800个光点,所以显示出来的文字或者图片才很细腻平滑。

ppi: 和屏幕密度一个意思, 全称是pixel per inch.  是专业一点的叫法.

dpi: dot per inch,每英寸的点数。在电子显示范畴内它和PPI是一个意思。 只有在打印时这个缩写才有意义,在打印领域不存在 PPI的叫法,只说DPI,它表示打印机每英寸打印几个像素点。宽高同样像素下,dpi越大,打印出来的图案越小。

dip: 或者叫dp,这是Android开发中特有的一种度量,称作屏幕无关像素, 它不表示任何具体的长度或者像素点, 这个值只有在 具体屏幕密度的手机上,才会被转换为具体的像素值。 这个时候才会有实际意义。 具体怎么转换,接下来会讲解。


下面贴出传说中的HTC one V的截图, 带了相关尺寸的标注: (一个很老旧的手机,但是在480*800分辨率届很有代表性)


对于一个新发布的手机,厂商一般会指明3个基本的参数:屏幕尺寸、分辨率和ppi。 根据这三个值我们就能算出这个显示屏的长和宽各式多少。

比如:     

屏幕宽 = 480/252 ≈ 1.9 inch

屏幕高 = 800/252 ≈ 3.17 inch

注: 

对于显示器来说, 横向和纵向的密度是一样的, 也就是说,在屏幕上任意截取一个正方形,它的横向像素数=纵向像素数。

另外我们关心的一点是,这个手机的屏幕密度,对应的drawble目录是哪一个。 这个我们很容易知道 ,是hdpi目录。(怎么就很容易知道了!? 别急别急, 下面就会说到)

这样, 一个手机和显示相关的参数我们就了然于胸了。


好了,我们进入正题。;-)


Android项目的res目录下一般加上我们自己创建的,会有6个目录,分别是:drawble  drawble-ldpi  drawble-mdpi  drawble-hdpi  drawble-xhdpi  drawble-xxhdpi, 这里就不包括更为特殊的drawble目录了,(比如drawlbe-land-hdpi, 表示水平方向的高分辨率的图片,这些都目录不管多么长,它们都是按一丁点规律匹配的, 我们的目的是, 从个别中发现规律,从而应用到整体)。

当一个apk运行起来时,Android系统会根据其所运行的手机的屏幕密度去相对应的图片文件夹里找指定名称的图片。 注意, 先去哪个目录里找,完全是根据这个手机的屏幕密度决定的。



其中注意两点:

1, 中等分辨率,即mdpi的屏幕密度是160,他是标准的参考密度。所以计算比例的时候它的比例值是1. 其他屏幕密度的参考比例都是以这个为依据。

2, 默认的drawble目录(一般是自己建的),和mdpi是一样的。将图片放到这个目录和放到drawble-mdpi目录是一样的效果。不过一般习惯性的放一些自定义selector或者点9的图片在这里。

现在我们来看, HTC one V手机的屏幕密度是252ppi, 那距离哪一个最靠近呢, 就是hdpi了。 所以当apk运行在这个手机上时,首先会去这个目录找图片。

下面是用常见的一些类型的手机总结的一个表格:


注意一点: 上面说的对应关系,都是首选目录, 那如果首选目录里面找不到图片呢? 


Android图片选择策略

上面说到, 如果屏幕所对应的文件夹没有要找的图片,怎么办。这是很常见的,我们开发项目时一般不会去为每一个级别的屏幕去切一套图片。那样做只会让apk很大。所以一般性的图片我们只切一两个典型密度屏幕的图片。但是apk是有可能会运行在从ldpi到xxhdpi的各种级别的手机上。这个时候就需要根据一定的策略去寻找图片了。

Android系统寻找图片的步骤是这样的:

1, 去屏幕密度对应的目录去找。如果找到就拿来用。

2, 如果没找到,就去比这个密度高一级的目录里面去找,如果找到就拿来用。

3, 如果没找到就继续往上找。以此类推。

4, 如果到了xxhdpi目录还没有找到的话,就会去比自身屏幕密度低一级的目录去找,如果低一级的目录>=hdpi,找到了就拿来用。

5, 如果没找到, 就去mdpi目录去找, 如果找到了,就拿来用。

6, 如果没找到,就去默认的drawble目录里去找, 如果找到了就拿来用。

7 ,如果没找到,再去最低的ldpi目录里去找。如果找到了,就拿来用。

8, 如果没找到, 那就是没找到了, 图片无法显示。(不过一般不会出现这种现象,因为如果每个目录都没有这个图片的话,你是编译不过的)

这里有两点需要注意:

①  首先会去比自己密度高的目录里去找,这是因为因为系统相信,你在密度更高的目录里会放置分辨率更大的图片,这样的话这个图片会被缩小,但同时显示效果不会有损失,但是如果优先去低一级别的目录去找的话, 找到的图片就会被放大,这样的话这个图片就会被拉扯模糊了。

e.g. 同一张图片,你在mdpi和xxhdpi目录各放了一份, 这个应用你现在运行在hdpi的手机上, 那应用会选择哪张图片呢。答案是xxhdpi目录里的。即便hdpi离mdpi更近一点!

②,如果在mdpi里找不到是不会直接去ldpi里找的, 而是先去默认的drawble目录里找,这是drawble目录和drawble-mdpi是一个级别的。

下面用一张流程图来总结:

 

(注: 以上流程图是我通过做实验总结出来的,如有谬误还望指出。)


Android系统对图片的缩放规则


上文中提到如果在手机对应的目录没有找到图片,就会按照一定的策略去其他目录找,那找到了以后就原图显示么? 非也。

对于放在不同目录下的图片, 系统会按照一定比例对原始的图片进行放大或者缩小, 具体的放大缩小比例可参考下表, 图片所在目录和对应的屏幕密度是相同时图片缩放比例为1,也就是原图显示,而横向的比例表示分别放在该密度手机上运行时图片被缩放的比例。

对原始图片的缩放倍数。



上表几点值得注意的地方:

①, drawable目录和drawable-mdpi目录和dp到px的转换关系是一样的。 

②,当你放一个120px*180px的图片到drawable-hdpi目录,如果此应用运行在一个xhdpi的手机上,则这个图片会被拉扯到160px*240px。

③, 最后一行dp->px, 说明了在代码或者布局文件中声明一个dp值, 这个值在不同屏幕密度的手机中会被乘以不同的倍数。 比如你在布局文件中写了一个宽和高分别为120dp和180dp的LinearLayout, 那么当这个应用运行在xhdpi的手机上时(比如上面那个常见手机表中的中兴U985手机),它的实际像素就会被转换为240px*360px。 如果运行在ldpi的手机上,就变成了90px*135px。 但是在这两个手机中显示的区域大小从肉眼看,是一模一样大的。(这点作为后面内容的一个引子,“看起来”一样大,这就是Android的一个神奇的地方)

 

我们来做个试验

试验材料:

① 一张120px*180px的图片


②  四部手机, 具体参数参考上面的一张表格。三星 Galaxy win pro 3218  (hdpi)、 HTC one V (hdpi)、 中兴U985 (xhdpi)、Google Nexus 7 (xhdpi)。 

③  我在布局文件里声明了3个View, 第一个位于左上角,是一个线性布局,宽和高指定为120dp*180dp(注意是dp哦), 第二个位于右上角,是一个ImageView,内容就是上面这张120px*180px的图片, 第三个位于左下角也是一个线性布局,固定宽高,是120px*180px。

我将这个图片放到一个Android工程里的drawable-hdpi目录


从上面的那种缩放关系表中我们可以知道,图片从hdpi目录中取, 运行在hdpi手机上宽高保持原始值,,运行在xhdpi手机上,宽高会乘以4/3, 也就是说图片会被拉扯变大, 但是图片的实际显示效果,即“视觉大小”怎么样呢。

下面是运行后的效果:



如图: 黑色区域是120dp*180dp的View, 蓝色区域是120px*180px的图片, 灰色区域是120px*120px的View。

1, 可以看到使用dp的View(黑色区域)在不同分辨率,不同屏幕尺寸,不同屏幕密度的手机下,视觉大小看起来是一模一样的。 

但是他们的实际像素值是不一样的: 120dp*180dp -> (hdpi) -> 180px*270px, 而120dp*180dp ->(xhdpi)->  240px*360px。 由于屏幕密度的不同,缩放以后的像素可以显示出一样的视觉大小。

2, 蓝色图片的视觉大小也是一样的, 由于图片放到了hdpi目录下, 所以前两个手使用的是图片的原始像素120px*180px, 而后两个手机对图片进行了放大, 参考上面的屏幕密度缩放关系表, 放大了4/3倍。  我通过对屏幕的截图,测量下来的结果的确是放大了这么多, 分别为160px*240px。 由于屏幕密度的不同,它们显示出来的视觉大小是相同的。

3, 但是使用固定像素值的View就没那么幸运了, 它在hdpi的手机上看起来要比在xhdpi的手机上大一些。 要是在屏幕密度相差更大的手机上看的话, 这个区域的大小会相差很大。 这就是为什么Android推荐使用dp作为View的尺寸,而不是真实像素的原因了。

4,  经过反复试验,(实验结果就不贴图了,很多),得出一个结论,使用哪个目录下的图片(前提是图片只放在某一个目录中),在所有,不管是分辨率还是屏幕尺寸还是屏幕密度,3个参数都在改变的情况下,图片显示的视觉大小都和运行在这个目录对应屏幕密度手机上时的大小是一样的。 


UI给工程师切多大图是合适的。


说说我之前走的冤枉路吧。

在之前, 设计师的交互和视觉设计都是基于480*800的界面, 切图的时候会以480*800为基础切一版, 然后在给所切图片的宽和高乘上个4/3,然后在出一版。

比如同一个120*180的图片, 就会出两个版本, 一个是120*180的一个是160*240的。分别放到hdpi目录和xhdpi目录。

吃到的苦头是,UI很累, apk很大。T^T

这番探究下来, 发现直接基于720*1280的视觉稿切一版图片就可以了。 将图片只放到xhdpi目录中,这样系统会在不同密度屏幕的手机中对图片进行合理的缩放, 而之前这个缩放工作竟然是人工完成的!

另: 如果想在xxhdpi的手机上显示的很好, 也可以基于1080P的屏幕设计, 这样的话就兼容所有低密度屏幕的手机, 而且也不会出现图片被拉扯的现象。


OVER

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30825次
    • 积分:507
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:63篇
    • 译文:0篇
    • 评论:4条
    文章分类
    最新评论