屏幕适配 — 更深刻的理解Android屏幕碎片化

如需转载请评论或简信,并注明出处,未经允许不得转载

项目背景

公司有一个基于Android的平板产品,在医院中使用。也就是说软件和硬件(平板)都是我们提供给医院的,但是我们是个软件公司,所以平板是我们从设备制造商采购来的。一开始的计划是我们只需要采购同一个型号的设备(设备A),所以这个项目几乎不用考虑屏幕适配的问题。但是最近可能公司和设备商没有完全谈拢,我们又换了一批新的设备(设备B)。设备B从屏幕大小上来看,是和设备A是一模一样的,但是却出现了和设备A差距较大的显示效果

问题分析

先通过日志打印一下两个设备的屏幕相关信息

DisplayMetrics dm = getResources().getDisplayMetrics();
AiLog.d(TAG, "widthPixels: "+dm.widthPixels);
AiLog.d(TAG, "heightPixels: "+dm.heightPixels);
AiLog.d(TAG, "densityDpi: "+dm.densityDpi);
AiLog.d(TAG, "density: "+dm.density);

设备A输出结果:

widthPixels: 1280

heightPixels: 737

densityDpi: 210

density: 1.3125

设备B输出结果:

widthPixels: 1280

heightPixels: 800

densityDpi: 160

density: 1.0

这里主要三个不同,分别是heightPixelsdensityDpidensity,我们一个个来分析

问题一:heightPixels不同

一开始我是有点困惑的,这个737是什么鬼,两个屏幕明明是一样大的,为什么一个高800,一个高737?

其实,heightPixels代表的是屏幕有效的高度,就是
heightPixels = 玻璃屏幕垂直方向上的像素点个数-导航栏高度所占像素点个数
https://www.cnblogs.com/ldq2016/p/6671819.html

所以,其实就是一个设备带导航栏,而另一个不带,虽然我在应用中隐藏了导航栏,但是这个高度不管你有没有隐藏导航栏,这个值都不会改变。

综合上述,这两台设备的分辨率,其实都是1280像素x800像素。所以heightPixels不同,实际上对我们屏幕适配并没有什么影响

问题二:densityDpi不同

densityDpi就是我们常说的DPI,查阅了计算公式是下面这样的
densityDpi = 屏幕对角线的像素值(像素)/对角线的尺寸(英寸)
但是,densityDpi和屏幕分辨率其实是可以通过adb命令改变的

adb shell wm size # 查询
adb shell wm size 1080x1920 # 修改分辨率为1080x1920,可自定义成其他值,单位px
adb shell wm density # 查询屏幕密度
adb shell wm density 480 # 修改屏幕密度为480
adb shell wm overscan 10,10,10,10 # 修改屏幕内边距
# 重置的话,只需在后面加上reset,比如wm size reset!

那这个公式是不是感觉有点奇怪呢,两个都是变量,那对角线的尺寸岂不是也变了?但是显然一个设备生产出来以后,屏幕对角线尺寸肯定是固定的。

查阅了百度百科中对DPI的定义

DPI指每一英寸长度中,取样、可显示或输出点的数目。每英寸点数中的“点”,在屏幕上并不是不变的。他受到分辨率等因素的影响,所以并不是唯一对应屏幕上的像素点。有可能这个点是4个像素,也有可能是1个像素。这就是因为DPI的概念中牵扯到了显示器上的变化。

所以,这里我是这么认为的(如果说的有问题欢迎指正)

我们一开始使用wm sizewm density查询到的就是原始的屏幕分辨率和DPI,但是之后我们使用adb命令修改后,实际上屏幕分辨率并没有变化,变化的是图像分辨率,即一个图像像素,其实是已经补充了很多个屏幕像素,从而表现出页面上的元素大小发生了变化

  1. 屏幕分辨率:
    例如,屏幕分辨率是1024×768,也就是说设备屏幕的水平方向上有1024个像素点,垂直方向上有768个像素点。
    像素的大小是没有固定长度的,不同设备上一个单位像素色块的大小是不一样的。
    例如,尺寸面积大小相同的两块屏幕,分辨率大小可以是不一样的,分辨率高的屏幕上面像素点(色块)就多,所以屏幕内可以展示的画面就更细致,单个色块面积更小。而分辨率低的屏幕上像素点(色块)更少,单个像素面积更大,可以显示的画面就没那么细致。

  2. 图像分辨率:
    例如,一张图片分辨率是500x200,也就是说这张图片在屏幕上按1:1放大时,水平方向有500个像素点(色块),垂直方向有200个像素点(色块)。
    在同一台设备上,图片分辨率越高,这张图片1:1放大时,图片面积越大;图片分辨率越低,这张图片1:1缩放时,图片面积越小。(可以理解为图片的像素点和屏幕的像素点是一个一个对应的)。
    但是,在屏幕上把图片超过100%放大时,为什么图片上像素色块也变的越大,其实是设备通过算法对图像进行了像素补足,我们把图片放的很大后看到的一块一块的方格子,虽然理解为一个图像像素,但是其实是已经补充了很多个屏幕像素;同理,把图片小于100%缩小时,也是通过算法将图片像素进行减少。

问题三:density不同

density其实就是一个比例系数
density = densityDpi/160
所以两个设备的density不同,归根结底就是densityDpi不同

解决方案

经过我们上面的分析,我们可以得出这样的结果

两个设备屏幕宽高尺寸相同,分辨率相同,项目中使用dp作为单位,但是原始densityDpi不同,导致了两个设备上UI元素显示的大小(px)不同
px = dp*density
对于同样尺寸的设备,我们当然希望两端在UI元素的大小上显示效果是一致的,但是Android碎片化严重,即使同样尺寸同样分辨率的设备,也有可能出现DPI不同,这就是Android屏幕适配最大的问题

那我们如何来解决这个问题呢?

Google提供了资源目录的限定符规则

//格式如下
values-sw480dp
values-sw640dp

sw的意思是smallestWidth,即手机的最小宽度dp值。
其实更确切的说,是指手机宽度和高度的dp值中最小者
对于常规手机而言,肯定是宽度dp值较小。如果手机切换成横屏了,那么就是高度dp值较小
但无论是横屏还是竖屏状态,最小者的dp值是不变的。即无论横竖屏状态,此手机都只会寻找对应宽度dp的values目录下的相关文件(dimens.xml)来处理UI尺寸问题,而避免了横竖屏切换时UI变形问题

手机宽度dp值计算方法:

DisplayMetrics dm = getResources().getDisplayMetrics();
//手机宽度dp值 = 手机实际宽度像素px / 手机屏幕密度比
float sw = dm.widthPixels / dm.density;

//如果 高度 < 宽度
//float sw = dm.heightPixels / dm.density;

但需要注意一点。如果你的手机宽度dp值为410.69。或许你可以生成values-sw410.59dp这个目录来做适配,我没试过。个人建议你写成values-sw410dp,而不是values-sw410.59dp或values-sw411dp。因为系统会向下寻找等于或小于410.59的值的values目录,直到默认的values目录为止

这里我提供了一个自动生成sw文件工具类

import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;


class Sw {
    static int[] i = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 319, 320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332, 333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371, 372, 373, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384, 385, 386, 387, 388, 389, 390, 391, 392, 393, 394, 395, 396, 397, 398, 399, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423, 424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436, 437, 438, 439, 440, 441, 442, 443, 444, 445, 446, 447, 448, 449, 450, 451, 452, 453, 454, 455, 456, 457, 458, 459, 460, 461, 462, 463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475, 476, 477, 478, 479, 480, 481, 482, 483, 484, 485, 486, 487, 488, 489, 490, 491, 492, 493, 494, 495, 496, 497, 498, 499, 500};

    public static void main(String[] args) {

//      300,360,420,480,500,520,560,600,640,680,720,760,780,800,820,860,
//      900,960,1000,1080,1200,1400,1600,1920,2000

        int[] j = {609, 800}; //想要生成的sw目录

        for (int m = 0; m < j.length; m++) {
            System.out.println(" \n适配大小" + j[m] + "\n");
            createFile(j[m]);
        }
    }

    private static void createFile(int n) {
        File file = new File("/Users/geekholt/Desktop/sw/values-sw" + n + "dp");
        if (!file.exists()) {//如果文件夹不存在
            file.mkdir();//创建文件夹
        }

        try {//异常处理

            BufferedWriter bw = new BufferedWriter(new FileWriter("/Users/geekholt/Desktop/sw/values-sw" + n + "dp" + "/dimens.xml"));
            bw.write("<resources>\n");

            for (int k = 0; k < i.length; k++) {
                System.out.println();
                bw.write("  <dimen name=\"DP" + i[k] + "\">" + Math.round(i[k] * (n / 609.0)) + "dp</dimen>\n");
            }
            bw.write("</resources>\n");
            bw.close();//一定要关闭文件
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

}

由于一开始的UI设计是以设备A为基准的,所以设备A(即values-sw609dp)中的dp值保持不变,设备B(即values-sw800dp)中的1dp = 1.3125dp,这样两个设备上的UI显示就达到了一致的效果

还有别的办法吗?

经过我们上面的分析,应该有很多人会发现,我们使用adb命令wm density 210的将设备B的densityDpi设置成设备A一致,也能达到一样的效果。但是这也只能在开发调试过程中这么做,我们不可能通过这种方法去修改厂家或者所有用户手中的设备

通过本文的分析,你是否对android屏幕的碎片化有一个新的理解呢,并不是分辨率和屏幕大小完全相同的两个设备,它们的页面显示效果就一定是一致的

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