騰訊QMUI實(shí)戰(zhàn)：實(shí)現(xiàn)APP換膚功能，并自動(dòng)適配手機(jī)深色模式
?BATcoder技術(shù)群，讓一部分人先進(jìn)大廠
大家好，我是劉望舒，騰訊TVP，著有三本業(yè)內(nèi)知名暢銷書，連續(xù)四年蟬聯(lián)電子工業(yè)出版社年度優(yōu)秀作者，百度百科收錄的資深技術(shù)專家。
前華為架構(gòu)師，現(xiàn)獨(dú)角獸技術(shù)負(fù)責(zé)人
想要加入?BATcoder技術(shù)群，公號(hào)回復(fù)BAT?即可。
作者:Android、Unity3d
來(lái)源:https://www.cnblogs.com/qixingchao/p/15417834.html
Android換膚功能已不是什么新鮮事了，市面上有很多第三方的換膚庫(kù)和實(shí)現(xiàn)方案。
之所以選擇騰訊的QMUI庫(kù)來(lái)演示APP的換膚功能，主要原因：
1、換膚功能的實(shí)現(xiàn)過(guò)程較簡(jiǎn)單、容易理解；
2、能輕松適配Android 10 提供的Dark Mode（深色模式） ；
3、還能白嫖QMUI的各種組件、效果（這才是重要的，??哈哈~）；
1、換膚流程實(shí)現(xiàn)：
1.1、新建工程
通過(guò)AndroidStudio新建一個(gè)空工程（新建工程的過(guò)程，略），并添加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:
????????"colorPrimary"?format="color"?/>
????????"colorBg1"?format="color"?/>
????????"colorBg2"?format="color"?/>
????????"colorBg3"?format="color"?/>
????????"colorTextWhite"?format="color"?/>
????
????????"AppTheme"?parent="Theme.AppCompat.Light.DarkActionBar">
????????????"colorPrimary">@color/colorPrimaryDefault
????????????"colorBg1">@color/colorBgDefault1
????????????"colorBg2">@color/colorBgDefault2
????????????"colorBg3">@color/colorBgDefault3
????????????"colorTextWhite">@color/colorTextWhite
????????
????
????????"app_skin_1"?parent="AppTheme">
????????????"colorPrimary">@color/colorPrimarySkin1
????????????"colorBg1">@color/colorBgDefault1Skin1
????????????"colorBg2">@color/colorBgDefault1Skin2
????????????"colorBg3">@color/colorBgDefault1Skin3
????????
????
????????"app_skin_2"?parent="AppTheme">
????????????"colorPrimary">@color/colorPrimarySkin2
????????????"colorBg1">@color/colorBgDefault2Skin1
????????????"colorBg2">@color/colorBgDefault2Skin2
????????????"colorBg3">@color/colorBgDefault2Skin3
????????
????
src/main/res/values/colors.xml:
"1.0"?encoding="utf-8"?>
????
????????"colorPrimaryDefault">#FCE4EC
????????"colorBgDefault1">#F06292
????????"colorBgDefault2">#EC407A
????????"colorBgDefault3">#880E4F
????????"colorTextWhite">#FFFFFF
????
????????"colorPrimarySkin1">#E3F2FD
????????"colorBgDefault1Skin1">#90CAF9
????????"colorBgDefault1Skin2">#42A5F5
????????"colorBgDefault1Skin3">#0D47A1
????
????????"colorPrimarySkin2">#FAFAFA
????????"colorBgDefault2Skin1">#757575
????????"colorBgDefault2Skin2">#424242
????????"colorBgDefault2Skin3">#212121
????
style 是支持繼承的， 以上述為例，app_skin_1 繼承自 AppTheme, 在通過(guò) attr 尋找其值時(shí)，如果在 app_skin_1 沒(méi)找到，那么它就會(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)我們切換皮膚后，需要將切換后的皮膚信息保存起來(lái)，當(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類：
????????????android:name=".QDApplication"
????????????......
1.6、開始編寫Activity
基本工作已準(zhǔn)備完畢，接下來(lái)我們實(shí)現(xiàn)定義的換膚效果。
修改MainActivity的布局文件，編寫我們的UI布局：
src/main/res/layout/activity_main.xml：
"1.0"?encoding="utf-8"?>
????"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">
????
????????????????????android:id="@+id/v1"
????????????android:layout_width="match_parent"
????????????android:layout_height="50dp"
????????????app:qmui_skin_background="?attr/colorBg2"?>
????????????????????????????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"/>
????????
????
????????????????????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"?/>
????
????????????????????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"?/>
????
注意：要想實(shí)現(xiàn)換膚，我們?cè)O(shè)置控件顏色時(shí)，要使用QMUI提供的換膚屬性：
app:qmui_skin_xxx
QMUI官網(wǎng)已提供了以下?lián)Q膚屬性，供我們使用，能滿足常規(guī)的開發(fā)需要，如下圖所示：
下面，我們來(lái)編寫Activity代碼。
在
Activity中，我們需要對(duì)QMUISkinManager進(jìn)行注冊(cè)，該Activity才能享用換膚功能（注意：在實(shí)際開發(fā)中，如果APP所有的頁(yè)面都要支持換膚，那么我們盡量將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。它通過(guò) 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 語(yǔ)言，可以通過(guò) View.skin { ... } 來(lái)配置 View 實(shí)例。 QMUISkinLayoutInflaterFactory: 用于支持 xml 換膚配置項(xiàng)解析。 IQMUISkinDispatchInterceptor: View 可以通過(guò)實(shí)現(xiàn)它，來(lái)攔截 skin 更改的派發(fā)。 IQMUISkinHandlerView: View 可以通過(guò)實(shí)現(xiàn)它，來(lái)完全自定義不同 skin 的處理。 IQMUISkinDefaultAttrProvider: View 可以通過(guò)實(shí)現(xiàn)它， 提供 View 默認(rèn)的默認(rèn)換膚配置，從組件層面提供換膚支持。
更多內(nèi)容，可以參考官方文檔：
https://github.com/tencent/qmui_android/wiki/qmui-換膚
? 耗時(shí)2年，Android進(jìn)階三部曲第三部《Android進(jìn)階指北》出版！
為了防止失聯(lián)，歡迎關(guān)注我的小號(hào)
??微信改了推送機(jī)制，真愛(ài)請(qǐng)星標(biāo)本公號(hào)??
評(píng)論
圖片
表情