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,如有侵权,请分割删除。