[转]Android换肤功能,并自动适配手机深色模式

针对Android程序的界面变更需求,在布局相同的情况下更换颜色、图片、自定义drawable资源等等,使用换肤框架(Android-skin-suport)可以带来很多便利。

换肤操作总结来说就是对布局引用的资源文件进行替换。

对于传统换肤,无论是setTeme()方法,或者修改布局引用等操作,都需要在项目中的res文件夹中添加替换的资源文件,并且对源代码需要做一定程度上的修改,使得在后续开发和维护上会造成一定的影响,并且在换肤过程中可能需要重启App才能到达换肤的效果。这显然超出了换肤这一功能的需求。

换肤框架(Android-skin-suppo)能做到的是选择皮肤包进行资源替换,皮肤包存放在assets资源文件夹中,区别于res可以让源程序保持简洁。使用框架基本上不需要修改源程序中的界面布局,框架会帮助我们选择皮肤包中同名称的引用资源且不需要重启App。

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

下面是腾讯的QMUI库的换肤功能,供参考
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/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、自定义皮肤保存类

当我们切换皮肤后,需要将切换后的皮肤信息保存起来,当下次启动APP时,直接加载我们切换后的皮肤。

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,实现该功能。

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

基本工作已准备完毕,接下来我们实现定义的换肤效果。
修改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
1
QMUI官网已提供了以下换肤属性,供我们使用,能满足常规的开发需要,如下图所示:

下面,我们来编写Activity代码。
在 Activity中,我们需要对QMUISkinManager进行注册,该Activity才能享用换肤功能(注意:在实际开发中,如果APP所有的页面都要支持换肤,那么我们尽量将QMUISkinManager的注册写在BaseActivity中)。

有两种方案,实现注册:

方案1:

我们可以Activity类继承 QMUIFragmentActivity 或者 QMUIActivity ,从而默认注入了 QMUISkinManager

方案2(为了让大家明白如何注册,我们选择这种方案。不用担心,其实很简单):

我们自己实现QMUISkinManager的注册、取消注册

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();
            //注册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:

QMUISkinManager: 存储肤色配置,并且派发当前肤色给它管理的Activity、Fragment、Dialog、PopupWindow。它通过 QMUISkinManager.of(name, context) 获取,是可以多实例的。因而一个 App 可以在不同场景执行不同的换肤管理, 例如阅读产品阅读器的换肤和其它业务模块 uiMode 切换的区分管理。
QMUISkinValueBuilder: 用于构建一个 View 实例的换肤配置(textColor、background、border、separator等)
QMUISkinHelper: 一些辅助工具方法,最常用的为 QMUISkinHelper.setSkinValue(View, QMUISkinValueBuilder),将 QMUISkinValueBuilder 的配置应用到一个 View 实例。如果使用 kotlin 语言,可以通过 View.skin { … } 来配置 View 实例。
QMUISkinLayoutInflaterFactory: 用于支持 xml 换肤配置项解析。
IQMUISkinDispatchInterceptor: View 可以通过实现它,来拦截 skin 更改的派发。
IQMUISkinHandlerView: View 可以通过实现它,来完全自定义不同 skin 的处理。
IQMUISkinDefaultAttrProvider: View 可以通过实现它, 提供 View 默认的默认换肤配置,从组件层面提供换肤支持。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,290评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,399评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,021评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,034评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,412评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,651评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,902评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,605评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,339评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,586评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,076评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,400评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,060评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,851评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,685评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,595评论 2 270

推荐阅读更多精彩内容