参考博客地址:原博客地址
1.概述:
Android3.0 Android推了ActionBar这个控件,而到了2013年Google开始大力推动所谓的AndroidStyle,想要逐渐改善过去纷乱的android界面设计,希望让Android终端使用者尽可能在android手机里有一个一致的体验,ActionBar过去最多人使用的两大套件就是ActionBarSharelock,及官方在support library v7里的AppCompat.
既然介绍Toolbar,也意味着官方在某些程度上认为ActionBar限制了android app的开发与设计的弹性,而在material design也对之做了名称的定义:App bar,那么如何在android app中用toolbar这个控件来做出一个基本的app bar
2.基础套用
2.1风格
风格要调整的地方有二:
- 一在res/values/styles.xml里面
- 二在res/values-21/styles.xml里面
为了之后的方便,先在values/styles.xml里增加一个名为AppTheme.Base的风格
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
这里试用AndroidAPI22和以上要去掉"android:"否则会报错
AppCompat does not support the current theme features: { windowActionBar: false, windowActionBarOverlay: false, android:windowIsFloating: false, windowActionModeOverlay: false, windowNoTitle: false }```
因为此范例只要用Toolbar,所以我们要让原本的ActionBar隐藏起来,然后将原本的AppTheme的parent属性改为上面的AppTheme.Base
### 2.2.界面
在activity_main里面添加
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="@android:color/white"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>
###2.3Java程序
在Activity里面加入ToolBar声明:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
##3.自定义颜色
- colorPrimaryDark(状态栏底色):在风格(style)或者主题(Theme)里设定
- AppBar底色
这个设定分为二,若你的android app仍然是使用ActionBar,则直接在风格(style)或者主题(themes)里面设定colorPrimary参数即可;
可视若采用Toolbar的话,则要在界面(layout)里面设置Toolbar的background属性.
- navigationBarColor(导航栏底色):仅能在API21+也就是Android5.0之后的版本使用,因此要将之设定在res/values-21/styles.xml里面
- 主视窗底色:windowBackground
所以我们在这里设置的地方有三,一是style中(res/values/styles.xml)
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowBackground">@color/windowBackground</item></style>
二是v21(res/values-v21/styles.xml)中
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:navigationBarColor">@color/colorAccent</item>
</style>```
三是本篇主角Toolbar的background设定
<android.support.v7.widget.Toolbar
android:background="@color/toolbar"
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>
toolbar是设定在activity_main.xml中,对其设定值background属性可以设定为
android:background="?attr/colorPrimary"
这样就可以沿用ActionBar的颜色设定了
4控件(Compoment)
大概来说,预设常用的几个元素:
- setNavigationIcon:即设定up Button的图标
- setLogo:设定APP的图标
- setTitle:主标题
- setSubtitle:副标题
- setOnMenuItemClickListener:设定菜单各按钮的动作
写代码
除了菜单以外的部分
Toolbar toolbar =(Toolbar)findViewById(R.id.toolbar);
//AppLogo
toolbar.setLogo(R.drawable.ic_launcher);
//Title
toolbar.setTitle(R.string.app_name);
//SubTitle
toolbar.setSubtitle("subtitle");
setSupportActionBar(toolbar);
//navigationIcon必须在setSupportActionBar之后才会有作用
//否则会出现backButton
toolbar.setNavigationIcon(R.drawable.ab_android);
菜单部分
需要先在res/menu/menu_main.xml作定义
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".ToolbarActivity" >
<item
android:id="@+id/action_edit"
android:title="@string/action_edit"
android:orderInCategory="80"
android:icon="@drawable/ab_edit"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_share"
android:title="@string/action_share"
android:orderInCategory="90"
android:icon="@drawable/ab_share"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_setting"
android:title="@string/action_setting"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>
回到Activity写OnMenuItemClickListener
public boolean onMenuItemClick(MenuItem item) {
String message = ""
switch (item.getItemId()){
case R.id.action_edit:
message += "";
break;
case R.id.action_share:
message += "";
break;
case R.id.action_setting:
message += "";
break;
}
if (!message.equals(""))
Toast.makeText(this,message,Toast.LENGTH_SHORT).show();
return true;
}
这个是让Activity实现了OnMenuItemClickListener,复写的方法,然后将这个监听器设置给Toolbar
toolbar.setOnMenuItemClickListener(this);
和 setNavigationIcon 一样，需要將之设定在 setSupportActionBar 之后才有作用。
做个简单的说明：
- 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 的属性中设置
**最后需要注意的是：使用material主题的时候，必须设定targetSdkVersion =21，否则界面看起来是模糊的 **
