Android实战：APP换肤功能，并自动适配手机深色模式

#0D47A1

#FAFAFA

#757575

#424242

#212121

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

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

注意：要想实现换肤，我们设置控件颜色时，

资料获取→专栏
要使用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.def
aultInstance(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);
肤操作

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);