Android主题切换功能

最新推荐文章于 2025-04-29 00:15:00 发布

原创最新推荐文章于 2025-04-29 00:15:00 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#android #java

文章介绍了如何在Android应用中添加主题切换功能，包括在attr.xml中定义自定义属性，colors.xml中配置颜色，themes.xml中设置主题样式，以及在代码中动态设置和切换主题。示例展示了如何根据用户选择在主主题和蓝色主题之间切换。

App一般会有多套颜色主题，下面介绍如何在App中添加主题切换功能：

先添加自定义属性，在values目录下新建attr.xml，根据主题中需要动态修改的颜色或者图片设定自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="main_bg_color" format="color"/>
    <attr name="nav_head_bg" format="color"/>
    <attr name="text1_color" format="color"/>
    <attr name="text2_color" format="color"/>
    <attr name="text3_color" format="color"/>
    <attr name="text4_color" format="color"/>
    <attr name="text5_color" format="color"/>
</resources>

在colors.xml添加主题颜色配置

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_500">#1afa29</color>
    <color name="purple_700">#afdd22</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="tab_sel">#1afa29</color>
    <color name="tab_normal">#bfbfbf</color>
    <color name="title_1">#000000</color>
    <color name="title_2">#333333</color>
    <color name="title_3">#666666</color>
    <color name="title_4">#999999</color>
    <color name="title_5">#CCCCCC</color>
    <color name="banner_bg">#66CCCCCC</color>

    <color name="purple_500_blue">#6699FF</color>
    <color name="purple_700_blue">#3366FF</color>
    <color name="teal_200_blue">#9999FF</color>
    <color name="teal_700_blue">#6633FF</color>
    <color name="title_1_blue">#0000CC</color>
    <color name="title_2_blue">#0000FF</color>
    <color name="title_3_blue">#0033FF</color>
    <color name="title_4_blue">#0066FF</color>
    <color name="title_5_blue">#0099FF</color>
    <color name="main_gb_blue">#00CCFF</color>
</resources>

配置themes.xml，设置不同颜色主题配置

 <style name="Theme.JetpackDemo.main" parent="Theme.JetpackDemo.Base">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorPrimaryDark">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <item name="main_bg_color">@color/white</item>
        <item name="nav_head_bg">@drawable/side_nav_bar</item>
        <item name="text1_color">@color/title_1</item>
        <item name="text2_color">@color/title_2</item>
        <item name="text3_color">@color/title_3</item>
        <item name="text4_color">@color/title_4</item>
        <item name="text5_color">@color/title_5</item>
    </style>
    <style name="Theme.JetpackDemo.Blue" parent="Theme.JetpackDemo.Base">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500_blue</item>
        <item name="colorPrimaryVariant">@color/purple_700_blue</item>
        <item name="colorPrimaryDark">@color/purple_700_blue</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200_blue</item>
        <item name="colorSecondaryVariant">@color/teal_700_blue</item>
        <item name="main_bg_color">@color/main_gb_blue</item>
        <item name="nav_head_bg">@drawable/side_nav_bar_blue</item>
        <item name="text1_color">@color/title_1_blue</item>
        <item name="text2_color">@color/title_2_blue</item>
        <item name="text3_color">@color/title_3_blue</item>
        <item name="text4_color">@color/title_4_blue</item>
        <item name="text5_color">@color/title_5_blue</item>
    </style>

界面配置设置的自定义属性

<TextView
                android:textSize="16sp"
                android:textColor="?attr/text1_color"
                android:text="@{top.title}"
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"></TextView>
<LinearLayout 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"
    android:background="?attr/main_bg_color"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

代码设置当前主题

        super.onCreate(savedInstanceState);
        int theme = MmkvUtil.getInstance().getInt(Constant.THEME_KEY);
        if (theme == Constant.THEME_BLUE){
            setTheme(R.style.Theme_JetpackDemo_Blue);
        }else {
            setTheme(R.style.Theme_JetpackDemo_main);
        }
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

选择切换主题

                        int theme = MmkvUtil.getInstance().getInt(Constant.THEME_KEY);
                        if (theme == Constant.THEME_BLUE){
                            MmkvUtil.getInstance().setInt(Constant.THEME_KEY,Constant.THEME_MAIN);
                        }else {
                            MmkvUtil.getInstance().setInt(Constant.THEME_KEY,Constant.THEME_BLUE);
                        }
                        Intent intent = new Intent(MainActivity.this,MainActivity.class);
                        intent.setFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
                        startActivity(intent);
                        finish();
                        overridePendingTransition(0,0);

效果如下：