[轉(zhuǎn)]Android換膚功能，并自動(dòng)適配手機(jī)深色模式

針對(duì)Android程序的界面變更需求，在布局相同的情況下更換顏色、圖片、自定義drawable資源等等，使用換膚框架（Android-skin-suport）可以帶來很多便利。

換膚操作總結(jié)來說就是對(duì)布局引用的資源文件進(jìn)行替換。

對(duì)于傳統(tǒng)換膚，無論是setTeme()方法，或者修改布局引用等操作，都需要在項(xiàng)目中的res文件夾中添加替換的資源文件，并且對(duì)源代碼需要做一定程度上的修改，使得在后續(xù)開發(fā)和維護(hù)上會(huì)造成一定的影響，并且在換膚過程中可能需要重啟App才能到達(dá)換膚的效果。這顯然超出了換膚這一功能的需求。

換膚框架（Android-skin-suppo）能做到的是選擇皮膚包進(jìn)行資源替換，皮膚包存放在assets資源文件夾中，區(qū)別于res可以讓源程序保持簡(jiǎn)潔。使用框架基本上不需要修改源程序中的界面布局，框架會(huì)幫助我們選擇皮膚包中同名稱的引用資源且不需要重啟App。

Git地址：https://github.com/ximsfei/Android-skin-support

下面是騰訊的QMUI庫的換膚功能，供參考
1、換膚功能的實(shí)現(xiàn)過程較簡(jiǎn)單、容易理解；
2、能輕松適配Android 10 提供的Dark Mode（深色模式） ；
3、還能白嫖QMUI的各種組件、效果（這才是重要的，??哈哈~）；

1、換膚流程實(shí)現(xiàn)：

1.1、新建工程

通過AndroidStudio新建一個(gè)空工程（新建工程的過程，略），并添加QMUI依賴：

implementation ‘com.qmuiteam:qmui:2.0.0-alpha10’

1.2、定義 attr 以及其實(shí)現(xiàn) style（重點(diǎn)）

這一步需要我們與設(shè)計(jì)師協(xié)作，整理一套顏色、背景資源等供 App 使用。之后我們?cè)?xml 里以 attr 的形式給它命名，本工程案例：

src/main/res/values/styles.xml:

<resources>
        <attr name="colorPrimary" format="color" />
        <attr name="colorBg1" format="color" />
        <attr name="colorBg2" format="color" />
        <attr name="colorBg3" format="color" />
        <attr name="colorTextWhite" format="color" />

        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <item name="colorPrimary">@color/colorPrimaryDefault</item>
            <item name="colorBg1">@color/colorBgDefault1</item>
            <item name="colorBg2">@color/colorBgDefault2</item>
            <item name="colorBg3">@color/colorBgDefault3</item>
            <item name="colorTextWhite">@color/colorTextWhite</item>
        </style>

        <style name="app_skin_1" parent="AppTheme">
            <item name="colorPrimary">@color/colorPrimarySkin1</item>
            <item name="colorBg1">@color/colorBgDefault1Skin1</item>
            <item name="colorBg2">@color/colorBgDefault1Skin2</item>
            <item name="colorBg3">@color/colorBgDefault1Skin3</item>
        </style>

        <style name="app_skin_2" parent="AppTheme">
            <item name="colorPrimary">@color/colorPrimarySkin2</item>
            <item name="colorBg1">@color/colorBgDefault2Skin1</item>
            <item name="colorBg2">@color/colorBgDefault2Skin2</item>
            <item name="colorBg3">@color/colorBgDefault2Skin3</item>
        </style>
    </resources>

src/main/res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimaryDefault">#FCE4EC</color>
        <color name="colorBgDefault1">#F06292</color>
        <color name="colorBgDefault2">#EC407A</color>
        <color name="colorBgDefault3">#880E4F</color>
        <color name="colorTextWhite">#FFFFFF</color>

        <color name="colorPrimarySkin1">#E3F2FD</color>
        <color name="colorBgDefault1Skin1">#90CAF9</color>
        <color name="colorBgDefault1Skin2">#42A5F5</color>
        <color name="colorBgDefault1Skin3">#0D47A1</color>

        <color name="colorPrimarySkin2">#FAFAFA</color>
        <color name="colorBgDefault2Skin1">#757575</color>
        <color name="colorBgDefault2Skin2">#424242</color>
        <color name="colorBgDefault2Skin3">#212121</color>
    </resources>

style 是支持繼承的， 以上述為例，app_skin_1 繼承自 AppTheme, 在通過 attr 尋找其值時(shí)，如果在 app_skin_1 沒找到，那么它就會(huì)去 AppTheme 尋找。因此我們可以把 App 的 theme 作為我們的一個(gè) skin， 其它 skin 都繼承自這個(gè) skin。

1.3 自定義換膚管理類

APP的不同皮膚、顏色已定義好，我們需要定義一個(gè)類，與QMUI對(duì)接，用于管理這些皮膚，代碼功能包含：皮膚的加載、切換等操作。

src/main/java/com/qxc/testandroid/QDSkinManager.java:

package com.qxc.testandroid;

    import android.content.Context;
    import android.content.res.Configuration;

    import com.qmuiteam.qmui.skin.QMUISkinManager;

    public class QDSkinManager {
        public static final int SKIN_DEFAULT = 1;
        public static final int SKIN_1 = 2;
        public static final int SKIN_2 = 3;

        public static void install(Context context) {
            QMUISkinManager skinManager = QMUISkinManager.defaultInstance(context);
            skinManager.addSkin(SKIN_DEFAULT, R.style.AppTheme);
            skinManager.addSkin(SKIN_1, R.style.app_skin_1);
            skinManager.addSkin(SKIN_2, R.style.app_skin_2);

            boolean isDarkMode = (context.getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES;
            int storeSkinIndex = QDPreferenceManager.getInstance(context).getSkinIndex();
            if (isDarkMode && storeSkinIndex != SKIN_2) {
                skinManager.changeSkin(SKIN_2);
            } else if (!isDarkMode && storeSkinIndex == SKIN_1) {
                skinManager.changeSkin(SKIN_1);
            }else{
                skinManager.changeSkin(storeSkinIndex);
            }
        }

        public static void changeSkin(int index) {
            QMUISkinManager.defaultInstance(QDApplication.getContext()).changeSkin(index);
            QDPreferenceManager.getInstance(QDApplication.getContext()).setSkinIndex(index);
        }

        public static int getCurrentSkin() {
            return QMUISkinManager.defaultInstance(QDApplication.getContext()).getCurrentSkin();
        }
    }

1.4、自定義皮膚保存類

當(dāng)我們切換皮膚后，需要將切換后的皮膚信息保存起來，當(dāng)下次啟動(dòng)APP時(shí)，直接加載我們切換后的皮膚。

src/main/java/com/qxc/testandroid/QDPreferenceManager.java:

package com.qxc.testandroid;

    import android.content.Context;
    import android.content.SharedPreferences;
    import android.preference.PreferenceManager;

    public class QDPreferenceManager {
        private static SharedPreferences sPreferences;
        private static QDPreferenceManager sQDPreferenceManager = null;

        private static final String APP_VERSION_CODE = "app_version_code";
        private static final String APP_SKIN_INDEX = "app_skin_index";

        private QDPreferenceManager(Context context) {
            sPreferences = PreferenceManager.getDefaultSharedPreferences(context.getApplicationContext());
        }

        public static final QDPreferenceManager getInstance(Context context) {
            if (sQDPreferenceManager == null) {
                sQDPreferenceManager = new QDPreferenceManager(context);
            }
            return sQDPreferenceManager;
        }

        public void setAppVersionCode(int code) {
            final SharedPreferences.Editor editor = sPreferences.edit();
            editor.putInt(APP_VERSION_CODE, code);
            editor.apply();
        }

        public void setSkinIndex(int index) {
            SharedPreferences.Editor editor = sPreferences.edit();
            editor.putInt(APP_SKIN_INDEX, index);
            editor.apply();
        }

        public int getSkinIndex() {
            return sPreferences.getInt(APP_SKIN_INDEX, QDSkinManager.SKIN_DEFAULT);
        }
    }

1.5、APP加載QDSkinManager并適配深色模式

該工作僅需做一次即可，建議：自定義Application，實(shí)現(xiàn)該功能。

src/main/java/com/qxc/testandroid/QDApplication.java：

package com.qxc.testandroid;

    import android.annotation.SuppressLint;
    import android.app.Application;
    import android.content.Context;
    import android.content.res.Configuration;

    import androidx.annotation.NonNull;

    public class QDApplication extends Application {

        @SuppressLint("StaticFieldLeak")
        private static Context context;

        public static Context getContext() {
            return context;
        }

        @Override
        public void onCreate() {
            super.onCreate();
            context = getApplicationContext();
            QDSkinManager.install(this);
        }

        @Override
        public void onConfigurationChanged(@NonNull Configuration newConfig) {
            super.onConfigurationChanged(newConfig);
            //適配 Dark Mode
            if ((newConfig.uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES) {
                QDSkinManager.changeSkin(QDSkinManager.SKIN_2);
            } else if (QDSkinManager.getCurrentSkin() == QDSkinManager.SKIN_2) {
                QDSkinManager.changeSkin(QDSkinManager.SKIN_DEFAULT);
            }
        }
    }

別忘了在AndroidManifest.xml中指定一下我們自定義的Application類：

<application
            android:name=".QDApplication"
            ......

1.6、開始編寫Activity

基本工作已準(zhǔn)備完畢，接下來我們實(shí)現(xiàn)定義的換膚效果。
修改MainActivity的布局文件，編寫我們的UI布局：

src/main/res/layout/activity_main.xml：

<?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"
        app:qmui_skin_background="?attr/colorPrimary"
        tools:context=".MainActivity">

        <RelativeLayout
            android:id="@+id/v1"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:qmui_skin_background="?attr/colorBg2" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:textSize="16sp"
                android:text="Title Bar"
                app:qmui_skin_text_color="?attr/colorTextWhite"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/v2"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_below="@id/v1"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            app:qmui_skin_background="?attr/colorBg1" />

        <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
            android:id="@+id/btn"
            android:layout_marginTop="10dp"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_below="@id/v2"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            app:qmui_radius="10dp"
            app:qmui_skin_background="?attr/colorBg3"
            app:qmui_skin_text_color="?attr/colorTextWhite"
            app:qmui_skin_border="?attr/colorBg2"
            android:text="change skin" />
    </RelativeLayout>

注意：要想實(shí)現(xiàn)換膚，我們?cè)O(shè)置控件顏色時(shí)，要使用QMUI提供的換膚屬性：

app:qmui_skin_xxx
1
QMUI官網(wǎng)已提供了以下?lián)Q膚屬性，供我們使用，能滿足常規(guī)的開發(fā)需要，如下圖所示：

下面，我們來編寫Activity代碼。
在 Activity中，我們需要對(duì)QMUISkinManager進(jìn)行注冊(cè)，該Activity才能享用換膚功能（注意：在實(shí)際開發(fā)中，如果APP所有的頁面都要支持換膚，那么我們盡量將QMUISkinManager的注冊(cè)寫在BaseActivity中）。

有兩種方案，實(shí)現(xiàn)注冊(cè)：

方案1：

我們可以Activity類繼承 QMUIFragmentActivity 或者 QMUIActivity ，從而默認(rèn)注入了 QMUISkinManager

方案2（為了讓大家明白如何注冊(cè)，我們選擇這種方案。不用擔(dān)心，其實(shí)很簡(jiǎn)單）：

我們自己實(shí)現(xiàn)QMUISkinManager的注冊(cè)、取消注冊(cè)

package com.qxc.testandroid;

    import android.app.Activity;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.widget.Button;

    import androidx.core.view.LayoutInflaterCompat;

    import com.qmuiteam.qmui.skin.QMUISkinLayoutInflaterFactory;
    import com.qmuiteam.qmui.skin.QMUISkinManager;

    public class MainActivity extends Activity {
        private QMUISkinManager skinManager;
        private Button btn;
        private int skinIndex;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            // 使用 QMUISkinLayoutInflaterFactory
            LayoutInflater layoutInflater = LayoutInflater.from(this);
            LayoutInflaterCompat.setFactory2(layoutInflater, new QMUISkinLayoutInflaterFactory(this, layoutInflater));

            super.onCreate(savedInstanceState);

            // 注入 QMUISkinManager
            skinManager = QMUISkinManager.defaultInstance(this);

            setContentView(R.layout.activity_main);

            initView();
            initEvent();
        }

        private void initView(){
            btn = findViewById(R.id.btn);
        }

        private void initEvent(){
            //換膚操作
            skinIndex = QDSkinManager.SKIN_DEFAULT;
            btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(skinIndex + 1 > 3){
                        skinIndex = 0;
                    }
                    skinIndex += 1;
                    QDSkinManager.changeSkin(skinIndex);
                }
            });
        }

        @Override
        protected void onPause() {
            super.onPause();
        }

        @Override
        public void onStart() {
            super.onStart();
            //注冊(cè)QDSkinManager
            if(skinManager != null){
                skinManager.register(this);
            }
        }

        @Override
        protected void onStop() {
            super.onStop();
            //取消注冊(cè)QDSkinManager
            if(skinManager != null){
                skinManager.unRegister(this);
            }
        }
        @Override
        protected void onResume() {
            super.onResume();
        }

        @Override
        protected void onDestroy() {
            super.onDestroy();
        }
    }

至此，編碼結(jié)束了。

2、知識(shí)拓展

QMUI 換膚提供的 API：

QMUISkinManager: 存儲(chǔ)膚色配置，并且派發(fā)當(dāng)前膚色給它管理的Activity、Fragment、Dialog、PopupWindow。它通過 QMUISkinManager.of(name, context) 獲取，是可以多實(shí)例的。因而一個(gè) App 可以在不同場(chǎng)景執(zhí)行不同的換膚管理， 例如閱讀產(chǎn)品閱讀器的換膚和其它業(yè)務(wù)模塊 uiMode 切換的區(qū)分管理。
QMUISkinValueBuilder: 用于構(gòu)建一個(gè) View 實(shí)例的換膚配置（textColor、background、border、separator等）
QMUISkinHelper: 一些輔助工具方法，最常用的為 QMUISkinHelper.setSkinValue(View, QMUISkinValueBuilder)，將 QMUISkinValueBuilder 的配置應(yīng)用到一個(gè) View 實(shí)例。如果使用 kotlin 語言，可以通過 View.skin { … } 來配置 View 實(shí)例。
QMUISkinLayoutInflaterFactory: 用于支持 xml 換膚配置項(xiàng)解析。
IQMUISkinDispatchInterceptor: View 可以通過實(shí)現(xiàn)它，來攔截 skin 更改的派發(fā)。
IQMUISkinHandlerView: View 可以通過實(shí)現(xiàn)它，來完全自定義不同 skin 的處理。
IQMUISkinDefaultAttrProvider: View 可以通過實(shí)現(xiàn)它， 提供 View 默認(rèn)的默認(rèn)換膚配置，從組件層面提供換膚支持。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容