Material Design主題與ToolBar講解

 

一、Material Design 的主題

Material Design 的主題有：

• @android:style/Theme.Material (dark version)

• @android:style/Theme.Material.Light (light version)

• @android:style/Theme.Material.Light.DarkActionBar

與之對應的Compat Theme:

• Theme.AppCompat

• Theme.AppCompat.Light

• Theme.AppCompat.Light.DarkActionBar

 

定製 Color Palette

<resources>
    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Theme.AppCompat">
 
        <!-- customize the color palette -->
        <item name="colorPrimary">@color/material_blue_500</item>
        <item name="colorPrimaryDark">@color/material_blue_700</item>
        <item name="colorAccent">@color/material_green_A200</item>
    </style>
</resources>

• colorPrimary 對應ActionBar的顏色。

• colorPrimaryDark對應狀態欄的顏色。

• colorAccent 對應EditText編輯時、RadioButton選中、CheckBox等選中時的顏色。

 

 

二、ToolBar講解

 

1. setNavigationIcon即設定 up button 的圖標，由於 Material 的界面，在 Toolbar 這裏的 up button 樣式也就有別於 ActionBar 咯。
2. setLogoAPP 的圖標。
3. setTitle 主標題。
4. setSubtitle 副標題。
5. setOnMenuItemClickListener設置選項菜單各按鈕的處理事件。

 

示例代碼：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 
// App Logo
toolbar.setLogo(R.drawable.ic_launcher);
// Title
toolbar.setTitle("My Title");
// Sub Title
toolbar.setSubtitle("Sub title");
 
setSupportActionBar(toolbar);
 
// setNavigationIcon 要在 setSupoortActionBar 以後纔有做用
// 不然會出現 back button
toolbar.setNavigationIcon(R.drawable.ab_android);

 

三、補充Meterial Design主題屬性

 

• colorPrimaryDark
  • 狀態欄背景色。
  • 設置在 style 的屬性中。
• textColorPrimary
  • App bar 上的標題與更多選項中的文字顏色。
  • 設置在 style 的屬性中
• App bar 的背景色
  • Actionbar 的背景色設置在 style 中的 colorPrimary。
  • Toolbar 的背景色設置在其 layout 中的 background 的屬性中。
• colorAccent
  • 各控制元件(如：check box、switch 或是 radoi) 被勾選 (checked) 或是選中 (selected) 的顏色。
  • 設置在 style 的屬性中
• colorControlNormal
  • 各控制元件的預設顏色。
  • 設置在 style 的屬性中
• windowBackground
  • App 的背景色。
  • 設置在 style 的屬性中
• navigationBarColor
  • 導航列的背景色，但只能用在 API Level 21 (Android 5) 以上的版本
  • 設置在 style 的屬性中

 

參考：http://blog.mosil.biz/2014/10/android-toolbar/

 

2015-06-17

17:22:03