参考文献:
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
DisplayMetrics metrics = activity.getResources().getDisplayMetrics();
metrics.density;// 像素密度,其实就是 dpi/(160px/1inc) 得到的值
metrics.scaledDensity;// 字体缩放比例,正常情况下和 density 相等,但是调节系统字体大小后会改变这个值
metrics.densityDpi;// 每英寸的像素点
metrics.widthPixels;// 宽度有多少像素
metrics.heightPixels;// 高度有多少像素
metrics.xdpi;// 宽度每英寸的像素点
metrics.ydpi;// 高度每英寸的像素点
3. 计算公式
android中的dp在渲染前会将dp转为px,计算公式:
-
px = density * dp; 设备的 dp 是可以计算出来的
-
density = dpi / 160;
-
px = dp * (dpi / 160);
-
dpi = sqrt((width2+height2)(单位 px))/屏幕尺寸(单位 inch),dpi是根据屏幕真实的分辨率和尺寸来计算的,每个设备都可能不一样的。
二、屏幕适配方案
1. 问题描述
假设我们 UI 设计图是按屏幕宽度为 360dp 来设计的,但手机屏幕宽度可能为 400dp,也就是屏幕是比设计图要宽的。这种情况下, 即使使用 dp 也是无法在不同设备上显示为同样效果的。 同时还存在部分设备屏幕宽度不足 360dp,这时就会导致按 360dp 宽度来开发实际显示不全的情况。
而且上述屏幕尺寸、分辨率和像素密度的关系,很多设备并没有按此规则来实现, 因此 dpi 的值非常乱,没有规律可循,从而导致使用 dp 适配效果差强人意。
整理需求
首先来梳理下我们的需求,一般我们设计图都是以固定的尺寸来设计的。比如以分辨率 1920px * 1080px 来设计,以 density 为 3 来标注,也就是屏幕其实是 640dp * 360dp。如果我们想在所有设备上显示完全一致,其实是不现实的,因为屏幕高宽比不是固定的,16:9、4:3 甚至其他宽高比层出不穷,宽高比不同,显示完全一致就不可能了。但是通常下,我们只需要以宽或高一个维度去适配,比如我们 Feed 是上下滑动的,只需要保证在所有设备中宽的维度上显示一致即可,再比如一个不支持上下滑动的页面,那么需要保证在高这个维度上都显示一致,尤其不能存在某些设备上显示不全的情况。同时考虑到现在基本都是以 dp 为单位去做的适配,如果新的方案不支持 dp,那么迁移成本也非常高。
因此,总结下大致需求如下:
- 支持以宽或者高一个维度去适配,保持该维度上和设计图一致;
- 支持 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 在系统中修改下即可,代码实现如下:
public class ScreenUtils {
// 设备原来的像素密度
private static float sNoncompatDensity;
// 设备原来的字体缩放后像素密度
private static float sNoncompatScaledDensity;
private static void setCustomDensity(@NonNull Activity activity, @NonNull final Application application) {
final DisplayMetrics appDisplayMetrics = application.getResources().getDisplayMetrics();
// 未初始化
if (sNoncompatDensity == 0) {
// 获得设备原本数据
sNoncompatDensity = appDisplayMetrics.density;
sNoncompatScaledDensity = appDisplayMetrics.scaledDensity;
// 监听字体切换
application.registerComponentCallbacks(new ComponentCallbacks() {
@Override
public void onConfigurationChanged(@NonNull Configuration newConfig) {
if (newConfig != null && newConfig.fontScale > 0) {
// 更新新的字体缩放后像素密度
sNoncompatScaledDensity = application.getResources().getDisplayMetrics().scaledDensity;
}
}
@Override
public void onLowMemory() {
}
});
}
// 新的像素密度
final float targetDensity = appDisplayMetrics.widthPixels / 360;
// 新的字体缩放后像素密度
final float targetScaledDensity = targetDensity * (sNoncompatScaledDensity / sNoncompatDensity);
// 新的 dpi,每英寸的像素个数
final int targetDensityDpi = (int) (160 * targetDensity);
// 更新 application 数据
appDisplayMetrics.density = targetDensity;
appDisplayMetrics.scaledDensity = targetScaledDensity;
appDisplayMetrics.densityDpi = targetDensityDpi;
// 更新 activity 数据
final DisplayMetrics activityDisplayMetrics = activity.getResources().getDisplayMetrics();
activityDisplayMetrics.density = targetDensity;
activityDisplayMetrics.scaledDensity = targetScaledDensity;
activityDisplayMetrics.densityDpi = targetDensityDpi;
}
}
我们在每个 activity 的 onCreate 中调用此方法即可。
3. 最终实现
3.1 实现类
import android.app.Activity;
import android.app.Application;
import android.content.ComponentCallbacks;
import android.content.Context;
import android.content.res.Configuration;
import android.os.Build;
import android.os.Bundle;
import android.util.DisplayMetrics;
import androidx.annotation.NonNull;
import androidx.annotation.RequiresApi;
/**
* 屏幕适配方案
* <br>
* <p>PS: 提供 dp、sp 以及 pt 作为适配单位,建议开发中以 dp、sp 适配为主,pt 可作为 dp、sp 的适配补充</p>
*/
public final class ScreenAdapter {
/**
* 屏幕适配的基准
*/
// 固定宽度
public static final int MATCH_BASE_WIDTH = 0;
// 固定高度
public static final int MATCH_BASE_HEIGHT = 1;
/**
* 适配单位
*/
// dp
public static final int MATCH_UNIT_DP = 0;
// pt
public static final int MATCH_UNIT_PT = 1;
// 适配信息类
private static MatchInfo sMatchInfo;
// Activity 的生命周期监测
private static Application.ActivityLifecycleCallbacks mActivityLifecycleCallback;
// 私有化构造函数,防止创建实例
private ScreenAdapter() {
throw new UnsupportedOperationException("you can't instantiate me...");
}
/**
* 初始化, 获取设备信息, 在 application 中调用
*
* @param application application
*/
public static void init(@NonNull final Application application) {
final DisplayMetrics displayMetrics = application.getResources().getDisplayMetrics();
if (sMatchInfo == null) {
// 记录系统的原始值
sMatchInfo = new MatchInfo();
sMatchInfo.setScreenWidth(displayMetrics.widthPixels);
sMatchInfo.setScreenHeight(displayMetrics.heightPixels);
sMatchInfo.setAppDensity(displayMetrics.density);
sMatchInfo.setAppDensityDpi(displayMetrics.densityDpi);
sMatchInfo.setAppScaledDensity(displayMetrics.scaledDensity);
sMatchInfo.setAppXdpi(displayMetrics.xdpi);
sMatchInfo.setAppYdpi(displayMetrics.ydpi);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
// 添加字体变化的监听
application.registerComponentCallbacks(new ComponentCallbacks() {
@Override
public void onConfigurationChanged(Configuration newConfig) {
// 字体改变后,将 appScaledDensity 重新赋值
if (newConfig != null && newConfig.fontScale > 0) {
sMatchInfo.setAppScaledDensity(application.getResources().getDisplayMetrics().scaledDensity);
}
}
@Override
public void onLowMemory() {
}
});
}
}
/**
* 在 application 中全局激活适配(也可单独使用 match() 方法在指定页面中配置适配)
*
* @param application application
* @param designSize 宽度 or 高度要固定的大小
* @param matchBase 固定宽度还是高度 ScreenAdapter.MATCH_BASE_WIDTH/ScreenAdapter.MATCH_BASE_HEIGHT
* @param matchUnit designSize 的单位,ScreenAdapter.MATCH_UNIT_DP/ScreenAdapter.MATCH_UNIT_PT
*/
@RequiresApi(api = Build.VERSION_CODES.ICE_CREAM_SANDWICH)
public static void register(@NonNull final Application application, final float designSize, final int matchBase, final int matchUnit) {
match(application, designSize, matchBase, matchUnit);
if (mActivityLifecycleCallback == null) {
mActivityLifecycleCallback = new Application.ActivityLifecycleCallbacks() {
@Override
public void onActivityCreated(Activity activity, Bundle savedInstanceState) {
if (activity != null) {
match(activity, designSize, matchBase, matchUnit);
}
}
@Override
public void onActivityStarted(Activity activity) {
}
@Override
public void onActivityResumed(Activity activity) {
}
@Override
public void onActivityPaused(Activity activity) {
}
@Override
public void onActivityStopped(Activity activity) {
}
@Override
public void onActivitySaveInstanceState(Activity activity, Bundle outState) {
}
@Override
public void onActivityDestroyed(Activity activity) {
}
};
// 注册监听器
application.registerActivityLifecycleCallbacks(mActivityLifecycleCallback);
}
}
/**
* 全局取消所有的适配
*
* @param application application
* @param matchUnit 要取消宽度/高度适配
*/
@RequiresApi(api = Build.VERSION_CODES.ICE_CREAM_SANDWICH)
public static void unregister(@NonNull final Application application, @NonNull int... matchUnit) {
if (mActivityLifecycleCallback != null) {
application.unregisterActivityLifecycleCallbacks(mActivityLifecycleCallback);
mActivityLifecycleCallback = null;
}
for (int unit : matchUnit) {
cancelMatch(application, unit);
}
}
/**
* 适配屏幕(放在 Activity 的 setContentView() 之前执行)
*
* @param context context
* @param designSize 宽度要固定的大小 单位 dp
*/
public static void match(@NonNull final Context context, final float designSize) {
match(context, designSize, MATCH_BASE_WIDTH, MATCH_UNIT_DP);
}
/**
* 适配屏幕(放在 Activity 的 setContentView() 之前执行)
*
* @param context context
* @param designSize 宽度 or 高度要固定的大小
* @param matchBase 固定宽度还是高度 ScreenAdapter.MATCH_BASE_WIDTH/ScreenAdapter.MATCH_BASE_HEIGHT
*/
public static void match(@NonNull final Context context, final float designSize, int matchBase) {
match(context, designSize, matchBase, MATCH_UNIT_DP);
}
/**
* 适配屏幕(放在 Activity 的 setContentView() 之前执行)
*
* @param context context
* @param designSize 宽度 or 高度要固定的大小
* @param matchBase 固定宽度还是高度 ScreenAdapter.MATCH_BASE_WIDTH/ScreenAdapter.MATCH_BASE_HEIGHT
* @param matchUnit designSize 的单位,ScreenAdapter.MATCH_UNIT_DP/ScreenAdapter.MATCH_UNIT_PT
*/
public static void match(@NonNull final Context context, final float designSize, int matchBase, int matchUnit) {
if (designSize == 0) {
throw new UnsupportedOperationException("The designSize cannot be equal to 0");
}
if (matchUnit == MATCH_UNIT_DP) {
matchByDP(context, designSize, matchBase);
} else if (matchUnit == MATCH_UNIT_PT) {
matchByPT(context, designSize, matchBase);
}
}
/**
* 重置适配信息,取消适配
*/
public static void cancelMatch(@NonNull final Context context) {
cancelMatch(context, MATCH_UNIT_DP);
cancelMatch(context, MATCH_UNIT_PT);
}
/**
* 重置适配信息,取消适配
*
* @param context context
* @param matchUnit 需要取消适配的单位
*/
public static void cancelMatch(@NonNull final Context context, int matchUnit) {
if (sMatchInfo != null) {
final DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
if (matchUnit == MATCH_UNIT_DP) {
if (displayMetrics.density != sMatchInfo.getAppDensity()) {
displayMetrics.density = sMatchInfo.getAppDensity();
}
if (displayMetrics.densityDpi != sMatchInfo.getAppDensityDpi()) {
displayMetrics.densityDpi = (int) sMatchInfo.getAppDensityDpi();
}
if (displayMetrics.scaledDensity != sMatchInfo.getAppScaledDensity()) {
displayMetrics.scaledDensity = sMatchInfo.getAppScaledDensity();
}
} else if (matchUnit == MATCH_UNIT_PT) {
if (displayMetrics.xdpi != sMatchInfo.getAppXdpi()) {
displayMetrics.xdpi = sMatchInfo.getAppXdpi();
}
}
}
}
public static MatchInfo getMatchInfo() {
return sMatchInfo;
}
/**
* 使用 dp 作为适配单位(适合在新项目中使用,在老项目中使用会对原来既有的 dp 值产生影响)
* <br>
* <ul>
* dp 与 px 之间的换算:
* <li> px = density * dp </li>
* <li> density = dpi / 160 </li>
* <li> px = dp * (dpi / 160) </li>
* </ul>
*
* @param context context
* @param designSize 设计图的宽/高(单位: dp)
* @param base 适配基准
*/
private static void matchByDP(@NonNull final Context context, final float designSize, int base) {
final float targetDensity;
if (base == MATCH_BASE_WIDTH) {
targetDensity = sMatchInfo.getScreenWidth() * 1f / designSize;
} else if (base == MATCH_BASE_HEIGHT) {
targetDensity = sMatchInfo.getScreenHeight() * 1f / designSize;
} else {
// 默认取宽
targetDensity = sMatchInfo.getScreenWidth() * 1f / designSize;
}
final int targetDensityDpi = (int) (targetDensity * 160);
final float targetScaledDensity = targetDensity * (sMatchInfo.getAppScaledDensity() / sMatchInfo.getAppDensity());
final DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
displayMetrics.density = targetDensity;
displayMetrics.densityDpi = targetDensityDpi;
displayMetrics.scaledDensity = targetScaledDensity;
}
/**
* 使用 pt 作为适配单位(因为 pt 比较冷门,新老项目皆适合使用;也可作为 dp 适配的补充,
* 在需要同时适配宽度和高度时,使用 pt 来适配 dp 未适配的宽度或高度)
* <br/>
* <p> pt 转 px 算法: pt * metrics.xdpi * (1.0f/72) </p>
*
* @param context context
* @param designSize 设计图的宽/高(单位: pt)
* @param base 适配基准
*/
private static void matchByPT(@NonNull final Context context, final float designSize, int base) {
final float targetXdpi;
if (base == MATCH_BASE_WIDTH) {
targetXdpi = sMatchInfo.getScreenWidth() * 72f / designSize;
} else if (base == MATCH_BASE_HEIGHT) {
targetXdpi = sMatchInfo.getScreenHeight() * 72f / designSize;
} else {
targetXdpi = sMatchInfo.getScreenWidth() * 72f / designSize;
}
final DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
displayMetrics.xdpi = targetXdpi;
}
/**
* 适配信息静态类, 属性获取完之后不会被改变
*/
public static class MatchInfo {
// 屏幕宽度,单位 px
private int screenWidth;
// 屏幕高度,单位 px
private int screenHeight;
// 设备的像素密度
private float appDensity;
// 设备的 dpi,每英寸的像素点
private float appDensityDpi;
// 字体缩放后的像素密度
private float appScaledDensity;
// X 轴精确的 dpi
private float appXdpi;
// y 轴精确的 dpi
private float appYdpi;
public int getScreenWidth() {
return screenWidth;
}
public void setScreenWidth(int screenWidth) {
this.screenWidth = screenWidth;
}
public int getScreenHeight() {
return screenHeight;
}
public void setScreenHeight(int screenHeight) {
this.screenHeight = screenHeight;
}
public float getAppDensity() {
return appDensity;
}
public void setAppDensity(float appDensity) {
this.appDensity = appDensity;
}
public float getAppDensityDpi() {
return appDensityDpi;
}
public void setAppDensityDpi(float appDensityDpi) {
this.appDensityDpi = appDensityDpi;
}
public float getAppScaledDensity() {
return appScaledDensity;
}
public void setAppScaledDensity(float appScaledDensity) {
this.appScaledDensity = appScaledDensity;
}
public float getAppXdpi() {
return appXdpi;
}
public void setAppXdpi(float appXdpi) {
this.appXdpi = appXdpi;
}
public float getAppYdpi() {
return appYdpi;
}
public void setAppYdpi(float appYdpi) {
this.appYdpi = appYdpi;
}
}
}
3.2 使用方法
整个应用程序都适配:
在 application 的 onCreate() 中
ScreenAdapter.init(context);
ScreenAdapter.register(context, 1080, ScreenAdapter.MATCH_BASE_WIDTH, ScreenAdapter.MATCH_UNIT_DP);
若要取消适配
unregister(context, ScreenAdapter.MATCH_BASE_WIDTH);
单个 activity 适配:
在 application 的 onCreate() 中
ScreenAdapter.init(context);
在 activity 的 onCreate() 方法中
ScreenAdapter.match(context, 1080, ScreenAdapter.MATCH_BASE_WIDTH, ScreenAdapter.MATCH_UNIT_DP);
若要取消适配
ScreenAdapter.cancelMatch(context);
获取设备信息类:
ScreenAdapter.getMatchInfo();