美文网首页
关于UI 稿的适配

关于UI 稿的适配

作者: 瑜小贤 | 来源:发表于2021-10-25 15:54 被阅读0次

1. 可以用今日头条的适配方式,修改系统的density

1.1 先确定按宽还是高为基准,进行缩放适配。举例选宽
1.2 代码中获取设备的宽的像素值 / 设计稿宽的 dp值 = 目标density
1.3 在Activity#onCreate中将这个density设置给系统DisplayMetrics
1.4 项目xml中的控件,全部设置为设计稿中一样的大小
1.5 注意处理scaledDensity失效重新设置的相关问题

private static float sNoncompatDensity;
private static float sNoncompatScaledDensity;

private static void setCustomeDensity(@NonNull Activity activity, @NonNull final Application application){

     final DisplayMetrics appDisplayMetrics = application.getResources().getDisplayMetrics();

     if(sNoncompatDensity == 0){
         sNoncompatDensity = appDisplayMetrics.density;
         sNoncompatScaledDensity = appDisplayMetrics.scaleDensity;
         application.registerComponentCallbacks(new ComponentCallbacks(){
             @Override
             public void onConfigurationChanged(Configuration newConfig){
                 if(newConfig != null && newConfig.fontScale > 0){
                     sNoncompatScaledDensity = application.getResources().getDisplayMetrics().scaledDensity;
                 }
             }
             @Override
             public void onLowMemory(){}
         });
     }

     //设计图360 dp的宽
     final float targetDensity = appDisplayMetrics.widthPixels / 360; 
     final float targetScaledDensity = targetDensity * (sNoncompatScaledDensity / sNoncompatDensity);
     final int targetDensityDpi = targetDensityDpi;

     appDisplayMetrics.density = targetDensity;
     appDisplayMetrics.scaledDensity = targetScaledDensity;
     appDisplayMetrics.densityDpi = targetDensityDpi;

     final DisplayMetrics activityDisplayMetrics = activity.getResources().getDisplayMetrics();
     activityDisplayMetrics.density = targetDensity;
     activityDisplayMetrics.scaledDensity = targetScaledDensity;
     activityDisplayMetrics.densityDpi = targetDensityDpi;
}

2. 基于头条的原理,不修改DisplayMetrics#density,而是修改DisplayMetrics#xdpi

2.1 xml中使用pt单位
2.2 重写Activity下 getResources() 函数
2.3 选择适配基准是设计图的宽或高
2.4 与今日头条方案一样计算出newXdpi,即用屏幕宽度/高度像素 / 设计图dp数 * 72f
2.5 设置Resources【包含反射设置】

        override fun getResources(): Resources {
            return AdaptScreenUtils.adaptWidth(super.getResources(), 1080)
        }

        override fun getResources(): Resources {
            return AdaptScreenUtils.adaptHeight(super.getResources(), 1920)
        }

        override fun getResources(): Resources {
            return AdaptScreenUtils.closeAdapt(super.getResources())
        }
        #AdaptScreenUtils.java
        @NonNull
        public static Resources adaptWidth(@NonNull final Resources resources, final int designWidth) {
            float newXdpi = (resources.getDisplayMetrics().widthPixels * 72f) / designWidth;
            applyDisplayMetrics(resources, newXdpi);
            return resources;
        }

        @NonNull
        public static Resources adaptHeight(@NonNull final Resources resources, final int designHeight) {
            float newXdpi = (resources.getDisplayMetrics().heightPixels * 72f) / designHeight;
            applyDisplayMetrics(resources, newXdpi);
            return resources;
        }


        public static Resources closeAdapt(@NonNull final Resources resources) {
            float newXdpi = Resources.getSystem().getDisplayMetrics().density * 72f;
            applyDisplayMetrics(resources, newXdpi);
            return resources;
        }

        
        private static void applyDisplayMetrics(@NonNull final Resources resources, final float newXdpi) {
            resources.getDisplayMetrics().xdpi = newXdpi;
            Utils.getApp().getResources().getDisplayMetrics().xdpi = newXdpi;
            applyOtherDisplayMetrics(resources, newXdpi);
        }

        //反射设置Resources中的xdpi
        private static void applyOtherDisplayMetrics(final Resources resources, final float newXdpi) {
            if (sMetricsFields == null) {
                sMetricsFields = new ArrayList<>();
                Class resCls = resources.getClass();
                Field[] declaredFields = resCls.getDeclaredFields();
                while (declaredFields != null && declaredFields.length > 0) {
                    for (Field field : declaredFields) {
                        if (field.getType().isAssignableFrom(DisplayMetrics.class)) {
                            field.setAccessible(true);
                            DisplayMetrics tmpDm = getMetricsFromField(resources, field);
                            if (tmpDm != null) {
                                sMetricsFields.add(field);
                                tmpDm.xdpi = newXdpi;
                            }
                        }
                    }
                    resCls = resCls.getSuperclass();
                    if (resCls != null) {
                        declaredFields = resCls.getDeclaredFields();
                    } else {
                        break;
                    }
                }
            } else {
                applyMetricsFields(resources, newXdpi);
            }
        }

不会失效,这一点是最值得吹牛的,因为不论头条的适配还是 AndroidAutoSize,都会存在 DisplayMetrics#density 被还原的情况,需要自己重新设置回去,最显著的就是界面中存在 WebView 的话,由于其初始化的时候会还原 DisplayMetrics#density 的值导致适配失效,当然这点已经有解决方案了,但还会有很多其他情况会还原 DisplayMetrics#density 的值导致适配失效。而我这方案就是为了解决这个痛点,不让 DisplayMetrics 中的值被还原导致适配失效。

概念解释

  • px(Pixel像素)
    也称为图像元素,是作为图像构成的基本单元,单个像素的大小并不固定,跟随屏幕大小和像素数量的关系变化(屏幕越大,像素越低,单个像素越大,反之亦然)。所以在使用像素作为设计单位时,在不同的设备上可能会有缩放或拉伸的情况。

  • Resolution(分辨率)
    是指屏幕的垂直和水平方向的像素数量,如果分辨率是 1920*1080 ,那就是垂直方向有 1920个像素,水平方向有 1080个像素。

  • Dpi(像素密度)
    是指的是在系统软件上指定的,屏幕上每英寸(1英寸 = 2.54厘米)距离中有多少个像素点。如果屏幕为 320*240,屏幕长 2 英寸宽 1.5英寸,Dpi = 320 / 2 = 240 / 1.5 = 160。它往往是写在系统出厂配置文件的一个固定值;

  • Density(密度)
    这个是指屏幕上每平方英寸(2.54 ^ 2 平方厘米)中含有的像素点数量。

  • Android dip/dp (设备独立像素)
    长度单位,同一个单位在不同的设备上有不同的显示效果,具体效果根据设备的密度有关,详细的公式请看下面 。

  • ppi(物理:屏幕像素密度)
    物理概念,它是客观存在的不会改变。dpi是软件参考了物理像素密度后,人为指定的一个值,这样保证了某一个区间内的物理像素密度在软件上都使用同一个值;

  • dp加上自适应布局和weight比例布局能解决90%的适配问题。因为并不是所有的1080P的手机dpi都是480,比如Google 的Pixel2(1920*1080)的dpi是420;

  • 宽高限定符适配:穷举市面上所有的Android手机的宽高像素值,设定一个基准的分辨率,其他分辨率都根据这个基准分辨率来计算,在不同的尺寸文件夹内部,根据该尺寸编写对应的dimens文件。但其有一个致命的缺陷,那就是需要精准命中才能适配,App包体积也会变大

重要公式

  • px = density * dp
  • density = Dpi / 160
  • px = (dpi / 160) * dp

dpi=\frac{\sqrt{(宽^2 + 高^2)}}{屏幕尺寸}\frac{【单位px】}{【单位inch】}



例:我们以一个 4.95 英寸 1920 * 1080 的 nexus5 手机设备为例:

  • Dpi:

    1. 条件中的4.95英寸,指的是屏幕对角线的长度,所以我们要求屏幕对角线的像素数,即\sqrt{1920^2 + 1080^2}=2202【勾股定理】
    2. 计算dpi: 2202/4.95 = 445
    3. 得到这个设备的dpi为445【每英寸距离中有445个像素】
  • Density
    上面得到每英寸长度中有440像素,那么density为没平方英寸中的像素数量,应该为 445^2=198025

  • dip

    1. 先明白一个概念,所有显示到屏幕上的图像都是以px为单位
    2. dip是我们开发中使用的长度单位,最后它也要装换成px
    3. 计算这个设备上1dip等于多少px:
      px = dip * Dpi / 160
      px = 1 * 445 / 160
    4. 通过上面的计算可以看出在此设备上 1dip = 2.78px,那么这是一个真实的故事吗?
      nonono,其中的关键值dpi并不是我们算出来的445
Android系统定义的Dpi

上面计算的 445Dpi 是在 4.95英寸下的 1920*1080 手机,那如果是 4.75英寸下的呢? 4.55 英寸下的呢?。。。可见是很麻烦的,同一个分辨率在不同的屏幕尺寸上 Dpi 如果这么算是不相同的。为了解决这个问题,Android 中内置了几个默认的 Dpi,在特定的分辨率下自动调用,也可以手动在配置文件中修改。

ldpi mdpi hdpi xhdpi xxhdpi
分辨率 240x320 320x480 480x800 720x1280 1080x1920
系统dpi 120 160 240 320 480
基准比例 0.75 1 1.5 2 3

这是内置的 Dpi ,啥意思? 在 1920*1080 分辨率的手机上 默认就使用 480 的 dpi ,不管的你的尺寸是多大都是这样,除非厂家手动修改了配置文件,这个我们后面再说。
我们亲自尝试一下

<TextView    
  android:id="@+id/tv"   
  android:layout_width="200dp"    
  android:layout_height="100dp"    
  android:text="Hello World!" />

这是一个 textview,高为 200dp 宽为 100dp 。按照我们之前的公式手动计算:

height = 100 x 445 / 160 = 278.5 px
width  = 200 x 445 / 160 = 556.25 px

我们用下列代码获取到控件的实际像素看看是否相同:

layout = (RelativeLayout)findViewById(R.id.la);
//要在控件绘制完成后才能获取到相关信息,所以这里要监听绘制状态
layout.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener()     {    
  public boolean onPreDraw() {        
    Log.d("test", textView.getHeight() + "/" + textView.getWidth());       
    return true;    
  }
});

//输出的结果为:300/600
//内部计算过程为:
height = 100 x 480 / 160 = 300px
width  = 200 x 480 / 160 = 600px

其中的 160 是基准值不会变的,100200 是我们设置的 dp ,那么这 480是从何而来的?说好的 445 呢?
找到我们手机中的 /system/build.prop 文件,其中有一行是这样:

ro.sf.lcd_density=480

这就指定了这个机型使用的dpi是多少,还有一种情况是没有这一行(我在模拟器中发现过),那么应该是根据表格中的分辨率来自动设置。

说到底,因为有dpi这个动态的系数,我们在使用dp的时候才能兼容不同分辨率的设备。
到这里,应该都明白了 dpi 的由来,以及系统 dpi 跟物理 dpi 并不一定相同。
在系统中使用的全部都是系统 dpi,没有使用物理 dpi,也获取不到物理 dpi。物理 dpi 主要用于厂家对于手机的参数描述
(也可以看做 ppi )!

设备 1,屏幕宽度为 1080px,480DPI,屏幕总 dp 宽度为 1080 / (480 / 160) = 360dp

来源1
来源2
来源3

相关文章

网友评论

      本文标题:关于UI 稿的适配

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