1. 程式人生 > >【菜鳥學安卓】- DrawerLayout + Toolbar 與主題theme 顏色設定

【菜鳥學安卓】- DrawerLayout + Toolbar 與主題theme 顏色設定

模仿知乎的過程中一直被這個主題顏色困擾,特意寫個Demo ,來理一理這個東西,加強記憶。

貼上效果圖:


主要是兩種主題顏色的切換,註釋應該已經寫的很詳細了,主要的內容都在下面這個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();
	}

	
}

下面這個地址有對顏色詳細的介紹,可以瞭解更多的內容:

最好貼上我做的demo,下載地址: