今日頭條螢幕適配方案落地研究

安卓開發 · 發表 2018-11-26 16:06:00

摘要：目錄前言大家好，現在給大家推薦一種極低版本的 Android 螢幕適配方案，就是今日頭條適配方案，“極低成本”這四個字正是今日頭條的適配文章標題。眾所周知，安卓的螢幕碎片化極其嚴重，適配一直是從事安卓開發人員十分頭疼的事情。前期，由於公司支援的平板款式單一，只需要做幾款平板的...

前言

大家好，現在給大家推薦一種極低版本的 Android 螢幕適配方案，就是今日頭條適配方案，“極低成本”這四個字正是今日頭條的適配文章標題。

眾所周知，安卓的螢幕碎片化極其嚴重，適配一直是從事安卓開發人員十分頭疼的事情。前期，由於公司支援的平板款式單一，只需要做幾款平板的適配即可，選用了 smalledtWidth(最小寬度)適配，但是這個方案在增加新螢幕時且原 dimens 檔案無法很好適配時，就需要增加新螢幕的最小寬度 dimens 檔案了，比較麻煩而且會增加專案大小(雖然只是幾個檔案)，而且這種螢幕適配極度依賴裝置的螢幕密度，叫density。為了講解更清楚，這裡需要引入幾個公式：

px = density * dp

dp : 安卓開發人員常常掛在嘴上的長度單位

px : 設計人員眼中的長度單位

density = dpi / 160

因此，px = dp * (dpi/160)

dpi : 根據螢幕真實解析度和尺寸計算得出

舉個例子：螢幕解析度為 1920 * 1080，螢幕尺寸為5寸(螢幕斜邊長度cm/0.3937), 則dpi = √(寬度²+ 高度²)/螢幕尺寸

因此，螢幕密度至關重要，螢幕密度怎麼來的？廠商寫入一個 system/build.prop 檔案，有時還會寫錯，就我們一款華為平板，獲取的螢幕密度是2，但是手工測量並按公式得到實際螢幕密度是1.56。導致我們的適配方案在那款平板就失效了。

本人一直在尋找可以一勞永逸的螢幕適配方案，今日頭條是選定基準解析度，基於裝置螢幕解析度計算出新的螢幕密度進行適配，保證所有裝置的顯示效果一致，完美避開上面那款裝置的問題。推薦給大家。

各平板資料比較

首先，我詳細記錄了公司主流裝置的引數，新方案肯定要對主流裝置都能完美適配，這才是入門門檻。

| 三星N5100-4.1| 三星p355c-6.0(基準) | 華為-8.0

---|---|---|---

真實寬度(px)| 800 | 768 | 1200

真實高度(px) | 1280 | 1024| 1852

原始 density | 1.33125 | 1.0 | 2.0(不準，實際1.56 )

new density | 1.04166 | - | 1.5625

new height(px) | 1066 | - | 1600

可以看到橫向是幾種裝置，豎向是一些引數，其中中英文混雜，這是為什麼呢？這是我故意的，中文是裝置原始引數，英文是根據今日頭條方案原理計算的。因為，今日頭條的目的是所有裝置的顯示效果一致。但是裝置的解析度是不同的，怎麼顯示一致呢？簡單述之，就是縮放，按寬度縮放的。可能有人會有疑問，縮放後的效果圖放不下，顯示不完整怎麼辦？

我們看看上面的資料，可以看到按照三星6.0基準進行縮放，效果圖在三星4.1這款裝置寬度上的顯示，是按768乘以new density ,也就是 1.04166 進行放大，不用按計算器了，就是800px，完美適配。那麼高度呢，1024 也乘以 new density，發現是1066px，比實際高度畫素值 1280px 小，不會出現顯示不全的現象。可能有人會問了，這不是多出來了麼，會不會留空白啊？對，好問題，所以合格的開發在豎向佈局上增加自適應權重，以應對這種情況。當然，橫向也需要考慮自適應權重。

同理，可得知效果圖在華為8.0裝置的寬度畫素是 1600px，也比實際裝置寬度 1852px 小，也能顯示完全。

為什麼看起來更小了？(頭條方案跟最小寬度方案比較)

對的，跟原先的比起來，是更小了，包括圖片更小，文字更小。這是為什麼呢？且聽我細細道來... ...

大家都知道，安卓有 mdpi、hdpi、xhdpi字尾的檔案，具體使用有 drawable-mdpi、drawable-hdpi，或者mipmap-mdpi、mipmap-hdpi, 又或者 values-mdpi、values-hdpi, 這些都是安卓自帶的螢幕適配方案，只是不太好用嗎，經常出問題。那麼，這些檔案都是怎麼使用的呢，這又涉及到了螢幕密度這個屬性，關聯如下：

dpi | 螢幕密度

---|---

drawable-ldpi | 0.75

drawable-mdpi | 1(baseline)

drawable-hdpi | 1.5

drawable-xhdpi | 2

drawable-xxhdpi | 3

drawable-xxxdpi | 4

平板A 三星平板5100 的螢幕密度是1.33125，大於mdpi，小於hdpi，向上取整，所以屬於hdpi
平板B 三星平板P355C 的螢幕密度是1，屬於mdpi
ldpi:mdpi:hdpi:xhdpi:xxhdpi:xxxdpi = 0.75:1:1.5:2:3:4 = 3:4:6:8:12:16
上述比值乘以12，就是 36：48：72：144：192，剛好就是icon尺寸
我們會看到，最小寬度適配方案，values-hdpi 的值是 values-mdpi 的值乘以 0.8

0.8 的引數

寬高100dp的正方形圖片，平板A會顯示100px,平板B會乘以1.5，顯示成150px，導致偏大
由於平板B的螢幕密度是 1.33125，最好顯示成 100* 1.33125
1.33125/ 1.5 = 0.8875 約為 0.8

sw600dp-dpi

sw : small width,就是最小寬度是600dp,
px -> dp ： dp = px / density
平板A: 800 /1.33125 = 600.93
平板B: 768/1 = 768
上述兩個平板，一個是600dp，一個是768dp,都是大於600dp,平板A使用sw600dp-hdpi,平板B使用sw600dp-mdpi

最後稱述

平板A、B 同時顯示一個 100px 的圖片：

按最小寬度適配：100 * 1.5 * 0.8 = 120 ，圖片會顯示成 120px
按今日頭條適配： 100 * 1.04166 = 104.166，圖片會顯示成 104.166 px
所以今日頭條方案顯示的圖片就更小了。

那麼，哪個更好呢？我們再來看看一個極端，顯示一個平板B 的填滿寬度的圖片， 768px：

按最小寬度適配：768px * 1.5 * 0.8 = 921.6px ，圖片會顯示成 921.6px, 遠遠超出平板A的尺寸，此時開發人員需要手動干預
按今日頭條適配： 768px * 1.04166 = 799.99488，圖片可以看成顯示成 800 px
優點很明顯，佈局更簡單

嚴謹的你，可能會問了，那顯示超過768px呢？

不好意思，我們的基準就是 768，不會超過他了。

smallesWidth 方案遷移

我們原專案使用的是 smallestWidth 方案，經試驗遷移代價很低，經研究有如下兩個方案。

刪除所有適配 smallestWidth 的dimens 資料夾,只保留dp 值是1：1 的 dimens 檔案即可；
不想刪除亦可，將所有的 dimens 檔案都覆蓋成 dp 值是1：1 的 dimens 檔案即可

優缺點

優點

使用成本非常低，操作非常簡單，使用該方案無需增加dimens 檔案，修改程式碼，完虐其他螢幕適配方案
侵入性非常低，切換幾乎瞬間完成，試錯成本接近為0
修改的 density 是全域性的，一次修改，終生受益。
不會有任何效能的損耗
今日頭條大廠保證

缺點
第三方佈局庫，未按專案效果圖佈局，全域性修改 density 導致修改第三方佈局，造成顯示介面問題
與 smallestwith 適配方案不相容，切換回來比較麻煩

issue

一個 Bitmap 的density 問題

在某處，開啟今日頭條適配方案，全域性修改螢幕密度，獲取 ImageView 的 Bitmap 的寬高，發現獲取的寬高和實際的寬高(佈局出來觀察)不一致。經查閱原始碼，發現 Bitmap 也有一個 density, 懷疑未被修改。

public int mDensity = getDefaultDensity();
... ...
static int getDefaultDensity() {
if (sDefaultDensity >= 0) {
return sDefaultDensity;
}
sDefaultDensity = DisplayMetrics.DENSITY_DEVICE;
return sDefaultDensity;
}

隨決定，修改 sDefaultDensity 值，查閱程式碼，發現 sDefaultDensity 是靜態私有，於是召喚反射大法

/**
* 設定 Bitmap 的預設螢幕密度
* 由於 Bitmap 的螢幕密度是讀取配置的，導致修改未被啟用
* 所有，放射方式強行修改
* @param defaultDensity 螢幕密度
*/
private static void setBitmapDefaultDensity(int defaultDensity) {
//獲取單個變數的值
Class clazz;
try {
clazz = Class.forName("android.graphics.Bitmap");
Field field = clazz.getDeclaredField("sDefaultDensity");
field.setAccessible(true);
field.set(null, defaultDensity);
field.setAccessible(false);
} catch (ClassNotFoundException e) {
} catch (NoSuchFieldException e) {
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}

測試 Ok, 收工。

附錄（適配核心程式碼）

initAppDensity 方法 Application 呼叫，記錄預設螢幕密度
setDefault 和 setOrientation 方法 Activity 呼叫，設定新的螢幕密度
resetAppOrientation 方法，恢復螢幕密度

// * ================================================
// * 本框架核心原理來自於 <a href="https://mp.weixin.qq.com/s/d9QCoBP6kV9VSWvVldVVwA">今日頭條官方適配方案</a>
// * <p>
// * 本框架原始碼的註釋都很詳細, 歡迎閱讀學習
// * <p>
// * 任何方案都不可能完美, 在成本和收益中做出取捨, 選擇出最適合自己的方案即可, 在沒有更好的方案出來之前, 只有繼續忍耐它的不完美, 或者自己作出改變
// * 既然選擇, 就不要抱怨, 感謝 今日頭條技術團隊 和 張鴻洋 等人對 Android 螢幕適配領域的的貢獻
// * <p>
// * ================================================
// */

private static final int WIDTH = 1;
private static final int HEIGHT = 2;
private static final float DEFAULT_WIDTH = 768f; //預設寬度
private static final float DEFAULT_HEIGHT = 1024f; //預設高度
private static float appDensity;
/**
* 字型的縮放因子，正常情況下和density相等，但是調節系統字型大小後會改變這個值
*/
private static float appScaledDensity;
/**
* 狀態列高度
*/
private static int barHeight;
private static DisplayMetrics appDisplayMetrics;
private static float densityScale = 1.0f;

/**
* application 層呼叫，儲存預設螢幕密度
*
* @param application application
*/
public static void initAppDensity(@NonNull final Application application) {
//獲取application的DisplayMetrics
appDisplayMetrics = application.getResources().getDisplayMetrics();
//獲取狀態列高度
barHeight = getStatusBarHeight(application);
if (appDensity == 0) {
//初始化的時候賦值
appDensity = appDisplayMetrics.density;
appScaledDensity = appDisplayMetrics.scaledDensity;

//新增字型變化的監聽
application.registerComponentCallbacks(new ComponentCallbacks() {
@Override
public void onConfigurationChanged(Configuration newConfig) {
//字型改變後,將appScaledDensity重新賦值
if (newConfig != null && newConfig.fontScale > 0) {
appScaledDensity = application.getResources().getDisplayMetrics().scaledDensity;
}
}

@Override
public void onLowMemory() {
}
});
}
}

/**
* 此方法在BaseActivity中做初始化(如果不封裝BaseActivity的話,直接用下面那個方法就好了)
*
* @param activity activity
*/
public static void setDefault(Activity activity) {
setAppOrientation(activity, WIDTH);
}

/**
* 比如頁面是上下滑動的，只需要保證在所有裝置中寬的維度上顯示一致即可，
* 再比如一個不支援上下滑動的頁面，那麼需要保證在高這個維度上都顯示一致
*
* @param activityactivity
* @param orientation WIDTH HEIGHT
*/
public static void setOrientation(Activity activity, int orientation) {
setAppOrientation(activity, orientation);
}

/**
* 重設螢幕密度
*
* @param activityactivity
* @param orientation WIDTH 寬，HEIGHT 高
*/
private static void setAppOrientation(@NonNull Activity activity, int orientation) {

float targetDensity;

if (orientation == HEIGHT) {
targetDensity = (appDisplayMetrics.heightPixels - barHeight) / DEFAULT_HEIGHT;
} else {
targetDensity = appDisplayMetrics.widthPixels / DEFAULT_WIDTH;
}

float targetScaledDensity = targetDensity * (appScaledDensity / appDensity);
int targetDensityDpi = (int) (160 * targetDensity);
// 最後在這裡將修改過後的值賦給系統引數,只修改Activity的density值
DisplayMetrics activityDisplayMetrics = activity.getResources().getDisplayMetrics();
activityDisplayMetrics.density = targetDensity;
activityDisplayMetrics.scaledDensity = targetScaledDensity;
activityDisplayMetrics.densityDpi = targetDensityDpi;

densityScale = appDensity / targetDensity;
setBitmapDefaultDensity(activityDisplayMetrics.densityDpi);
}


/**
* 重置螢幕密度
*
* @param activity activity
*/
public static void resetAppOrientation(@NonNull Activity activity) {
DisplayMetrics activityDisplayMetrics = activity.getResources().getDisplayMetrics();
activityDisplayMetrics.density = appDensity;
activityDisplayMetrics.scaledDensity = appScaledDensity;
activityDisplayMetrics.densityDpi = (int) (appDensity * 160);

densityScale = 1.0f;
setBitmapDefaultDensity(activityDisplayMetrics.densityDpi);
}

/**
* 獲取狀態列高度
*
* @param context context
* @return 狀態列高度
*/
private static int getStatusBarHeight(Context context) {
int result = 0;
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = context.getResources().getDimensionPixelSize(resourceId);
}
return result;
}

/**
* 設定 Bitmap 的預設螢幕密度
* 由於 Bitmap 的螢幕密度是讀取配置的，導致修改未被啟用
* 所有，放射方式強行修改
* @param defaultDensity 螢幕密度
*/
private static void setBitmapDefaultDensity(int defaultDensity) {
//獲取單個變數的值
Class clazz;
try {
clazz = Class.forName("android.graphics.Bitmap");
Field field = clazz.getDeclaredField("sDefaultDensity");
field.setAccessible(true);
field.set(null, defaultDensity);
field.setAccessible(false);
} catch (ClassNotFoundException e) {
} catch (NoSuchFieldException e) {
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}


/**
* 螢幕密度縮放係數
*
* @return 螢幕密度縮放係數
*/
public static float getDensityScale() {
return densityScale;
}