欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android实现黑白主题切换

程序员文章站 2022-05-14 21:09:44
...

黑夜,白天两种模式的切换,其实就是黑白两种主题的切换

看效果吧:

Android实现黑白主题切换

实现步骤

1:创建两种主题模式

    <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="color_bg_main">@color/color_bg_main_light</item>
        <item name="text_style">@style/Text_light_style</item>
        <item name="second_text_style">@style/second_text_style_light</item>
    </style>

    <style name="ThemeLight" parent="AppTheme">

    </style>

    <style name="ThemeDark" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryDark">@color/color_primary_dark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="color_bg_main">@color/color_bg_main_drak</item>
        <item name="text_style">@style/Text_dark_style</item>
        <item name="second_text_style">@style/second_text_style_dark</item>
    </style>
   <style name="Text_light_style">
        <item name="android:textColor">@color/color_white</item>
        <item name="android:background">@color/color_black</item>
    </style>

    <style name="Text_dark_style">
        <item name="android:textColor">@color/color_black</item>
        <item name="android:background">@color/color_white</item>
    </style>
    <style name="second_text_style_light">
        <item name="android:textColor">@color/color_white</item>
        <item name="android:background">@color/color_black</item>
        <item name="android:text">@string/text_intent_light</item>
    </style>
    <style name="second_text_style_dark">
        <item name="android:textColor">@color/color_black</item>
        <item name="android:background">@color/color_white</item>
        <item name="android:text">@string/text_intent_drak</item>
    </style>

那么其中的一些text_style,second_text_style应该在哪定义呢???

第二步:定义自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="color_bg_main" format="color|reference"/>
    <attr name="text_style" format="reference"/>
    <attr name="second_text_style" format="reference"/>
</resources>

定义完成之后需要引用才有效果,如何引用呢???

第三步:应用样式

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/color_bg_main"
    android:padding="16dp"
    tools:context="com.example.themechangeandroid.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_light"
            style="?attr/text_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:padding="16dp"
            android:text="@string/text_light" />

        <TextView
            android:id="@+id/tv_dark"
            style="?attr/text_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:gravity="left"
            android:padding="16dp"
            android:text="@string/text_dark" />

        <TextView
            android:id="@+id/tv_intent"
            style="?attr/text_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:gravity="left"
            android:padding="16dp"
            android:text="@string/text_intent" />
    </LinearLayout>

</LinearLayout>

activity_second.xml实现

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="?attr/color_bg_main"
    tools:context="com.example.themechangeandroid.SecondActivity">

    <TextView
        style="?attr/second_text_style"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
         />
</LinearLayout>

通过?attr/ 去引用样式

第四步:切换主题

应用某个主题的时候,在setContentView方法之前才有效果,即如下设置主题

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        ThemeUtil.setTheme(this);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.tv_light).setOnClickListener(this);
        findViewById(R.id.tv_dark).setOnClickListener(this);
        findViewById(R.id.tv_intent).setOnClickListener(this);
    }

设想,我们需要把所有界面统一设置主题,那么每个Activity都需要调用 ThemeUtil.setTheme(this);修改之后如何知道当前是何主题呢?

可以设置一个标志,保存到本地,当每打开一个界面时,需要根据标志位来设置主题,如下

 public static void setTheme(@NonNull Activity activity) {
        boolean isLight = PrefsUtils.read(activity, Config.THEME_CONFIG, true);
        activity.setTheme(isLight ? R.style.ThemeLight : R.style.ThemeDark);
    }

当切换主题的时候,如何修改当前页面主题呢?上述我们知道,setTheme在setContentView之前调用,除非我们重新走oncrete方法,否则无法刷新本页面主题样式,我们可以调用recreate方法,重走oncrete方法,原理是销毁并重新创建当前Activity。

public static void reCreate(@NonNull final Activity activity) {
        activity.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                activity.recreate();
            }
        });

    }

当点击切换时,需要先修改保存标志位,然后调用recrete方法

 @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.tv_light:
                PrefsUtils.write(this,Config.THEME_CONFIG,true);
                ThemeUtil.reCreate(this);
                break;
            case R.id.tv_dark:
                PrefsUtils.write(this,Config.THEME_CONFIG,false);
                ThemeUtil.reCreate(this);
                break;
            case R.id.tv_intent:
                Intent intent=new Intent(MainActivity.this,SecondActivity.class);
                startActivity(intent);
                break;

        }
    }

然后得到如下效果:

Android实现黑白主题切换

代码地址:

github代码地址

参考资料:https://github.com/TakWolf/CNode-Material-Design