1. 程式人生 > >今日頭條螢幕適配方案落地研究

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

目錄

前言

大家好,現在給大家推薦一種極低版本的 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

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

0.8 的引數

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

sw600dp-dpi

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

最後稱述

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

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

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

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

嚴謹的你,可能會問了,那顯示超過768px呢?
不好意思,我們的基準就是 768,不會超過他了。

smallesWidth 方案遷移

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

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

優缺點

優點

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

    缺點

  6. 第三方佈局庫, 未按專案效果圖佈局,全域性修改 density 導致修改第三方佈局,造成顯示介面問題
  7. 與 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 activity    activity
     * @param orientation WIDTH HEIGHT
     */
    public static void setOrientation(Activity activity, int orientation) {
        setAppOrientation(activity, orientation);
    }

    /**
     * 重設螢幕密度
     *
     * @param activity    activity
     * @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;
    }

相關推薦

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

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

今日頭條螢幕方案終極版正式釋出!

以下是 騷年你的螢幕適配方式該升級了! 系列文章,歡迎轉發以及分享: 前言 我在前面兩篇文章中詳細介紹了 今日頭條適配方案 和 SmallestWidth 限定符適配方案 的原理,並驗證了它們的可行性,以及總結了它們各自的優缺點,可以說這兩個方案都是目前比較

今日頭條螢幕方案終極版正式釋出!(轉)

AndroidAutoSize 在使用上非常簡單,只需要填寫設計圖尺寸這一步即可接入專案,但需要注意的是,AndroidAutoSize 有兩種型別的佈局單位可以選擇,一個是 主單位 (dp、sp),一個是 副單位 (pt、in、mm),兩種單位面向的應用場景

今日頭條螢幕方案

import android.app.Activity; import android.app.Application; import android.content.ComponentCallbacks; import android.content.res.Configu

Android螢幕框架-(今日頭條終極方案)

在Android開發中,螢幕適配是一個非常頭痛的問題,因而為了去進行螢幕適配,作為

安卓螢幕方案(根據今日頭條方案,升級版)

前言 螢幕適配方案有很多,比如原生的dp,鴻洋大神的AutoLayout,寬高限定符,今天我用缺點比較小的今日頭條方案 使用效果 測試後可以適配我身邊的

螢幕方案

使用 直接在Application的onCreate方法中呼叫(Density類直接參照附錄) Density.setDensity(this, 375f); 這個地方我們需要注意375f這個引數,針對這個引數,我們來好好說說。 375這個值是一個UI圖的參照值,單位是dp,我參照

Android螢幕方案

目錄介紹 1.螢幕適配定義 2.相關重要的概念 2.1 螢幕尺寸[物理尺寸] 2.2 螢幕解析度[px] 2.3 螢幕畫素密度[dpi] 2.4 dp、dip、dpi、sp、px 2.5 mdpi、hdpi、xdpi、xxdpi 2.6 獲取螢幕解析度[寬

Android 螢幕方案

前言 本文為自身的總結與結合其他文章引用而成,分別為: wangwangli6: Android開發:最全面、最易懂的Android螢幕適配解決方案 https://blog.csdn.net/wangwangli6/article/details/6

Unity2D多解析度螢幕方案

文章為轉載,轉載地址:http://www.cnblogs.com/flyFreeZn/p/4073655.html     此文將闡述一種簡單有效的Unity2D多解析度螢幕適配方案,該方案適用於基於原生開發的Unity2D遊戲,即沒有使用第三方2D外掛,如Uni2D,2D too

完美的響應式佈局vw+vh+rem螢幕方案

一、前言 根據前面寫的  你不知道的CSS單位,進行了一種響應式佈局的思考。   視口布局的優點:寬度和高度全部自動適應!再加上rem佈局的字型適應,可以完美解決各種螢幕適配問題! 該佈局相容性如下: IE Firefox Chrome Safa

移動端H5開發的螢幕方案

移動端螢幕的幾個概念 1、什麼是dpr? dpr: device pixel ratio 設定畫素比 —— dpr=物理畫素/裝置獨立畫素。 設定獨立畫素:密度無關畫素,個人理解:裝置的實際螢幕大小 物理畫素:裝置畫

仿京東app 螢幕方案

JD-Test 仿京東app 採用元件化架構 螢幕適配方案可以較好解決多解析度及同分辨率不同dpi適配; 宣告 : 本專案資源採用抓包獲取,僅供學習交流使用 。 apk安裝 : Specs   本專案為仿京東專案,資源為抓包獲取,專案框架採用路由框架

移動端web螢幕方案整理

網上關於移動端web適配的問題已經有很多很好的文章了,做一個簡單的整理。 常用viewport屬性 1、width 常用設定width=device-width,視口寬度等於螢幕寬度 2、initial-scale、maximum-scale、m

! Android最強螢幕方案對比解析

注: 本文已整理成部落格,見: https://blog.csdn.net/u011200604/article/details/84990040 注: 本文最終方案推薦源於JessYanCoding/AndroidAutoSize 的開源庫(詳見GitHub) 在A

Android開發螢幕方案

  由於Android系統的開放性,任何使用者、開發者、硬體廠商和運營商都可以對Android系統和硬體進行定製,修改成他們自己所需要的樣子。使得隨著Android裝置的增多,裝置碎片化、系統碎片化、螢幕尺寸碎片化和螢幕碎片化的程度也在不斷加深; 這種碎片化達

最全的螢幕方案

使用 直接在Application的onCreate方法中呼叫(Density類直接參照附錄) Density.setDensity(this, 375f); 這個地方我們需要注意375f這個引數,針對這個引數,我們來好好說說。 375這個值是一個U

使用smallestWidth螢幕方案的過程

今天看了拉丁吳寫的有關於螢幕適配的方案:Android 目前最穩定和高效的UI適配方案。看完文章也還沒完全理解螢幕適配,但讓我對螢幕適配有了一定的瞭解。下載了文章中提到的用於生成smallestWidth適配的dimen程式碼的Java專案Java專案連結。 下載解壓後的檔

Android 螢幕方案,自動生成不同解析度的值

1、概述 大家在Android開發時,肯定會覺得螢幕適配是個尤其痛苦的事,各種螢幕尺寸適配起來蛋疼無比。如果我們換個角度我們看下這個問題,不知道大家有沒有了解過web前端開發,或者說大家對於網頁都不陌生吧,其實適配的問題在web頁面的設計中理論上也存在,為什麼這麼說呢

一種粗暴快速的Android全螢幕方案

熱文導讀 | 點選標題閱讀作者:firedamp來源:http://www.apkbus.com