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

来源:https://www.cnblogs.com/haichao/archive/2018/11/26/10020893.html
-Advertisement-
Play Games

[toc] 前言 大家好，現在給大家推薦一種極低版本的 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

  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;
    }

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何定位“Operating system error 32(failed to retrieve text for this error. Reason: 15105)”錯誤中被占用的文件
    之前在這篇“Operating system error 32(failed to retrieve text for this error. Reason: 15105)”博客裡面，介紹了因為AWS的DMS的相關會話進程在讀取事務日誌備份中內容（跟普通的Replication有點不同），導致事務日... ...
  • 2018-11-26 BIG DATA ANALYSIS
    ...
  • 一個特殊的SQL Server阻塞案例分析
    上周，在SQL Server資料庫下麵遇到了一個有意思的SQL阻塞（SQL Blocking）案例。其實個人對SQL Server的阻塞還是頗有研究的。寫過好幾篇相關文章。 至於這裡為什麼要總結一下這個案例，因為這個案例有點意思： 1：使用DMV視圖捕獲到的Blocking SQL為一個查詢語句（這... ...
  • 大數據入門怎麼學習好
    數據科學並沒有一個獨立的學科體系，統計學，機器學習，數據挖掘，資料庫，分散式計算，雲計算，信息可視化等技術或方法來對付數據。但從狹義上來看，我認為數據科學就是解決三個問題：1. data pre-processing;(數據預處理）2. data interpretation；（數據解讀）3.dat ...
  • Innodb和Mysiam引擎的區別
    一：區別 Mysiam: 1.是非事務安全型。 2.是表級鎖。 3.如果執行大量的select，Mysiam是更好的選擇。 4.select count（*）from table。Mysiam只簡單的讀取保存好的行。註意：count（*）語句包含where條件時，兩種表操作一樣。 5.不支持外鍵。 ...
  • SQLServer之鎖簡介
    鎖定義（Definition） 鎖定是 DBMS 將訪問限製為多用戶環境中的行的過程。 以獨占方式鎖定行或列，不允許其他用戶訪問鎖定的數據，直到鎖被釋放。 這可確保兩個用戶不能同時更新行中的同一列。 鎖會從資源角度來看很高，應僅在需要時保持數據完整性。 在資料庫中的數百或數千個用戶可能會嘗試訪問的記 ...
  • OpenGL 球體世界
    一、類似公自轉 二、核心代碼 //圖形渲染 //圖形定位 三、效果 GitHub ...
  • iOS pthread
    pthread 是屬於 POSIX 多線程開發框架 創建線程的方法：pthread_create 參數含義: 1.指向線程代號的指針 2.線程的屬性 3.指向函數的指針 4.傳遞給該函數的參數 返回值 - 如果是0,標示正確 - 如果非0,標示錯誤代碼 void * (*) (void *) 返回值 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類