【菜鳥學安卓】- DrawerLayout + Toolbar 與主題theme 顏色設定
阿新 • • 發佈:2019-01-24
模仿知乎的過程中一直被這個主題顏色困擾,特意寫個Demo ,來理一理這個東西,加強記憶。
貼上效果圖:
主要是兩種主題顏色的切換,註釋應該已經寫的很詳細了,主要的內容都在下面這個styles的設定裡面。
styles.xml:
MainActivity.java<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>
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,下載地址: