乐趣区

关于android:Android换肤功能实现

jiezi

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/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

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 默认的默认换肤配置，从组件层面提供换肤反对。

文末

您的点赞珍藏就是对我最大的激励！欢送关注我的简书，分享 Android 干货，交换 Android 技术。对文章有何见解，或者有何技术问题，欢送在评论区一起留言探讨！

本文转自 https://juejin.cn/post/7038482977914880008，如有侵权，请分割删除。

退出移动版