Android 屏幕适配教程、适配机制介绍

概述

android屏幕适配有很多方面,例如,drawable,values等,开发者根据产品的实际情况和自己的经验,可以选择性的从其中几个方面入手。
本文主要介绍一种基于分辨率等比例缩放的适配方案。

几个必须知道的概念

屏幕尺寸

屏幕尺寸是指手机屏幕对角线的英寸数。

屏幕分辨率

屏幕分辨率是指屏幕宽高像素数。

屏幕密度

屏幕密度是指手机屏幕对角线上单位英寸内的像素数。

代码中用的尺寸单位(dp,dip,sp,px)

这些单位跟我们写代码才是最相关的。

  • dp即dip,规定,密度为160的屏幕上,1像素对应的尺寸为1dp。320密度的屏幕上,1像素对应0.5dp,以此类推。在密度为160的屏幕上,1英寸有160个像素,那么1px对应的尺寸 = 1/160英寸。所以说dp是个物理尺寸,跟像素无关。所以,100dp的尺寸在不同手机上显示出来,物理尺寸看上去基本是一样的。
  • SP 即 Scale-independent Pixel,即与缩放无关的抽象像素。sp和dp很类似但唯一的区别是,Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等),当文字尺寸是“正常”时,1sp=1dp=0.00625英寸,而当文字尺寸是“大”或“超大”时,1sp>1dp=0.00625英寸
  • px,即像素,无需多说

Android适配机制

  1. drawable,在工程里可以在res目录下创建一系列的带后缀的drawable文件夹,例如drawable-hdpi,drawable-xhdpi等等。
  • drawable的适配机制是,系统会先到后缀与设备匹配的drawable目录下找对应的图片,当找不到的时候会去‘更高’一级的目录去找,再找不到,继续往高一级的找,再找不到就退而求其次去低一级的找,依次类推。
    例如,在密度为xxhdpi的手机上运行app,会去drawable-xxhdpi目录下找图片资源,找不到就去drawable-xxxhdpi找,如果没有比drawable-xxxhdpi更高的,则再找不到就去drawable-xhdpi找,再找不到就去drawable-hdpi找,直到找到对应的图片资源,当找到后,系统会按密度对图片做缩放处理,然后再显示到屏幕上,所以如果图片放的目录不对的话,有可能造成图片模糊。
  • layout目录,layout目录也是可以加后缀的,通常是带分辨率后缀(当然也可以加其他后缀,详见android官网,这里只讨论常用的后缀),例如, layout-land-1024x720,layout-1280x720,layout-1920x1080等等。
  • layout目录的适配机制是,从“高往低”找最接近的尺寸目录,例如手机是1920x1080分辨率的,但是如果无此layout目录那么便会低一级的layout-1280x720找布局(而不会去高一级的layout-2560x1440找),依次类推,直至找到layout不带后缀的目录为止,如果还没有,就会报错。
  • 所以考虑以下场景:
    • 原本我们的布局文件目录只有layout一个,没有其他带后缀的layout目录
    • 实际测试中发现的布局在960x540手机上有问题。
      那么有些人可能会想到加个layout-960x540目录,然后在此目录下做特殊处理。那么问题来了,加了这个目录之后,layout目录就有两个,layout无后缀和layout-960x540。当在1920x1080手机上运行程序时,按照适配机制,系统会使用layout-960x540目录下的布局文件,而我们当初的初衷是只希望layout-960x540目录下的布局文件在960x540的手机上使用,所以这种情况下布局肯定会有问题。
      ** 因此,千万注意上面这种场景,不要随意添加‘layout-分辨率’的这种目录,除非把各种主流分辨率都添加一遍。碰到这种问题,最好从dimens文件入手做适配,后面会讲到。**
  • values目录之dimens文件,为了适配不同尺寸的手机,我们可以创建多个values目录,然后在其中定义dimens尺寸,例如values-1280x720,values-1196x720等等。
    • dimens适配的机制是,先找跟设备对应的values目录下的dimens文件中的尺寸定义,找不到则往低一级的找,比如,在1280x720分辨率的手机上,如果app中没有创建values-1280x720目录,而只有values-1920x1080、values-1196x720目录和默认的values目录,那么系统会去优先去values-1196x720的目录下找对应的尺寸。如果找不到,则去默认的values找,再找不到就报错(不会去1920x1080目录找)。
      总结:
      1.drawable适配过程:找与设备密度对应的目录下的图片-》往更高质量的找-》退而求其次找低质量的
      2.layout适配过程:找与设备对应的目录,找不到则从比设备分辨率低一级的目录开始依次往下找。
      3.values适配过程:同layout。

基于分辨率等比例缩放的适配方案示例

先看两张图:

800x480分辨率.png
1920X1200分辨率.png

上面两张图中的登录按钮的尺寸是100dp,分别在800x480的设备上和1920x1200的设备上运行效果。可以看出来,第一张图按钮的尺寸跟整体布局还比较协调,但是第二张图中的按钮宽度显得特别的小,与整体布局很不协调。(注意,两个图中的按钮,在实际设备上的物理尺寸是差不多的,但是为了看起来方面,我将两张图都等比例压缩了,但是,这样不影响我们看按钮与整体尺寸比例关系)。

在实际界面开发当中,一般流程是这样的:
1.UI设计师基于854x480手机设计了一套图,并给出了标注。
2.开发人员将标注转换为dp写到布局文件中。
3.在854x480分辨率的手机上测试界面效果,不出意外应该是跟设计图基本一致的。
但是,如果将程序运行到1920x1080分辨率,但是密度为240(hdpi)的设备上,那就会出现类似上面第二张图中的效果(当然实际开发中会把上图中的按钮的宽度设置为match_parent,这里只是为了说明问题)。
界面布局简单了还好,我们可以通过调整,使用相对布局以及match_parent等手段将界面调整的比较好看。但是如果界面元素比较多了,有时候我们必须给某个控件设置一个固定尺寸,所以肯定避免不了这种问题的出现。

所以UI设计师可能会提出如下几个要求:
1.设计师基于720P(1280x720)设计一套图,并标注
2.研发开发出来的实际效果在720P手机上必须跟标注一致(要求高的公司甚至精确到像素)
3.如果在480P、1080p手机上,则实际尺寸按标注等比例缩放。比如在720p上的标注是100px,那么显示到1080p手机上必须是100*1080/720 = 150px。
4.对于非标准分辨率来说,比如1184x720(手机底部带虚拟按键的那种),则需要在高度上做调整,给控件的纵向间隙做些调整。

所以针对如上要求,结合android屏幕适配的机制,可以采用如下方案来适配:

  1. 创建不同分辨率的values文件夹,在其中分别创建dimens.xml:
不同目录的dimens文件.png
  1. 由于我们的标注是基于1280x720分辨率标注的,所以在values-1280x720目录下的dimens.xml里定义诸如下面这些尺寸:
values-1280x720.png

可以看到,我对名字的命名有一些规则,即,宽度值用‘w_像素数值’的格式命名,高度值用‘h_像素数值’的格式命名。

  1. 根据标注编写布局文件,假设标注中‘发送验证码’按钮的宽度为180px


    代码片段.png

    在720分辨率手机上对应的效果:


    720p.png

    4.根据values-1280x720目录下的dimens文件内容,转换为其他分辨率下的尺寸,然后放到对应分辨率的values目录下。当然这种转换手动转会累死。我写了一个转换工具(一个java类),转换起来很方便。

好了。来看下效果,重点关注‘发送验证码’按钮,为了方便看这个按钮占据整个布局的比例,我把几张图都缩放为差不多大小:
1.1280x720分辨率:

720p.png

2.1920x1080分辨率:

1080new.png

3.2560x1440:

2k_new.png

上面的方式就是按分辨率等比例缩放的适配方式,我们称其为第一种适配方式,另外还有第二种适配方式,就是我们常用的把宽高用dp来定义的方式。
如果把‘发送验证码’按钮的宽度使用dp来定义,按照180px的标注,那转换为dp按钮宽度应设置为90dp,那么效果如下:
1.720分辨率,密度320dpi,跟上面用px的效果一样。
2.2560x1440分辨率,密度560dpi(由于用了dp,所以密度要关注下):

2k_usedp.png

可以看出按钮的宽度占整个屏幕宽度的比变小了。分析下原因,按第一种方式,即宽度按像素设定的方式,app运行时,@dimen/w_180px在2560x1440分辨率的手机上会去找values-2560x1440目录下的dimens文件,而此文件中的尺寸定义已经事先被我们按等比例缩放好了,即缩放后的像素= 180 * 1440/720 = 360px
若按第二种方式,即宽度按dp设定的方式,app运行时,90dp在560dpi密度的手机上,实际显示的像素=90*560/160 = 315px。
那么按钮宽度占屏幕宽度的比例315:1440小于360:1440所以,所以看起来占用比例小了。

总结下,如果要适配各种分辨率的手机,并且想让控件在屏幕中所占用的比例不变,那么就需要用第一种方式来适配。这种方式下,无论屏幕的密度是多少,控件显示出来后在屏幕中占用的比例都不会变。
也就是说,如果按这种方式做的话,由于主流分辨率的宽高比基本一致,因此在任何主流分辨率手机上运行后截图,然后再缩放为720宽度,那么界面中的元素位置及大小一定是跟标注中一致的。

以上是对屏幕适配的一些理解,及实际测试过后的一些结论,希望对大家有帮助。
另外,尺寸转换的工具见附件,用java swing组件做了个界面(比较low,凑合用吧):
尺寸转换工具

使用说明:


Paste_Image.png
尺寸转换工具使用.gif

下集预告:使用Android Studio 中的代码模板功能,提升编码效率。

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

推荐阅读更多精彩内容