腾讯QMUI实战:实现APP换肤功能,并⾃动适配⼿机深⾊模式BATcoder技术,让⼀部分⼈先进⼤⼚
⼤家好,我是刘望舒,腾讯TVP,著有三本业内知名畅销书,连续四年蝉联电⼦⼯业出版社年度优秀作者,百度百科收录的资深技术专家。
前华为架构师,现独⾓兽技术负责⼈
想要加⼊ BATcoder技术,公号回复BAT 即可。
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/l:
<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= "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/l:
<?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 寻其值时,如果在 a
pp_skin_1 没到,那么它就会去 AppTheme 寻。因此我们可以把 App 的 theme 作为我们的⼀个 skin,其它 skin 都继承⾃这个skin。
1.3 ⾃定义换肤管理类
APP的不同⽪肤、颜⾊已定义好,我们需要定义⼀个类,与QMUI对接,⽤于管理这些⽪肤,代码功能包含:⽪肤的加载、切换等操作。
src/main/java/com/qxc/testandroid/QDSkinManager.java:
package standroid;
t.Context;
t.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 = (Configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES;
int storeSkinIndex = Instance(context).getSkinIndex;
if(isDarkMode && storeSkinIndex != SKIN_2) {
skinManager.changeSkin(SKIN_2);
} elseif(!isDarkMode && storeSkinIndex == SKIN_1) {
skinManager.changeSkin(SKIN_1);
} else{
skinManager.changeSkin(storeSkinIndex);
}
}
public static void changeSkin(int index) {
QMUISkinManager.Context).changeSkin(index); Context).setSkinIndex(index);
}
public static int getCurrentSkin{
returnQMUISkinManager.Context).getCurrentSkin;
}
}
1.4、⾃定义⽪肤保存类
当我们切换⽪肤后,需要将切换后的⽪肤信息保存起来,当下次启动APP时,直接加载我们切换后的⽪肤。src/main/java/com/qxc/testandroid/QDPreferenceManager.java:
package standroid;
t.Context;
t.SharedPreferences;
java技术介绍百度百科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 = ApplicationContext); }
public static final QDPreferenceManager getInstance(Context context) {
if(sQDPreferenceManager == null) {
sQDPreferenceManager = new QDPreferenceManager(context);
}
returnsQDPreferenceManager;
}
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{
}
}
1.5、APP加载QDSkinManager并适配深⾊模式
该⼯作仅需做⼀次即可,建议:⾃定义Application,实现该功能。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论