Android QMUI實戰：實作APP換膚功能，并自動適配手機深色模式-有解無憂

Android換膚功能已不是什么新鮮事了，市面上有很多第三方的換膚庫和實作方案，
之所以選擇騰訊的QMUI庫來演示APP的換膚功能，主要原因：
1、換膚功能的實作程序較簡單、容易理解；
2、能輕松適配Android 10 提供的Dark Mode（深色模式）；
3、還能白嫖QMUI的各種組件、效果（這才是重要的，??哈哈~）；

1、換膚流程實作：

1.1、新建工程

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

implementation 'com.qmuiteam:qmui:2.0.0-alpha10'

1.2、定義 attr 以及其實作 style（重點）

這一步需要我們與設計師協作，整理一套顏色、背景資源等供 App 使用，之后我們在 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 尋找其值時，如果在 app_skin_1 沒找到，那么它就會去 AppTheme 尋找，因此我們可以把 App 的 theme 作為我們的一個 skin，其它 skin 都繼承自這個 skin，

1.3 自定義換膚管理類

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

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

package com.citicbank.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、自定義皮膚保存類

當我們切換皮膚后，需要將切換后的皮膚資訊保存起來，當下次啟動APP時，直接加載我們切換后的皮膚，

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

package com.citicbank.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，實作該功能，

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

package com.citicbank.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

基本作業已準備完畢，接下來我們實作定義的換膚效果，
修改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>

注意：要想實作換膚，我們設定控制元件顏色時，要使用QMUI提供的換膚屬性：

app:qmui_skin_xxx

QMUI官網已提供了以下換膚屬性，供我們使用，能滿足常規的開發需要，如下圖所示：

下面，我們來撰寫Activity代碼，
在 Activity中，我們需要對QMUISkinManager進行注冊，該Activity才能享用換膚功能（注意：在實際開發中，如果APP所有的頁面都要支持換膚，那么我們盡量將QMUISkinManager的注冊寫在BaseActivity中），

有兩種方案，實作注冊：

方案1：

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

方案2（為了讓大家明白如何注冊，我們選擇這種方案，不用擔心，其實很簡單）：

我們自己實作QMUISkinManager的注冊、取消注冊

package com.citicbank.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();
        //注冊QDSkinManager
        if(skinManager != null){
            skinManager.register(this);
        }
    }

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

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

至此，編碼結束了，

2、知識拓展

QMUI 換膚提供的 API：

2.1、QMUISkinManager: 存盤膚色配置，并且派發當前膚色給它管理的Activity、Fragment、Dialog、PopupWindow， 它通過 QMUISkinManager.of(name, context) 獲取，是可以多實體的， 因而一個 App 可以在不同場景執行不同的換膚管理， 例如閱讀產品閱讀器的換膚和其它業務模塊 uiMode 切換的區分管理，
2.2、QMUISkinValueBuilder: 用于構建一個 View 實體的換膚配置（textColor、background、border、separator等）
2.3、QMUISkinHelper: 一些輔助工具方法，最常用的為 QMUISkinHelper.setSkinValue(View, QMUISkinValueBuilder)，將 QMUISkinValueBuilder 的配置應用到一個 View 實體， 如果使用 kotlin 語言，可以通過 View.skin { ... } 來配置 View 實體，
2.4、QMUISkinLayoutInflaterFactory: 用于支持 xml 換膚配置項決議，
2.5、IQMUISkinDispatchInterceptor: View 可以通過實作它，來攔截 skin 更改的派發，
2.6、IQMUISkinHandlerView: View 可以通過實作它，來完全自定義不同 skin 的處理，
2.7、IQMUISkinDefaultAttrProvider: View 可以通過實作它， 提供 View 默認的默認換膚配置，從組件層面提供換膚支持，

更多內容，可以參考官方檔案：
https://github.com/tencent/qmui_android/wiki/qmui-換膚

3、案例原始碼

鏈接: https://pan.baidu.com/s/17iXCB4qR3-Gm2R-bIVXWlg
提取碼: zpgv

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/320957.html

標籤：其他

上一篇：運動與資料的碰撞，華為分析運動健康行業模板上線

下一篇：Jetpack學習之ViewModel、Lifecycles、LiveData