美文网首页
今日头条适配方案 - 最简单解释

今日头条适配方案 - 最简单解释

作者: 展翅高飞鹏程万里 | 来源:发表于2021-06-27 13:15 被阅读0次

    起点 -- 重新定义dp

    如果每台设备的总宽度dp都等同于一个固定值。那么会发生什么神奇的现象呢?
    比如:
    1080 * 1080 的设备 总宽度dp 等于 720
    1980 * 1980 的设备 总宽度dp 等于 720
    那么一个长度500dp的View在上面两台的设备中占屏幕的比例为:500 / 720 =0.69444
    结论:此种定义dp,无论在任何分辨率的设备上,都是可以适配的。

    切换到安卓上

    我们如何按照上面定义的dp概念,应用在安卓的设配上呢?
    px与dp之间的换算公式:
    px = dp * density
    density :可以简单理解为dp与px之间的缩放比例,但因为每台设备的density都不一样。所以导致了每台设备上1dp对应的px都是不一样。

    假设:

    假设我们将每台设备的density都定义为同一个值比如1.5,那么dp与px之间就是1.5倍的关系。这样子又会引出新问题,一台设备宽度是150px,另外一台设配宽度为300px。那么100dp在两台设备上都显示150px,这样子就导致了适配问题,因为在一台设备上占满了屏幕宽度,而在另外一台设备上只是显示一半

    问题

    我们该如何重新定义density,使得dp在不同设备上最终显示出来的px长度与设备屏幕的宽度的比值都一样?简单一点来说就是:(1dp * density / 手机屏幕宽度px) 为一个固定值。
    方案一:假设我们的density = 手机屏幕宽度px / 设计图纸的宽度px
    设计图纸的宽度px:设计师给定的设计图的分辨率大小
    手机屏幕宽度px:设备宽度的px
    带入上面的公式可以得到:1dp * (手机屏幕宽度px / 设计图纸的宽度px) / 手机屏幕宽度px = 1dp / 设计图纸的宽度px

    带入公式简化之后的结果:1dp占屏幕宽度比例 = 1dp / 设计图宽度px

    解释公式结果
    假设有两台设配配置如下:
    设备一:720 * 720
    设备二:1080* 1080
    设计图宽度360px(设计师给的设计图分辨率大小)
    一个长度为100dp的View将要显示在设备一和设备二上

    在设备一显示出来的像素值为 100dp * density = 100dp * 720 / 360 = 200px , 占屏幕比例为 = 2.7777777%
    在设备二显示出来的像数值为 100dp * density = 100dp * 1080 / 360 = 300px,占屏幕比例为 =
    2.777777%
    结论:因为100dp在设备一和设备二占比都相同,都为2.77777%。所以此方案是行的通的,适配的方案。

    方案实施

    class Application {
    
      public void onCreate() {
            DisplayMetrics metrics =  this.getResource().getDisplayMetrics();
            mestrics.density = metrics.widthPixels / 你的设计师给的分辨率px
            this.getResources().updateConfiguration(this.getResource().getConfiguration(), mestrics);
      }
    
    }
    

    特别提醒:在编写布局的时候,1px = 1dp。因为你是依据设计图,编写xml。所以此时的density = 1
    则:1px / 1 = 1dp

    相关文章

      网友评论

          本文标题:今日头条适配方案 - 最简单解释

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