Android屏幕适配专题
你是否被屏幕的各种参数(dpi.ppi等)搞的头晕眼花?
屏幕的密度到底是怎么回事?
应该如何来进行屏幕适配?
如何根据 UI 给的图来进行屏幕适配呢?
下面我们来一步一步的了解。
基本概念
下面的概念可以参照此图来进行理解。
1. 分辨率
分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。
在进行屏幕适配时,不要直接通过分辨率适配,应该通过屏幕尺寸和屏幕密度来适配
2. 屏幕大小
屏幕尺寸是指屏幕的物理尺寸,是通过测量屏幕的对角线测量出来的。
以英寸(inch)为单位。比如某某手机为“5寸大屏手机”,就是指对角线的尺寸,5寸×2.54厘米/寸=12.7厘米。
3. 屏幕密度
屏幕物理区域中的像素量,通常称为dpi/ppi(每英寸的像素点数,ios为ppi,anroid为dpi)。密度越高,成像的效果越好,越细腻。如,一加7Pro,2k屏幕。
在尺寸相同但像素密度不同的两个设备上放大图像
假如我们知道一部手机的分辨率是1080×1920,屏幕大小是5英寸,你能否算出此屏幕的密度呢?哈哈,中学的勾股定理派上用场啦!通过宽1080和高1920,根据勾股定理,我们得出对角线的像素数大约是2203,那么用2203除以5就是此屏幕的密度了,计算结果是440。440dpi的屏幕已经相当细腻了。
常用单位
1. px (像素)
px 即 pixel,像素点,电子屏幕上组成图像的最基本单位,在描述屏幕分辨率时也会使用该单位。1px 表示一个像素,例如 iPhone 8 的尺寸为 750px × 1334px,表示在该手机屏幕上,水平方向每行有 750 个像素点,垂直方向每列有 1334 个像素点。
2. pt (磅)
pt 即 point,有两个含义:一是印刷行业常用单位,是一个标准长度单位,绝对大小,1pt = 1/72 英寸 = 0.35mm;二是 iOS 开发用的基本单位,当设计师以 1 倍尺寸进行设计 (375pt × 667pt) 并给出标注稿时,开发人员无需除以 2 便可直接使用。
3. dp (也称 dip)
dp 是安卓开发用的基准单位,在 dpi (屏幕像素密度,即每英寸包含的像素点) 为 160 的屏幕为上,1dp = 1px。为了简单起见,Android 把屏幕密度分为了 5 种:mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,下文会详细介绍其换算关系。
4. sp (可缩放独立像素)
在安卓系统里,sp 与 dp 类似,不同的是 sp 可以根据用户的字体大小首选项进行缩放,而 dp 则不会。 尽量使用 dp 作为空间大小单位,sp 作为文字相关大小单位,例如:新闻类和短信类等大篇幅文本,推荐使用 sp 为单位。
Android屏幕
1. 实际密度与系统密度
“实际密度”就是我们自己算出来的密度,这个密度代表了屏幕真实的细腻程度,如上述例子中的440dpi就是实际密度,说明这块屏幕每寸有440个像素。5英寸1080×1920的屏幕密度是440,而相同分辨率的4.5英寸屏幕密度是490。如此看来,屏幕密度将会出现很多数值,呈现严重的碎片化。而密度又是安卓屏幕将界面进行缩放显示的依据,那么安卓是如何适配这么多屏幕的呢?
其实,每部安卓手机屏幕都有一个初始的固定密度,这些数值是120、160、240、320、480,我们权且称为“系统密度”。大家发现规律没有?相隔数值之间是2倍的关系。一般情况下,240×320的屏幕是低密度120dpi,即ldpi;320×480的屏幕是中密度160dpi,即mdpi;480×800的屏幕是高密度240dpi,即hdpi;720×1280的屏幕是超高密度320dpi,即xhdpi;1080×1920的屏幕是超超高密度480dpi,即xxhdpi。
安卓对界面元素进行缩放的比例依据正是系统密度,而不是实际密度。
2. 一个重要的单位dp
dp也可写为dip,即density-independent pixel。你可以想象dp更类似一个物理尺寸,比如一张宽和高均为100dp的图片在320×480和480×800的手机上“看起来”一样大。而实际上,它们的像素值并不一样。dp正是这样一个尺寸,不管这个屏幕的密度是多少,屏幕上相同dp大小的元素看起来始终差不多大。
另外,文字尺寸使用sp,即scale-independentpixel的缩写,这样,当你在系统设置里调节字号大小时,应用中的文字也会随之变大变小。
3. dp与px的转换
屏幕密度 | mdpi | hdpi | xhdpi | xxhpdi | xxxhdpi |
---|---|---|---|---|---|
代表设计像素 | 320 × 480 px | 480 × 800 px | 720 × 1280 px | 1080 × 1920 px | 1440 × 2256 px |
dpi | 160 | 240 | 320 | 480 | 640 |
基准dpi | 160 | 160 | 160 | 160 | 160 |
倍率 | @1x | @1.5x | @2x | @3x | @4x |
在安卓中,系统密度为160dpi的中密度手机屏幕为基准屏幕,即320×480的手机屏幕。在这个屏幕中,1dp=1px。
100dp在320×480(mdpi,160dpi)中是100px。那么100dp在480×800(hdpi,240dpi)的手机上是多少px呢?我们知道100dp在两个手机上看起来差不多大,根据160与240的比例关系,我们可以知道,在480×800中,100dp实际覆盖了150px。因此,如果你为mdpi手机提供了一张100px的图片,这张图片在hdpi手机上就会拉伸至150px,但是他们都是100dp。
中密度和高密度的缩放比例似乎可以不通过160dpi和240dpi计算,而通过320px和480px也可以算出。但是按照宽度计算缩放比例不适用于超高密度xhdpi和超超高密度xxhdpi了。即720×1280中1dp是多少px呢?如果用720/320,你会得出1dp=2.25px,实际这样算出来是不对的。dp与px的换算要以系统密度为准,720×1280的系统密度为320,320×480的系统密度为160,320/160=2,那么在720×1280中,1dp=2px。同理,在1080×1920中,1dp=3px。
大家可以记住下面这个比例,dp与px的换算就十分easy啦!
ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12,我们发现,相隔数字之间还是2倍的关系。计算的时候,以mdpi为基准。比如在720×1280(xhdpi)中,1dp等于多少px呢?mdpi是4,xhdpi是8,2倍的关系,即1dp=2px。反着计算更重要,比如你用PhotoShop在720×1280的画布中制作了界面效果图,两个元素的间距是20px,那要标注多少dp呢?2倍的关系,那就是10dp!
当安卓系统字号设为“普通”时,sp与px的尺寸换算和dp与px是一样的。比如某个文字大小在720×1280的PS画布中是24px,那么告诉工程师,这个文字大小是12sp。
4. 建议在 xxhdpi 中放入ui图
安卓手机有这么多屏幕,我到底依据哪种屏幕作图呢?没有必要为不同密度的手机都提供一套素材,大部分情况下,一套就够了。
现在手机比较高的分辨率是1080×1920,你可以选择这个尺寸作图,但是图片素材将会增大应用安装包的大小。并且尺寸越大的图片占用的内存也就越高。如果你不是设计ROM,而是做一款应用,我建议大家用PS在720×1280的画布中作图。这个尺寸兼顾了美观性、经济性和计算的简单。美观性是指,以这个尺寸做出来的应用,在720×1280中显示完美,在1080×1920中看起来也比较清晰;经济性是指,这个分辨率下导出的图片尺寸适中,内存消耗不会过高,并且图片文件大小适中,安装包也不会过大;计算的简单,就是1dp=2px啊,多好计算啊!
做出来的图片,记着让界面工程师放进drawable-xxhdpi的资源文件夹中。
5. 屏幕的宽高差异
在720×1280中作图,要考虑向下兼容不同的屏幕。通过计算我们可以知道,320×480和480×800的屏幕宽度都是320dp,而720×1280和1080×1920的屏幕宽度都是360dp。它们之间有40dp的差距,这40dp在设计中影响还是很大的。如下图蝴蝶图片距离屏幕的左右边距在320dp宽的屏幕和360dp宽的屏幕中就不一样。
不仅宽度上有差异,高度上的差异更加明显。对于天气等工具类应用,由于界面一般是独占式的,更要考虑屏幕之间的比例差异。
如果想消除这些比例差异,可以通过添加布局文件来实现。一般情况下,布局文件放在layout文件夹中,如果要单独对360dp的屏幕进行调整,你可以单做做一个布局文件放在layout-w360dp中;不过,最好是默认针对360dp的屏幕布局(较为主流),然后对320dp的屏幕单独布局,将布局文件放到layout-w320dp中;如果你想对某个特殊的分辨率进行调整,那么你可以将布局文件放在标有分辨率的文件夹中,如layout-854×480。
5. 几个资源的文件夹
在720×1280中做了图片,要让开发人员放到drawable-xhdpi的资源文件夹中,这样才可以显示正确。个人认为仅提供一套素材就可以了,可以测试一下应用在低端手机上运行是否流畅,如果比较卡顿,可以根据需要提供部分mdpi的图片素材,因为xhdpi中的图片运行在mdpi的手机上会比较占内存。
以应用图标为例,xhdpi中的图标大小是96px,如果要单独给mdpi提供图标,那么这个图标大小是48px,放到drawable-mdpi的资源文件夹中。各个资源文件夹中的图片尺寸同样符合ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的规律。
如果你把一个高2px的分割线素材做成了9.png图片,你想让细线在不同密度中都是2px,而不被安卓根据密度进行缩放,怎么办?你可以把这个分割线素材放到drawable-nodpi中,这个资源文件夹中的图片,将按照实际像素大小进行显示,而不会被安卓根据密度进行缩放。即在mdpi中细线是2px(2dp),在xhdpi中细线是2px(1dp)。
6. 切图要求
在设计图标时,对于 5 种主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 应按照 2:3:4:6:8 的比例进行缩放
密度限定符 | 说明 |
---|---|
ldpi | 适用于低密度 (ldpi) 屏幕 (~ 120dpi) 的资源。 |
mdpi | 适用于中密度 (mdpi) 屏幕 (~ 160dpi) 的资源(这是基准密度)。 |
hdpi | 适用于高密度 (hdpi) 屏幕 (~ 240dpi) 的资源。 |
xhdpi | 适用于加高 (xhdpi) 密度屏幕 (~ 320dpi) 的资源。 |
xxhdpi | 适用于超超高密度 (xxhdpi) 屏幕 (~ 480dpi) 的资源。 |
xxxhdpi | 适用于超超超高密度 (xxxhdpi) 屏幕 (~ 640dpi) 的资源。 |
nodpi | 适用于所有密度的资源。这些是与密度无关的资源。无论当前屏幕的密度是多少,系统都不会缩放以此限定符标记的资源。 |
iOS屏幕
1. 屏幕信息
在 iOS 开发中,不同机型的 iPhone 设备需要用到不同倍率的切图,下表格为各 iPhone 机型显示屏参数对比:
机型 | X | 8+/7+/6+ | 8/7/6/6s | 5/5s | 4/4s |
---|---|---|---|---|---|
屏幕尺寸(inch) | 5.8 | 5.5 | 4.7 | 4 | 3.5 |
物理尺寸(px) | 1125 × 2436 | 1080 × 1920 | 750 × 1334 | 640 × 1136 | 640 × 960 |
设计尺寸(px) | 1125 × 2436 | 1242 × 2208 | 750 × 1334 | 640 × 1136 | 640 × 960 |
开发尺寸(pt) | 375 × 812 | 414 × 736 | 375 × 667 | 320 × 568 | 320 × 480 |
ppi | 458 | 401 | 326 | 326 | 326 |
dpi | 163 | 154 | 163 | 163 | 163 |
倍率 | @3x | @3x | @2x | @2x | @2x |
2. iOS 切图要求
如果你喜欢我的文章,可以关注我的掘金、公众号、博客、简书或者Github!
简书: https://www.jianshu.com/u/a2591ab8eed2
GitHub: https://github.com/bugyun
Blog: https://ruoyun.vip
掘金: https://juejin.im/user/56cbef3b816dfa0059e330a8/posts
CSDN: https://blog.csdn.net/zxloveooo
欢迎关注微信公众号