天天看点

【菜鸟学安卓】- DrawerLayout + Toolbar 与主题theme 颜色设置

模仿知乎的过程中一直被这个主题颜色困扰,特意写个Demo ,来理一理这个东西,加强记忆。

贴上效果图:

【菜鸟学安卓】- DrawerLayout + Toolbar 与主题theme 颜色设置
【菜鸟学安卓】- DrawerLayout + Toolbar 与主题theme 颜色设置
【菜鸟学安卓】- DrawerLayout + Toolbar 与主题theme 颜色设置
【菜鸟学安卓】- DrawerLayout + Toolbar 与主题theme 颜色设置
【菜鸟学安卓】- DrawerLayout + Toolbar 与主题theme 颜色设置
【菜鸟学安卓】- DrawerLayout + Toolbar 与主题theme 颜色设置

主要是两种主题颜色的切换,注释应该已经写的很详细了,主要的内容都在下面这个styles的设置里面。

styles.xml:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 主题通用样式 -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light"></style>

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

        <!-- NoActionbar的设置 -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <!-- toolbar popupTheme -->
        <item name="popupTheme">@style/Toolbar.PopupTheme</item>
        <item name="android:textColor">?attr/myColor1</item>
    </style>

    <!-- 红蓝主题 -->
    <style name="AppTheme.Day" parent="AppTheme">
        <!-- 自定义属性 -->
        <item name="myColor1">@color/red</item>
        <item name="myColor2">@color/blue</item>
    </style>
    <!-- 黄绿主题 -->
    <style name="AppTheme.Night" parent="AppTheme">
        <!-- 自定义属性 -->
        <item name="myColor1">@color/green</item>
        <item name="myColor2">@color/yellow</item>
    </style>

    <!-- Toolbar 主题 -->
    <style name="Toolbar.Theme" parent="Theme.AppCompat">
        <!-- 返回箭头样式 -->
        <item name="drawerArrowStyle">@style/Toolbar.DrawerArrow</item>
        <!-- 导航栏底色 无效-->
        <item name="colorPrimary">?attr/myColor2</item>
        <!-- Actionbar Toolbar 三点menu 颜色 -->
        <item name="colorControlNormal">?attr/myColor1</item>
        <!--导航栏上的标题颜色-->
        <item name="android:textColorPrimary">?attr/myColor1</item>
    </style>
    <!-- 主页返回箭头颜色 和 动画  navigationicon -->
    <style name="Toolbar.DrawerArrow" parent="Widget.AppCompat.DrawerArrowToggle">
        <!-- spinBars 属性 false 和 true 定义了不同的动画效果 -->
        <item name="spinBars">true</item>
        <!-- 設定 drawer arrow 的顏色 -->
        <item name="color">?attr/myColor1</item>
    </style>

    <!-- popupTheme浮动菜单 -->
    <style name="Toolbar.PopupTheme" parent="ThemeOverlay.AppCompat.Light">
        <!-- 浮动菜单背景色 -->
        <item name="android:colorBackground">?attr/myColor2</item>
        <!-- 浮动菜单文字颜色 -->
        <item name="android:textColor">?attr/myColor1</item>
    </style>


</resources>
           

MainActivity.java

package com.example.toolbardemo;

import android.content.Context;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.support.v7.widget.Toolbar.OnMenuItemClickListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends ActionBarActivity {
	
	
	private Toolbar toolbar;
	
	private DrawerLayout mDrawerLayout;
	
	private boolean flag;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		//初始化设置主题
		setMyTheme();
		
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		initView();
		
		setSupportActionBar(toolbar);
		getSupportActionBar().setHomeButtonEnabled(true);
		getSupportActionBar().setDisplayHomeAsUpEnabled(true);
		
		ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close){
			@Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
		};
		toggle.syncState();
		mDrawerLayout.setDrawerListener(toggle);
		
		
		toolbar.setOnMenuItemClickListener(new OnMenuItemClickListener() {
			
			@Override
			public boolean onMenuItemClick(MenuItem arg0) {
				// TODO Auto-generated method stub
				
				
				saveMyTheme();//保存主题
				recreate();//重启切换主题
				return false;
			}
		});
		
		
	}

	private void initView() {
		// TODO Auto-generated method stub
		toolbar = (Toolbar)findViewById(R.id.toolbar);
		mDrawerLayout = (DrawerLayout)findViewById(R.id.mDrawerLayout);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		MenuItem menuItem = toolbar.getMenu().getItem(0);
		if(getMyTheme()){
			menuItem.setTitle(R.string.red_blue);
		}else{
			menuItem.setTitle(R.string.yellow_green);
		}
		return true;
	}
	
	//保存主题
	private void setMyTheme(){
		if(getMyTheme()){
			setTheme(R.style.AppTheme_Day);
		}else{
			setTheme(R.style.AppTheme_Night);
		}
	}
	//获取主题
	private boolean getMyTheme(){
		SharedPreferences sp = getSharedPreferences("info", Context.MODE_PRIVATE);
		return sp.getBoolean("theme", true);
	}
	//保存主题
	private void saveMyTheme(){
		SharedPreferences sp = getSharedPreferences("info", Context.MODE_PRIVATE);
		Editor editor = sp.edit();
		editor.putBoolean("theme", !sp.getBoolean("theme", false));
		editor.commit();
	}

	
}
           

下面这个地址有对颜色详细的介绍,可以了解更多的内容:

http://www.android100.org/html/201506/16/153924.html

最好贴上我做的demo,下载地址:

http://download.csdn.net/detail/wduj123/9541314