美文网首页前端开发那些事儿
屏幕适配 — 更深刻的理解Android屏幕碎片化

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

作者: Geekholt | 来源:发表于2020-11-30 20:17 被阅读0次

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

    项目背景

    公司有一个基于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屏幕的碎片化有一个新的理解呢,并不是分辨率和屏幕大小完全相同的两个设备,它们的页面显示效果就一定是一致的

    相关文章

      网友评论

        本文标题:屏幕适配 — 更深刻的理解Android屏幕碎片化

        本文链接:https://www.haomeiwen.com/subject/arydwktx.html