Android全面的屏幕適配方案解析(四)__今日頭條適配方案

之前三篇把屏幕適配概念梳理了還講解了列舉的其中四種適配方案,還沒有看過的童鞋可以先參考這三篇:
Android全面的屏幕適配方案解析(一)__屏幕適配概念梳理
Android全面的屏幕適配方案解析(二)__寬高限定符屏幕適配
Android全面的屏幕適配方案解析(三)__sw限定符適配方案
Android全面的屏幕適配方案解析(四)__今日頭條適配方案

下面列舉常用的適配方案:

  • dp適配方案
  • 寬高限定符適配方案
  • AndroidAutoLayout適配方案
  • sw限定符適配方案
  • 今日頭條適配方案
  • AndroidAutoSize適配方案

這裏還是有必要重申一下,有些過時的適配方案這裏還講解啊,只能說每種適配方案都會有各自的優缺點,從最原始的適配方案講起,才能更好的理解爲啥會衍生出各種適配方案,話不多說,下面繼續講解。

今日頭條適配方案

今日頭條適配方案原理解析

今日頭條適配方案原理在於通過公式density = 設備真實寬度(單位px)/設計圖總寬度(單位dp),在確保設計圖總寬度(單位dp)一定時,通過修改density值,確保所有不同尺寸分辨率設備計算出的真實寬度值正好是屏幕寬度,這樣就能達到適配所有設備的目的啦。

舉個例子:比如UI設計稿總寬度爲360dp,這裏有兩臺不同尺寸分辨率的設備:

設備1:分辨率1080x1920,dpi爲480,正常情況下計算density=dpi/160=480/160=3,此時屏幕總寬度dp=px/density=1080/3=360;

設備2:分辨率1440x2560,dpi爲560,正常情況下計算desity=dpi/160=560/160=3.5,此時屏幕總寬度dp=px/density=1440/3.5=411;

正常情況下density 在每個設備上都是固定的,那要是我們想確保設計稿總寬度360不變,再來看看density值:

設備1:分辨率1080x1920,dpi爲480,計算density = 設備真實寬度(單位px)/設計圖總寬度(單位dp) = 1080/360 = 3,此時屏幕總寬度dp=px/density=1080/3=360;

設備2:分辨率1440x2560,dpi爲560,計算density = 設備真實寬度(單位px)/設計圖總寬度(單位dp) = 1440/360 = 4,此時屏幕總寬度dp=px/density=1440/4=360;

通過對比可以看出,修改density值,確實是能確保不同分辨率設備總寬度值始終是360dp,這樣就能保證UI在不同的設備上顯示效果是一致的。

今日頭條適配方案推導過程

通過上面例子我們知道需要修改density值,那下面我們就來看看怎麼修改系統的density值:
首先我們得知道無論在佈局文件中填寫的是什麼樣單位的值,比如10dp、10sp、10px等等,最後都會被系統轉換成px,這個時候有童鞋就問了,你怎麼知道啊?當然是通過佈局文件中dp轉換源碼知道的啦。

通過源碼可以知道,dp轉換最終都是調用系統工具類Typedvalue類中的applyDimension方法進行轉換的:

      /**
     * @param unit 要轉換的單位
     * @param value 單位對應的值
     * @param metrics 顯示指標
     */
    public static float applyDimension(int unit, float value,DisplayMetrics metrics){
        switch (unit) {
        case COMPLEX_UNIT_PX://單位爲px
            return value;
        case COMPLEX_UNIT_DIP://單位爲dp
            return value * metrics.density;
        case COMPLEX_UNIT_SP://單位爲sp
            return value * metrics.scaledDensity;
        case COMPLEX_UNIT_PT://單位爲pt
            return value * metrics.xdpi * (1.0f/72);
        case COMPLEX_UNIT_IN://單位爲in
            return value * metrics.xdpi;
        case COMPLEX_UNIT_MM://單位爲mm
            return value * metrics.xdpi * (1.0f/25.4f);
        }
        return 0;
    }

系統就是通過上面的方法,將你在項目中任何地方填寫的單位都轉換爲px,在applyDimension方法中有個參數DisplayMetrics,我們來看看這個參數的含義:

 @param metrics Current display metrics to use in the conversion -- supplies display density and scaling information.

這句話的意思是轉換中使用的當前顯示指標,提供顯示密度和縮放信息。通過applyDimension方法中dp轉換:

public static float applyDimension(int unit, float value,DisplayMetrics metrics){
        switch (unit) {
        ......
        case COMPLEX_UNIT_DIP://單位爲dp
            return value * metrics.density;
        ......
    }

可以發現有我們需要的density值,通過Ctrl鍵追蹤位置發現這個值是系統工具類DisplayMetrics類的成員變量,如圖所示:

而DisplayMetrics實例可以通過系統資源文件Resources類中的getDisplayMetrics方法獲得,系統資源文件Resouces也可以通過Activity或者Application的Context獲得:

DisplayMetrics displayMetrics = this.getResources().getDisplayMetrics();

然後就可以通過DisplayMetrics實例,修改density值啦,這裏需要注意有個scaledDensity變量的影響,這個變量是字體的縮放因子,正常情況下和density相等,但是調節系統字體大小後會改變這個值,防止用戶調節了系統字體。

今日頭條適配的最終方案:

這裏是以設計圖總寬度360dp來適配,接下來只需要把我們計算好的 density 在系統中修改下即可,代碼實現如下:

    /**
     * 今日頭條適配方案
     *
     * @param activity
     * @param application
     */
    public static void setCustomDensity(Activity activity, final Application application) {
        //通過資源文件getResources類獲取DisplayMetrics
        DisplayMetrics appDisplayMetrics = application.getResources().getDisplayMetrics();
        if (sNoncompatDensity == 0) {
            //保存之前density值
            sNoncompatDensity = appDisplayMetrics.density;
            //保存之前scaledDensity值,scaledDensity爲字體的縮放因子,正常情況下和density相等,但是調節系統字體大小後會改變這個值
            sNoncompatScaledDensity = appDisplayMetrics.scaledDensity;
            //監聽設備系統字體切換
            application.registerComponentCallbacks(new ComponentCallbacks() {

                public void onConfigurationChanged(Configuration newConfig) {
                    if (newConfig != null && newConfig.fontScale > 0) {
                        //調節系統字體大小後改變的值
                        sNoncompatScaledDensity = application.getResources().getDisplayMetrics().scaledDensity;
                    }
                }

                public void onLowMemory() {

                }
            });
        }

        //獲取以設計圖總寬度360dp下的density值
        float targetDensity = appDisplayMetrics.widthPixels / 360;
        //通過計算之前scaledDensity和density的比獲得scaledDensity值
        float targetScaleDensity = targetDensity * (sNoncompatScaledDensity / sNoncompatDensity);
        //獲取以設計圖總寬度360dp下的dpi值
        int targetDensityDpi = (int) (160 * targetDensity);
        //設置系統density值
        appDisplayMetrics.density = targetDensity;
        //設置系統scaledDensity值
        appDisplayMetrics.scaledDensity = targetScaleDensity;
        //設置系統densityDpi值
        appDisplayMetrics.densityDpi = targetDensityDpi;

        //獲取當前activity的DisplayMetrics
        final DisplayMetrics activityDisplayMetrics = activity.getResources().getDisplayMetrics();
        //設置當前activity的density值
        activityDisplayMetrics.density = targetDensity;
        //設置當前activity的scaledDensity值
        activityDisplayMetrics.scaledDensity = targetScaleDensity;
        //設置當前activity的densityDpi值
        activityDisplayMetrics.densityDpi = targetDensityDpi;
    }

上面代碼是今日頭條的最終方案,爲了方便閱讀,我只是基於個人理解做了標註解析,不對的地方請大佬們指正。

今日頭條適配步驟:

下面來看驗證一下這種適配方案的可行性。

1、佈局文件,這裏沿用之前的佈局,只有一張寬高爲150x150(dp)的圖片,如下所示:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher" />

</RelativeLayout>

2、這裏將今日頭條適配方案封裝成了工具類,如下所示:

public class CustomDensityUtil {
    private static float sNoncompatDensity;
    private static float sNoncompatScaledDensity;

    /**
     * 今日頭條適配方案
     *
     * @param activity
     * @param application
     */
    public static void setCustomDensity(Activity activity, final Application application) {
        //通過資源文件getResources類獲取DisplayMetrics
        DisplayMetrics appDisplayMetrics = application.getResources().getDisplayMetrics();
        if (sNoncompatDensity == 0) {
            //保存之前density值
            sNoncompatDensity = appDisplayMetrics.density;
            //保存之前scaledDensity值,scaledDensity爲字體的縮放因子,正常情況下和density相等,但是調節系統字體大小後會改變這個值
            sNoncompatScaledDensity = appDisplayMetrics.scaledDensity;
            //監聽設備系統字體切換
            application.registerComponentCallbacks(new ComponentCallbacks() {

                public void onConfigurationChanged(Configuration newConfig) {
                    if (newConfig != null && newConfig.fontScale > 0) {
                        //調節系統字體大小後改變的值
                        sNoncompatScaledDensity = application.getResources().getDisplayMetrics().scaledDensity;
                    }
                }

                public void onLowMemory() {

                }
            });
        }

        //獲取以設計圖總寬度360dp下的density值
        float targetDensity = appDisplayMetrics.widthPixels / 360;
        //通過計算之前scaledDensity和density的比獲得scaledDensity值
        float targetScaleDensity = targetDensity * (sNoncompatScaledDensity / sNoncompatDensity);
        //獲取以設計圖總寬度360dp下的dpi值
        int targetDensityDpi = (int) (160 * targetDensity);
        //設置系統density值
        appDisplayMetrics.density = targetDensity;
        //設置系統scaledDensity值
        appDisplayMetrics.scaledDensity = targetScaleDensity;
        //設置系統densityDpi值
        appDisplayMetrics.densityDpi = targetDensityDpi;

        //獲取當前activity的DisplayMetrics
        final DisplayMetrics activityDisplayMetrics = activity.getResources().getDisplayMetrics();
        //設置當前activity的density值
        activityDisplayMetrics.density = targetDensity;
        //設置當前activity的scaledDensity值
        activityDisplayMetrics.scaledDensity = targetScaleDensity;
        //設置當前activity的densityDpi值
        activityDisplayMetrics.densityDpi = targetDensityDpi;
    }
}

3、在Activity中的onCreate方法中調用,如下所示:

CustomDensityUtil.setCustomDensity(MainActivity.this, getApplication());

到這裏就完成了,是不是挺簡單的呢,下面來看看在分辨率:480x800、720x1280、1080x1920的測試顯示效果圖:

再來看一下沒有使用今日頭條適配方案之前不同手機的測試對比效果:

根據適配前後的對比效果還是挺明顯的。

今日頭條適配方案優點

1、侵入性很低,而且沒有涉及私有API,該方案與項目完全解耦,今日頭條大廠在使用,穩定性有保證。

2、使用成本非常低,操作簡單方便。

3、接入沒有任何的性能損耗,使用的都是系統API。

今日頭條適配方案缺點

1、只需要修改一次 density,項目中的所有地方都會自動適配,這個看似解放了雙手,減少了很多操作,但是實際上反映了一個缺點,那就是隻能一刀切的將整個項目進行適配,但適配範圍是不可控的。比如項目中使用了第三方庫控件等不是我們項目自身設計的控件,這時就會出現和我們項目自身的設計圖尺寸差距非常大的問題。

2、使用過程中需要進行registerComponentCallbacks監聽內容文字的大小改變情況,解決退出應用修改文字大小後,會出現文字大小不改變的情況。

AndroidAutoSize適配方案

所謂的AndroidAutoSize適配方案其實就是今日頭條適配方案的升級版,是基於今日頭條適配方案進行拓展的開源庫,該庫在很大程度上解決了今日頭條適配方案的缺點,使用方式也比較簡單,只需要填寫設計圖尺寸這一步即可接入項目,還支持對Activity、Fragment進行取消適配,靈活性會更強。

下面還是根據實例來講解集成過程:

1、根目錄build.gradle添加:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

2、添加該適配框架依賴

 implementation 'com.github.JessYanCoding:AndroidAutoSize:v1.2.1'

3、在項目中的AndroidManifest配置文件註明設計稿的尺寸,這裏測試以360x640爲例:

<manifest>
    <application>            
        <meta-data
            android:name="design_width_in_dp"
            android:value="360"/>
        <meta-data
            android:name="design_height_in_dp"
            android:value="640"/>           
     </application>           
</manifest>

如果只是想使用AndroidAutoSize適配方案的基礎功能,AndroidAutoSize框架的使用方法在這裏就結束了,只需要上面這一步,即可幫助你以最簡單的方式接入AndroidAutoSize適配框架,我這裏只做適配方案有效性演示,需要拓展需求的請參考下面Github地址有詳細介紹。

4、測試佈局文件非常的簡單,只設置了圖片,爲了突出跟今日頭條適配方案測試結果不同,這裏設置圖片寬高爲120x120(dp),測試佈局如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher" />

</RelativeLayout>

我們來看看這個實例在不同手機的測試對比效果圖:

再來看一下沒有使用AndroidAutoSize適配方案之前不同手機的測試對比效果:

根據適配前後的對比效果還是挺明顯的,AndroidAutoSize適配方案是根據今日頭條屏幕適配方案官方公佈的 30 行不到的代碼,經過不斷的優化和擴展,發展成了現在擁有將近20個類文件,上千行代碼的全面性屏幕適配框架,在迭代的過程中完善和優化了很多功能,相比今日頭條屏幕適配方案官方公佈的原始代碼,AndroidAutoSize適配方案更加穩定、更加易用、更加強大,感興趣的可以去閱讀源碼,註釋非常詳細,這裏就不做過多的介紹啦,點擊進入源碼地址

以上六種適配方案就全部講解完了,適配框架因爲原作者已經講解的很清楚了,我這裏就只講解了基本用法,其它幾種都儘可能講解的詳細一點,我這裏講解並沒有說哪種方案更好或者更壞,每個項目的需求都不一樣,適合的纔是最好的。歡迎關注公衆號【龍旋】能獲取最新更新內容哦。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章