博客列表 >Android开发常用之日夜主题切换

Android开发常用之日夜主题切换

啃腿牛的博客
啃腿牛的博客原创
2018年03月13日 10:24:27978浏览

前言:

        1.主题切换需要了解 attr 和?attr的区别,style的使用,intent对象的flag ,SharedPreferences和enum
的使用。

        2.需要准备日夜对应控件颜色配置。

步骤:

        1.创建light theme和Dark Theme。

        2.创建SharePreferenceManager

        3.编写配置类,切换和保存主题。

        4.在需要切换的地方使用intent对象flag实现切换

一。创建light theme和Dark Theme

 
    <!--==================light theme==================-->
      <style name="LightTheme.Base" parent="AppTheme.Base">
    <item name="colorPrimary">@color/light_principle</item>
    <item name="colorPrimaryDark">@color/light_state_bar</item>
    <item name="android:listDivider">@color/light_divider</item>
    <item name="hint">@color/light_hint</item>
    <item name="horizontal_divider">@color/light_divider</item>
    
    <item name="tab_item_selected">@color/light_tab_item_selected</item>
    <item name="tab_item_unselected">@color/light_tab_item_unselected</item>
    <item name="tab_item_underline">@color/light_tab_item_underline</item>
    
    <item name="list_view_background">@color/light_list_item_background</item>
    
    <item name="main_list_item_title">@color/light_main_list_item_title</item>
    <item name="main_list_item_content">@color/light_main_list_item_title</item>
    <item name="main_list_item_username">@color/light_main_list_item_username</item>
    <item name="main_list_item_time">@color/light_main_list_item_title</item>
    <item name="main_list_item_background">@drawable/selector_light_list_item</item>
    <item name="main_list_item_comment_count">@color/light_main_list_item_title</item>
    
    <item name="drawer_header_background">@color/light_drawer_header_background</item>
    <item name="drawer_header_username">@color/light_drawer_header_username</item>
    <item name="drawer_header_abilities">@color/light_drawer_header_abilities</item>
    <item name="drawer_header_abilities_background">@color/light_drawer_header_abilities_background</item>
    <item name="drawer_header_skill_score">@color/light_drawer_header_skill_score</item>
    <item name="drawer_container_background">@color/light_drawer_container_background</item>
    <item name="drawer_container_menu_text">@color/light_drawer_container_menu_text</item>
    <item name="drawer_container_menu">@drawable/selector_light_drawer_menu</item>
    <item name="func_loading_text">@color/light_func_loading_text</item>
    
    <item name="refresh_progress_background">@color/light_refresh_progress_background</item>
    <item name="detail_title_background">@color/light_detail_title_background</item>
    <item name="detail_title_text">@color/light_detail_title_text</item>
    <item name="detail_header_username">@color/light_detail_header_username</item>
    <item name="detail_header_other">@color/light_detail_header_other</item>
    <item name="detail_header_background">@color/light_detail_header_background</item>
    <item name="detail_content_text">@color/light_detail_content_text</item>
    <item name="detail_content_background">@color/light_detail_content_background</item>
    <item name="detail_footer_text">@color/light_detail_footer_text</item>
    <item name="detail_footer_background">@drawable/selector_light_detail_footer_item</item>
    <item name="comment_list_item_username">@color/light_comment_list_item_username</item>
    <item name="comment_list_item_time">@color/light_comment_list_item_time</item>
    <item name="comment_list_item_content">@color/light_comment_list_item_content</item>
    <item name="comment_list_item_background">@drawable/selector_light_list_item</item>
    <item name="comment_list_item_refer_background">@drawable/shape_light_refer_item</item>
    <item name="comment_list_item_refer_title">@color/light_comment_list_item_refer_title</item>
    <item name="comment_list_item_refer_content">@color/light_comment_list_item_refer_content</item>
    <item name="comment_list_item_refer_border">@color/light_comment_list_item_refer_border</item>
    <item name="keyboard_panel_background">@color/light_keyboard_panel_background</item>
    <item name="keyboard_emotion_tab_item_background">@drawable/selector_light_emotion_item</item>
    <item name="keyboard_emotion_tab_item_text">@color/light_keyboard_emotion_tab_item_text</item>
    <item name="keyboard_input_text">@color/light_keyboard_input_text</item>
    <item name="tweet_list_item_username">@color/light_tweet_list_item_username</item>
    <item name="tweet_list_item_content">@color/light_tweet_list_item_content</item>
    <item name="tweet_list_item_highlight">@color/light_tweet_list_item_highlight</item>
    <item name="tweet_list_item_other">@color/light_tweet_list_item_other</item>
    <item name="tweet_list_item_background">@drawable/selector_light_list_item</item>
    <item name="tweet_list_item_like_list_background">@color/light_tweet_list_item_like_list_background</item>
    <item name="tweet_comment_list_item_username">@color/light_tweet_comment_list_item_username</item>
    <item name="tweet_comment_list_item_content">@color/light_tweet_comment_list_item_content</item>
    <item name="tweet_comment_list_item_time">@color/light_tweet_comment_list_item_time</item>
    <item name="tweet_comment_list_item_background">@drawable/selector_light_list_item</item>
    <item name="tweet_floating_action_button_background_unselected">@color/light_tweet_floating_action_button_background_unselected</item>
    <item name="tweet_floating_action_button_background_selected">@color/light_tweet_floating_action_button_background_selected</item>
    <item name="tweet_floating_action_button_plus">@color/light_tweet_floating_action_button_plus</item>
    <item name="tweet_floating_action_button_item_background_unselected">@color/light_tweet_floating_action_button_item_background_unselected</item>
    <item name="tweet_floating_action_button_item_background_selected">@color/light_tweet_floating_action_button_item_background_selected</item>
    <item name="tweet_floating_cover">@color/light_tweet_floating_cover</item>
    <item name="login_background">@color/light_login_background</item>
    <item name="login_form_username">@color/light_login_form_username</item>
    <item name="login_form_password">@color/light_login_form_password</item>
    <item name="login_form_hint">@color/light_login_form_hint</item>
    <item name="login_form_error">@color/light_login_form_error</item>
    <item name="login_text">@color/light_login_text</item>
    <item name="dialog_opinion_background">@drawable/selector_light_opinion_item</item>
    <item name="dialog_text">@color/light_dialog_text</item>
    <item name="tweet_publish_editor_background">@color/light_tweet_publish_editor_background</item>
    <item name="tweet_publish_editor_text">@color/light_tweet_publish_editor_text</item>
    <item name="tweet_publish_emotion_navigation">@color/light_tweet_publish_emotion_navigation</item>
    <item name="user_home_username">@color/light_user_home_username</item>
    <item name="user_home_join_time">@color/light_user_home_join_time</item>
    <item name="user_home_coordinate">@color/light_user_home_coordinate</item>
    <item name="user_home_statistic">@color/light_user_home_statistic</item>
    <item name="user_home_statistic_border">@color/light_user_home_statistic_border</item>
    <item name="user_home_blow_background">@color/light_user_home_blow_background</item>
    <item name="user_home_blow_row">@color/light_user_home_blow_row</item>
    <item name="user_home_blow_label">@color/light_user_home_blow_label</item>
    <item name="user_home_blow_label_value">@color/light_user_home_blow_label_value</item>
    <item name="user_home_blow_label_value_background">@drawable/shape_light_user_home_label_value</item>
</style>
<!--======================Dark Theme========================-->
<style name="DarkTheme.Base" parent="AppTheme.Base">
    <item name="colorPrimary">@color/dark_principle</item>
    <item name="colorPrimaryDark">@color/dark_state_bar</item>
    <item name="android:listDivider">@color/dark_divider</item>
    <item name="hint">@color/dark_hint</item>
    <item name="horizontal_divider">@color/dark_divider</item>
    <item name="tab_item_selected">@color/dark_tab_item_selected</item>
    <item name="tab_item_unselected">@color/dark_tab_item_unselected</item>
    <item name="tab_item_underline">@color/dark_tab_item_underline</item>
    <item name="list_view_background">@color/dark_list_item_background</item>
    <item name="main_list_item_title">@color/dark_main_list_item_title</item>
    <item name="main_list_item_content">@color/dark_main_list_item_content</item>
    <item name="main_list_item_username">@color/dark_main_list_item_username</item>
    <item name="main_list_item_time">@color/dark_main_list_item_time</item>
    <item name="main_list_item_background">@drawable/selector_dark_list_item</item>
    <item name="main_list_item_comment_count">@color/dark_main_list_item_comment_count</item>
    <item name="drawer_header_background">@color/dark_drawer_header_background</item>
    <item name="drawer_header_username">@color/dark_drawer_header_username</item>
    <item name="drawer_header_abilities">@color/dark_drawer_header_abilities</item>
    <item name="drawer_header_abilities_background">@color/dark_drawer_header_abilities_background</item>
    <item name="drawer_header_skill_score">@color/dark_drawer_header_skill_score</item>
    <item name="drawer_container_background">@color/dark_drawer_container_background</item>
    <item name="drawer_container_menu_text">@color/dark_drawer_container_menu_text</item>
    <item name="drawer_container_menu">@drawable/selector_dark_drawer_menu</item>
    <item name="func_loading_text">@color/dark_func_loading_text</item>
    <item name="refresh_progress_background">@color/dark_refresh_progress_background</item>
    <item name="detail_title_background">@color/dark_detail_title_background</item>
    <item name="detail_title_text">@color/dark_detail_title_text</item>
    <item name="detail_header_username">@color/dark_detail_header_username</item>
    <item name="detail_header_other">@color/dark_detail_header_other</item>
    <item name="detail_header_background">@color/dark_detail_header_background</item>
    <item name="detail_content_text">@color/dark_detail_content_text</item>
    <item name="detail_content_background">@color/dark_detail_content_background</item>
    <item name="detail_footer_text">@color/dark_detail_footer_text</item>
    <item name="detail_footer_background">@drawable/selector_dark_detail_footer_item</item>
    <item name="comment_list_item_username">@color/dark_comment_list_item_username</item>
    <item name="comment_list_item_time">@color/dark_comment_list_item_time</item>
    <item name="comment_list_item_content">@color/dark_comment_list_item_content</item>
    <item name="comment_list_item_background">@drawable/selector_dark_list_item</item>
    <item name="comment_list_item_refer_background">@drawable/shape_dark_refer_item</item>
    <item name="comment_list_item_refer_title">@color/dark_comment_list_item_refer_title</item>
    <item name="comment_list_item_refer_content">@color/dark_comment_list_item_refer_content</item>
    <item name="comment_list_item_refer_border">@color/dark_comment_list_item_refer_border</item>
    <item name="keyboard_panel_background">@color/dark_keyboard_panel_background</item>
    <item name="keyboard_emotion_tab_item_background">@drawable/selector_dark_emotion_item</item>
    <item name="keyboard_emotion_tab_item_text">@color/dark_keyboard_emotion_tab_item_text</item>
    <item name="keyboard_input_text">@color/dark_keyboard_input_text</item>
    <item name="tweet_list_item_username">@color/dark_tweet_list_item_username</item>
    <item name="tweet_list_item_content">@color/dark_tweet_list_item_content</item>
    <item name="tweet_list_item_highlight">@color/dark_tweet_list_item_highlight</item>
    <item name="tweet_list_item_other">@color/dark_tweet_list_item_other</item>
    <item name="tweet_list_item_background">@drawable/selector_dark_list_item</item>
    <item name="tweet_list_item_like_list_background">@color/dark_tweet_list_item_like_list_background</item>
    <item name="tweet_comment_list_item_username">@color/dark_tweet_comment_list_item_username</item>
    <item name="tweet_comment_list_item_content">@color/dark_tweet_comment_list_item_content</item>
    <item name="tweet_comment_list_item_time">@color/dark_tweet_comment_list_item_time</item>
    <item name="tweet_comment_list_item_background">@drawable/selector_dark_list_item</item>
    <item name="tweet_floating_action_button_background_unselected">@color/dark_tweet_floating_action_button_background_unselected</item>
    <item name="tweet_floating_action_button_background_selected">@color/dark_tweet_floating_action_button_background_selected</item>
    <item name="tweet_floating_action_button_plus">@color/dark_tweet_floating_action_button_plus</item>
    <item name="tweet_floating_action_button_item_background_unselected">@color/dark_tweet_floating_action_button_item_background_unselected</item>
    <item name="tweet_floating_action_button_item_background_selected">@color/dark_tweet_floating_action_button_item_background_selected</item>
    <item name="tweet_floating_cover">@color/dark_tweet_floating_cover</item>
    <item name="login_background">@color/dark_login_background</item>
    <item name="login_form_username">@color/dark_login_form_username</item>
    <item name="login_form_password">@color/dark_login_form_password</item>
    <item name="login_form_hint">@color/dark_login_form_hint</item>
    <item name="login_form_error">@color/dark_login_form_error</item>
    <item name="login_text">@color/dark_login_text</item>
    <item name="dialog_opinion_background">@drawable/selector_dark_opinion_item</item>
    <item name="dialog_text">@color/dark_dialog_text</item>
    <item name="tweet_publish_editor_background">@color/dark_tweet_publish_editor_background</item>
    <item name="tweet_publish_editor_text">@color/dark_tweet_publish_editor_text</item>
    <item name="tweet_publish_emotion_navigation">@color/dark_tweet_publish_emotion_navigation</item>
    <item name="user_home_username">@color/dark_user_home_username</item>
    <item name="user_home_join_time">@color/dark_user_home_join_time</item>
    <item name="user_home_coordinate">@color/dark_user_home_coordinate</item>
    <item name="user_home_statistic">@color/dark_user_home_statistic</item>
    <item name="user_home_statistic_border">@color/dark_user_home_statistic_border</item>
    <item name="user_home_blow_background">@color/dark_user_home_blow_background</item>
    <item name="user_home_blow_row">@color/dark_user_home_blow_row</item>
    <item name="user_home_blow_label">@color/dark_user_home_blow_label</item>
    <item name="user_home_blow_label_value">@color/dark_user_home_blow_label_value</item>
    <item name="user_home_blow_label_value_background">@drawable/shape_dark_user_home_label_value</item>
</style>
<style name="LightTheme" parent="LightTheme.Base">
</style>
<style name="DarkTheme" parent="DarkTheme.Base">
</style>

二。创建SharePreferenceManager和配置类,切换和保存主题

  public static SharedPreferences getApplicationSetting(Context context){
    return context.getSharedPreferences(ApplicationSetting.FILE_NAME, Context.MODE_PRIVATE);
}
/**
 * 应用配置首选项, 保存主题...一些系统级别的配置
 */
public static class ApplicationSetting{
    public static final String FILE_NAME = "APPLICATION_SETTING";
    public static final String KEY_THEME = "KEY_THEME";
     // ---主题列举---
    public enum ApplicationTheme{
        LIGHT(1, R.style.LightTheme),
        DARK(2, R.style.DarkTheme);
        private int key;
        private int resId;
        ApplicationTheme(int key, int resId){
            this.key = key;
            this.resId = resId;
        }
        public int getKey() {
            return key;
        }
        public int getResId() {
            return resId;
        }
    }
}

三。在需要切换的地方使用intent对象flag实现切换

SharedPreferences preferences = SharePreferenceManager.getApplicationSetting(this);
int theme = preferences.getInt(SharePreferenceManager.ApplicationSetting.KEY_THEME, SharePreferenceManager.ApplicationSetting.ApplicationTheme.LIGHT.getKey());
SharedPreferences.Editor editor = preferences.edit();
if (theme == SharePreferenceManager.ApplicationSetting.ApplicationTheme.LIGHT.getKey()){
    editor.putInt(SharePreferenceManager.ApplicationSetting.KEY_THEME, SharePreferenceManager.ApplicationSetting.ApplicationTheme.DARK.getKey());
}else{
    editor.putInt(SharePreferenceManager.ApplicationSetting.KEY_THEME, SharePreferenceManager.ApplicationSetting.ApplicationTheme.LIGHT.getKey());
}
editor.apply();
finish();
Intent intent = getIntent();
intent.putExtra(CHANGE_THEME, true);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
startActivity(intent);
overridePendingTransition(R.anim.enter, R.anim.exit);

enter:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="0" android:toAlpha="1" android:duration="1000"/>
</set>

exit:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="1" android:toAlpha="0" android:duration="1000"/>
</set>

xml布局文件引用style颜色:

测拉菜单:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/drawer_height"
    android:orientation="vertical"
    android:background="?attr/drawer_header_background"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/iv_portrait"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:contentDescription="@null"
            android:src="@mipmap/icon_default_portrait" />
        <ImageView
            android:id="@+id/iv_exit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:contentDescription="@null"
            android:src="@mipmap/icon_exit" />
    </RelativeLayout>
    <TextView
        android:id="@+id/tv_nick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:drawablePadding="5dp"
        android:textColor="?attr/drawer_header_username"
        android:textSize="@dimen/drawer_header_username" />
    <TextView
        android:id="@+id/tv_score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</android.support.v7.widget.LinearLayoutCompat>

toolbar:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/layout_coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/layout_actionbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

tes.gif

总结:

    这个方法思路简单,颜色配置有些麻烦,适用于小中型项目开发。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议