Material Design主题与ToolBar讲解

 

1、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等选中时的颜色。

 

 

2、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);

 

3、补充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