android 屏幕适配方案

2021-06-24/2021-06-24

参考文献:

dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算
一种极低成本的Android屏幕适配方式
Android屏幕适配方案(出自今日头条)

一、单位介绍

1. 基本概念

  • dip: Density independent pixels ,设备无关像素。
  • dp: 即 dip
  • px: 像素
  • dpi: dots per inch , 直接来说就是一英寸多少个像素点。常见取值 120,160,240。我一般称作像素密度,简称密度
  • density: 直接翻译的话貌似叫 密度。常见取值 1.5、1.0 。和标准 dpi 的比例(160px/inc),即每英寸 160 px 的时候,density 为 1.0,当 density 为 2.0 的时候,一英寸有 320 px
  • 分辨率: 横纵 2 个方向的像素点的数量,常见取值 480X800 ,320X480
  • 屏幕尺寸: 屏幕对角线的长度。电脑电视同理。
  • 屏幕比例的问题。因为只确定了对角线长,2 边长度还不一定。所以有了 4:3、16:9这种,这样就可以算出屏幕边长了。

2. 应用

在 android 中,可以获取一个窗口的 metrics

1DisplayMetrics metrics = activity.getResources().getDisplayMetrics();
2metrics.density;// 像素密度,其实就是 dpi/(160px/1inc) 得到的值
3metrics.scaledDensity;// 字体缩放比例,正常情况下和 density 相等,但是调节系统字体大小后会改变这个值
4metrics.densityDpi;// 每英寸的像素点
5metrics.widthPixels;// 宽度有多少像素
6metrics.heightPixels;// 高度有多少像素 
7metrics.xdpi;// 宽度每英寸的像素点
8metrics.ydpi;// 高度每英寸的像素点

3. 计算公式

android中的dp在渲染前会将dp转为px,计算公式:

  • px = density * dp; 设备的 dp 是可以计算出来的

  • density = dpi / 160;

  • px = dp * (dpi / 160);

  • dpi = sqrt((width^2+height^2)(单位 px))/屏幕尺寸(单位 inch),dpi是根据屏幕真实的分辨率和尺寸来计算的,每个设备都可能不一样的。

    640.png

二、屏幕适配方案

1. 问题描述

假设我们 UI 设计图是按屏幕宽度为 360dp 来设计的,但手机屏幕宽度可能为 400dp,也就是屏幕是比设计图要宽的。这种情况下, 即使使用 dp 也是无法在不同设备上显示为同样效果的。 同时还存在部分设备屏幕宽度不足 360dp,这时就会导致按 360dp 宽度来开发实际显示不全的情况。

而且上述屏幕尺寸、分辨率和像素密度的关系,很多设备并没有按此规则来实现, 因此 dpi 的值非常乱,没有规律可循,从而导致使用 dp 适配效果差强人意。

整理需求

首先来梳理下我们的需求,一般我们设计图都是以固定的尺寸来设计的。比如以分辨率 1920px * 1080px 来设计,以 density 为 3 来标注,也就是屏幕其实是 640dp * 360dp。如果我们想在所有设备上显示完全一致,其实是不现实的,因为屏幕高宽比不是固定的,16:9、4:3 甚至其他宽高比层出不穷,宽高比不同,显示完全一致就不可能了。但是通常下,我们只需要以宽或高一个维度去适配,比如我们 Feed 是上下滑动的,只需要保证在所有设备中宽的维度上显示一致即可,再比如一个不支持上下滑动的页面,那么需要保证在高这个维度上都显示一致,尤其不能存在某些设备上显示不全的情况。同时考虑到现在基本都是以 dp 为单位去做的适配,如果新的方案不支持 dp,那么迁移成本也非常高。

因此,总结下大致需求如下:

  1. 支持以宽或者高一个维度去适配,保持该维度上和设计图一致;
  2. 支持 dp 和 sp 单位,控制迁移成本到最小。

寻找突破口

从 dp 和 px 的转换公式 :px = dp * density

可以看出,如果设计图宽为 360dp(即想把屏幕的 dp 固定),想要保证在所有设备计算得出的 px 值都正好是屏幕宽度的话,我们只能修改 density 的值。

通过阅读源码,我们可以得知,density 是 DisplayMetrics 中的成员变量,而 DisplayMetrics 实例通过 Resources.getDisplayMetrics() 可以获得,而 Resouces 通过 Activity 或者 Application 的 Context 获得。

DisplayMetrics 里面的值上文有介绍。

那么是不是所有的 dp 和 px 的转换都是通过 DisplayMetrics 中相关的值来计算的呢?

经过研究,dp 转 px 基本都是通过 DisplayMetrics 来计算的,这里不再详述。因此,想要满足上述需求,我们只需要修改 DisplayMetrics 中和 dp 转换相关的变量 (density) 即可。

2. 解决方案

下面假设设计图宽度是 360dp,以宽维度来适配。

那么适配后的 density = 设备真实宽(单位px) / 360,接下来只需要把我们计算好的 density 在系统中修改下即可,代码实现如下:

 1public class ScreenUtils {
 2    // 设备原来的像素密度
 3    private static float sNoncompatDensity;
 4    // 设备原来的字体缩放后像素密度
 5    private static float sNoncompatScaledDensity;
 6
 7    private static void setCustomDensity(@NonNull Activity activity, @NonNull final Application application) {
 8        final DisplayMetrics appDisplayMetrics = application.getResources().getDisplayMetrics();
 9        // 未初始化
10        if (sNoncompatDensity == 0) {
11            // 获得设备原本数据
12            sNoncompatDensity = appDisplayMetrics.density;
13            sNoncompatScaledDensity = appDisplayMetrics.scaledDensity;
14            // 监听字体切换
15            application.registerComponentCallbacks(new ComponentCallbacks() {
16                @Override
17                public void onConfigurationChanged(@NonNull Configuration newConfig) {
18                    if (newConfig != null && newConfig.fontScale > 0) {
19                        // 更新新的字体缩放后像素密度
20                        sNoncompatScaledDensity = application.getResources().getDisplayMetrics().scaledDensity;
21                    }
22                }
23
24                @Override
25                public void onLowMemory() {
26                }
27            });
28        }
29
30        // 新的像素密度
31        final float targetDensity = appDisplayMetrics.widthPixels / 360;
32        // 新的字体缩放后像素密度
33        final float targetScaledDensity = targetDensity * (sNoncompatScaledDensity / sNoncompatDensity);
34        // 新的 dpi,每英寸的像素个数
35        final int targetDensityDpi = (int) (160 * targetDensity);
36
37        // 更新 application 数据
38        appDisplayMetrics.density = targetDensity;
39        appDisplayMetrics.scaledDensity = targetScaledDensity;
40        appDisplayMetrics.densityDpi = targetDensityDpi;
41
42        // 更新 activity 数据
43        final DisplayMetrics activityDisplayMetrics = activity.getResources().getDisplayMetrics();
44        activityDisplayMetrics.density = targetDensity;
45        activityDisplayMetrics.scaledDensity = targetScaledDensity;
46        activityDisplayMetrics.densityDpi = targetDensityDpi;
47    }
48}

我们在每个 activity 的 onCreate 中调用此方法即可。

3. 最终实现

3.1 实现类

  1import android.app.Activity;
  2import android.app.Application;
  3import android.content.ComponentCallbacks;
  4import android.content.Context;
  5import android.content.res.Configuration;
  6import android.os.Build;
  7import android.os.Bundle;
  8import android.util.DisplayMetrics;
  9
 10import androidx.annotation.NonNull;
 11import androidx.annotation.RequiresApi;
 12
 13/**
 14 * 屏幕适配方案
 15 * <br>
 16 * <p>PS: 提供 dp、sp 以及 pt 作为适配单位,建议开发中以 dp、sp 适配为主,pt 可作为 dp、sp 的适配补充</p>
 17 */
 18public final class ScreenAdapter {
 19    /**
 20     * 屏幕适配的基准
 21     */
 22    // 固定宽度
 23    public static final int MATCH_BASE_WIDTH = 0;
 24    // 固定高度
 25    public static final int MATCH_BASE_HEIGHT = 1;
 26    /**
 27     * 适配单位
 28     */
 29    // dp
 30    public static final int MATCH_UNIT_DP = 0;
 31    // pt
 32    public static final int MATCH_UNIT_PT = 1;
 33
 34    // 适配信息类
 35    private static MatchInfo sMatchInfo;
 36    // Activity 的生命周期监测
 37    private static Application.ActivityLifecycleCallbacks mActivityLifecycleCallback;
 38
 39    // 私有化构造函数,防止创建实例
 40    private ScreenAdapter() {
 41        throw new UnsupportedOperationException("you can't instantiate me...");
 42    }
 43
 44    /**
 45     * 初始化, 获取设备信息, 在 application 中调用
 46     *
 47     * @param application application
 48     */
 49    public static void init(@NonNull final Application application) {
 50        final DisplayMetrics displayMetrics = application.getResources().getDisplayMetrics();
 51        if (sMatchInfo == null) {
 52            // 记录系统的原始值
 53            sMatchInfo = new MatchInfo();
 54            sMatchInfo.setScreenWidth(displayMetrics.widthPixels);
 55            sMatchInfo.setScreenHeight(displayMetrics.heightPixels);
 56            sMatchInfo.setAppDensity(displayMetrics.density);
 57            sMatchInfo.setAppDensityDpi(displayMetrics.densityDpi);
 58            sMatchInfo.setAppScaledDensity(displayMetrics.scaledDensity);
 59            sMatchInfo.setAppXdpi(displayMetrics.xdpi);
 60            sMatchInfo.setAppYdpi(displayMetrics.ydpi);
 61        }
 62        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
 63            // 添加字体变化的监听
 64            application.registerComponentCallbacks(new ComponentCallbacks() {
 65                @Override
 66                public void onConfigurationChanged(Configuration newConfig) {
 67                    // 字体改变后,将 appScaledDensity 重新赋值
 68                    if (newConfig != null && newConfig.fontScale > 0) {
 69                        sMatchInfo.setAppScaledDensity(application.getResources().getDisplayMetrics().scaledDensity);
 70                    }
 71                }
 72
 73                @Override
 74                public void onLowMemory() {
 75                }
 76            });
 77        }
 78    }
 79
 80    /**
 81     * 在 application 中全局激活适配(也可单独使用 match() 方法在指定页面中配置适配)
 82     *
 83     * @param application application
 84     * @param designSize  宽度 or 高度要固定的大小
 85     * @param matchBase   固定宽度还是高度 ScreenAdapter.MATCH_BASE_WIDTH/ScreenAdapter.MATCH_BASE_HEIGHT
 86     * @param matchUnit   designSize 的单位,ScreenAdapter.MATCH_UNIT_DP/ScreenAdapter.MATCH_UNIT_PT
 87     */
 88    @RequiresApi(api = Build.VERSION_CODES.ICE_CREAM_SANDWICH)
 89    public static void register(@NonNull final Application application, final float designSize, final int matchBase, final int matchUnit) {
 90        match(application, designSize, matchBase, matchUnit);
 91        if (mActivityLifecycleCallback == null) {
 92            mActivityLifecycleCallback = new Application.ActivityLifecycleCallbacks() {
 93                @Override
 94                public void onActivityCreated(Activity activity, Bundle savedInstanceState) {
 95                    if (activity != null) {
 96                        match(activity, designSize, matchBase, matchUnit);
 97                    }
 98                }
 99
100                @Override
101                public void onActivityStarted(Activity activity) {
102
103                }
104
105                @Override
106                public void onActivityResumed(Activity activity) {
107
108                }
109
110                @Override
111                public void onActivityPaused(Activity activity) {
112
113                }
114
115                @Override
116                public void onActivityStopped(Activity activity) {
117
118                }
119
120                @Override
121                public void onActivitySaveInstanceState(Activity activity, Bundle outState) {
122
123                }
124
125                @Override
126                public void onActivityDestroyed(Activity activity) {
127
128                }
129            };
130            // 注册监听器
131            application.registerActivityLifecycleCallbacks(mActivityLifecycleCallback);
132        }
133    }
134
135    /**
136     * 全局取消所有的适配
137     *
138     * @param application application
139     * @param matchUnit   要取消宽度/高度适配
140     */
141    @RequiresApi(api = Build.VERSION_CODES.ICE_CREAM_SANDWICH)
142    public static void unregister(@NonNull final Application application, @NonNull int... matchUnit) {
143        if (mActivityLifecycleCallback != null) {
144            application.unregisterActivityLifecycleCallbacks(mActivityLifecycleCallback);
145            mActivityLifecycleCallback = null;
146        }
147        for (int unit : matchUnit) {
148            cancelMatch(application, unit);
149        }
150    }
151
152
153    /**
154     * 适配屏幕(放在 Activity 的 setContentView() 之前执行)
155     *
156     * @param context    context
157     * @param designSize 宽度要固定的大小 单位 dp
158     */
159    public static void match(@NonNull final Context context, final float designSize) {
160        match(context, designSize, MATCH_BASE_WIDTH, MATCH_UNIT_DP);
161    }
162
163    /**
164     * 适配屏幕(放在 Activity 的 setContentView() 之前执行)
165     *
166     * @param context    context
167     * @param designSize 宽度 or 高度要固定的大小
168     * @param matchBase  固定宽度还是高度 ScreenAdapter.MATCH_BASE_WIDTH/ScreenAdapter.MATCH_BASE_HEIGHT
169     */
170    public static void match(@NonNull final Context context, final float designSize, int matchBase) {
171        match(context, designSize, matchBase, MATCH_UNIT_DP);
172    }
173
174    /**
175     * 适配屏幕(放在 Activity 的 setContentView() 之前执行)
176     *
177     * @param context    context
178     * @param designSize 宽度 or 高度要固定的大小
179     * @param matchBase  固定宽度还是高度 ScreenAdapter.MATCH_BASE_WIDTH/ScreenAdapter.MATCH_BASE_HEIGHT
180     * @param matchUnit  designSize 的单位,ScreenAdapter.MATCH_UNIT_DP/ScreenAdapter.MATCH_UNIT_PT
181     */
182    public static void match(@NonNull final Context context, final float designSize, int matchBase, int matchUnit) {
183        if (designSize == 0) {
184            throw new UnsupportedOperationException("The designSize cannot be equal to 0");
185        }
186        if (matchUnit == MATCH_UNIT_DP) {
187            matchByDP(context, designSize, matchBase);
188        } else if (matchUnit == MATCH_UNIT_PT) {
189            matchByPT(context, designSize, matchBase);
190        }
191    }
192
193    /**
194     * 重置适配信息,取消适配
195     */
196    public static void cancelMatch(@NonNull final Context context) {
197        cancelMatch(context, MATCH_UNIT_DP);
198        cancelMatch(context, MATCH_UNIT_PT);
199    }
200
201    /**
202     * 重置适配信息,取消适配
203     *
204     * @param context   context
205     * @param matchUnit 需要取消适配的单位
206     */
207    public static void cancelMatch(@NonNull final Context context, int matchUnit) {
208        if (sMatchInfo != null) {
209            final DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
210            if (matchUnit == MATCH_UNIT_DP) {
211                if (displayMetrics.density != sMatchInfo.getAppDensity()) {
212                    displayMetrics.density = sMatchInfo.getAppDensity();
213                }
214                if (displayMetrics.densityDpi != sMatchInfo.getAppDensityDpi()) {
215                    displayMetrics.densityDpi = (int) sMatchInfo.getAppDensityDpi();
216                }
217                if (displayMetrics.scaledDensity != sMatchInfo.getAppScaledDensity()) {
218                    displayMetrics.scaledDensity = sMatchInfo.getAppScaledDensity();
219                }
220            } else if (matchUnit == MATCH_UNIT_PT) {
221                if (displayMetrics.xdpi != sMatchInfo.getAppXdpi()) {
222                    displayMetrics.xdpi = sMatchInfo.getAppXdpi();
223                }
224            }
225        }
226    }
227
228    public static MatchInfo getMatchInfo() {
229        return sMatchInfo;
230    }
231
232    /**
233     * 使用 dp 作为适配单位(适合在新项目中使用,在老项目中使用会对原来既有的 dp 值产生影响)
234     * <br>
235     * <ul>
236     * dp 与 px 之间的换算:
237     * <li> px = density * dp </li>
238     * <li> density = dpi / 160 </li>
239     * <li> px = dp * (dpi / 160) </li>
240     * </ul>
241     *
242     * @param context    context
243     * @param designSize 设计图的宽/高(单位: dp)
244     * @param base       适配基准
245     */
246    private static void matchByDP(@NonNull final Context context, final float designSize, int base) {
247        final float targetDensity;
248        if (base == MATCH_BASE_WIDTH) {
249            targetDensity = sMatchInfo.getScreenWidth() * 1f / designSize;
250        } else if (base == MATCH_BASE_HEIGHT) {
251            targetDensity = sMatchInfo.getScreenHeight() * 1f / designSize;
252        } else {
253            // 默认取宽
254            targetDensity = sMatchInfo.getScreenWidth() * 1f / designSize;
255        }
256        final int targetDensityDpi = (int) (targetDensity * 160);
257        final float targetScaledDensity = targetDensity * (sMatchInfo.getAppScaledDensity() / sMatchInfo.getAppDensity());
258        final DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
259        displayMetrics.density = targetDensity;
260        displayMetrics.densityDpi = targetDensityDpi;
261        displayMetrics.scaledDensity = targetScaledDensity;
262    }
263
264    /**
265     * 使用 pt 作为适配单位(因为 pt 比较冷门,新老项目皆适合使用;也可作为 dp 适配的补充,
266     * 在需要同时适配宽度和高度时,使用 pt 来适配 dp 未适配的宽度或高度)
267     * <br/>
268     * <p> pt 转 px 算法: pt * metrics.xdpi * (1.0f/72) </p>
269     *
270     * @param context    context
271     * @param designSize 设计图的宽/高(单位: pt)
272     * @param base       适配基准
273     */
274    private static void matchByPT(@NonNull final Context context, final float designSize, int base) {
275        final float targetXdpi;
276        if (base == MATCH_BASE_WIDTH) {
277            targetXdpi = sMatchInfo.getScreenWidth() * 72f / designSize;
278        } else if (base == MATCH_BASE_HEIGHT) {
279            targetXdpi = sMatchInfo.getScreenHeight() * 72f / designSize;
280        } else {
281            targetXdpi = sMatchInfo.getScreenWidth() * 72f / designSize;
282        }
283        final DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
284        displayMetrics.xdpi = targetXdpi;
285    }
286
287    /**
288     * 适配信息静态类, 属性获取完之后不会被改变
289     */
290    public static class MatchInfo {
291        // 屏幕宽度,单位 px
292        private int screenWidth;
293        // 屏幕高度,单位 px
294        private int screenHeight;
295        // 设备的像素密度
296        private float appDensity;
297        // 设备的 dpi,每英寸的像素点
298        private float appDensityDpi;
299        // 字体缩放后的像素密度
300        private float appScaledDensity;
301        // X 轴精确的 dpi
302        private float appXdpi;
303        // y 轴精确的 dpi
304        private float appYdpi;
305
306        public int getScreenWidth() {
307            return screenWidth;
308        }
309
310        public void setScreenWidth(int screenWidth) {
311            this.screenWidth = screenWidth;
312        }
313
314        public int getScreenHeight() {
315            return screenHeight;
316        }
317
318        public void setScreenHeight(int screenHeight) {
319            this.screenHeight = screenHeight;
320        }
321
322        public float getAppDensity() {
323            return appDensity;
324        }
325
326        public void setAppDensity(float appDensity) {
327            this.appDensity = appDensity;
328        }
329
330        public float getAppDensityDpi() {
331            return appDensityDpi;
332        }
333
334        public void setAppDensityDpi(float appDensityDpi) {
335            this.appDensityDpi = appDensityDpi;
336        }
337
338        public float getAppScaledDensity() {
339            return appScaledDensity;
340        }
341
342        public void setAppScaledDensity(float appScaledDensity) {
343            this.appScaledDensity = appScaledDensity;
344        }
345
346        public float getAppXdpi() {
347            return appXdpi;
348        }
349
350        public void setAppXdpi(float appXdpi) {
351            this.appXdpi = appXdpi;
352        }
353
354        public float getAppYdpi() {
355            return appYdpi;
356        }
357
358        public void setAppYdpi(float appYdpi) {
359            this.appYdpi = appYdpi;
360        }
361    }
362}

3.2 使用方法

整个应用程序都适配:

在 application 的 onCreate() 中

1ScreenAdapter.init(context);
2ScreenAdapter.register(context, 1080, ScreenAdapter.MATCH_BASE_WIDTH, ScreenAdapter.MATCH_UNIT_DP);

若要取消适配

1unregister(context, ScreenAdapter.MATCH_BASE_WIDTH);

单个 activity 适配:

在 application 的 onCreate() 中

1ScreenAdapter.init(context);

在 activity 的 onCreate() 方法中

1ScreenAdapter.match(context, 1080, ScreenAdapter.MATCH_BASE_WIDTH, ScreenAdapter.MATCH_UNIT_DP);

若要取消适配

1ScreenAdapter.cancelMatch(context);

获取设备信息类:

1ScreenAdapter.getMatchInfo();

标题:android 屏幕适配方案
作者:Rainsheep
地址:HTTPS://www.rainsheep.cn/articles/2021/06/24/1624547896298.html

评论
发表评论
       
       
取消