Android实现黑白主题切换

版权声明:本文为博主原创文章,码字不易,转载请注明原文地址,谢谢。 https://blog.csdn.net/qq_16131393/article/details/77480315

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

看效果吧:

这里写图片描述

实现步骤

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;

        }
    }

然后得到如下效果:

这里写图片描述

代码地址:

github代码地址

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

没有更多推荐了,返回首页