关于UI 稿的适配

2021-10-25  本文已影响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 中的值被还原导致适配失效。

概念解释

重要公式

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



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

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

上一篇 下一篇

猜你喜欢

热点阅读