android：ToolBar详解（手把手教程）
基础使用
分成下列三个部分：
风格(style)
界面(layout)
程序(java)
风格(style)
风格要调整的地方有二
一在res/values/styles.xml中
二在res/values-v21/styles.xml中
因为此范例只使用Toolbar，所以我们要将原本的ActionBar隐藏起来，为方便，在/res/values/styles.xml增加一个名为AppTheme.Base的风格。然后将原本APPTheme的parent属性改为AppTheme.Base.
<resources>
<!-- Base application theme. -->
<style name = "AppTheme" parent ="AppTheme.Base">
</style>
<style name = "AppTheme.Base" parent = "Theme.AppCompat">
<item name = "windowActionBar">false</item>
<del><item name="android:windowNoTitle">true</item></del>
<!-- 使用 API Level 22 編譯的話，要拿掉前綴字 -->
<item name = "windowNoTitle">true</item>
</style>
再来调整Android 5.0的style: /res/values-v21/styles.xml，也将其parent属性改为AppTheme.Base:
<?xml version = "1.0" encoding ="utf-8"?>
<resources>
<style name = "AppTheme" parent = "AppTheme.Base">
</style>
</resources>
界面(Layout)
在activity_main.xml里面添加Toolbar控件：
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" >
</android.support.v7.widget.Toolbar>
这里需要注意，要将RelativeLayout里的四个方向的padding属性去掉，并记得将原本的Hello World设为layout_below = "@+id/toolbar"
程序(java)
在MainActivity.java中加入Toolbar的声明
Toolbar toolbar = (ToolBar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
声明之后，再将之用setSupportActionBar()设定，Toolbar即能取代原本的actionbar了。
自定义颜色(Customization color)
- ColorPrimary（状态栏颜色）：在风格(styles)或是主题(themes)里进行设定。
- App bar底色
这个设定分为二，若你的 android app 仍是使用 actionbar ，则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可；可若是采用 toolbar 的话，则要在界面 (layout) 里面设定 toolbar 控件的 background 属性。 - navigationBarColor(导航栏底色)
仅能在 API v21 也就是 Android 5 以后的版本中使用， 因此要将之设定在 res/values-v21/styles.xml 里面
a)主视窗底色：windowBackground
我们需要设定的地方有三，一是style中（/res/values/styles.xml）
<style name = "AppTheme.Base" parent = "Theme.AppCompat">
<item name = "windowActionBar">false</item>
<item name = "android:windowNoTitle">true</item>
<!--Actionbar color -->
<item name = "colorPrimary">@color/accent_material_dark</item>
<!--Status bar color -->
<item name = "colorPrimaryDark">@color/accent_material_light</item>
<!-- window color-->
<item name = "android:windowBackground">@color/dim_foreground_materi al_dark</item>
</style>
再来是v21的style中的(res/values-v21/styles.xml)
<style name="AppTheme" parent="AppTheme.Base">
<!--Navigation bar color-->
<item name="android:navigationBarColor">@color/accent_material_light</item>
</style>
最后，就是Toolbar的background进行设定
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary" >
</android.support.v7.widget.Toolbar>
在本范例中，Toolbar是设定来在activity_main.xml，对其设定background属性：android:background="?attr/colorPrimary"，这样就可以使之沿用ActionBar的颜色设定喽。
控件(component)
在<android.support.v7.widget.Toolbar>标签中，还有几个大家常用的元素可以使用，如下图：
- setNavigation
即设定up botton的图标，因为Material的界面，在Toolbar这里的up botton样式也有别于过去的ActionBar。 - setLogo
APP的图标 - setTitle
主标题 - setSubtitle
副标题 - setOnMenuItemClickListener
设定菜单各按钮的动作
在MainActivity.java中的代码：
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);
// Navigation Icon 要設定在 setSupoortActionBar 才有作用
// 否則會出現 back button
toolbar.setNavigationIcon(R.drawable.ab_android);
这里需要留意的是setNavigationIcon需要放在setSupportActionBar之后才会生效。
菜单部分，需要现在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=".MainActivity">
<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_edit"
android:orderInCategory="90"
android:icon="@drawable/ab_share"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>
再回到MainActivity.java中加入OnMenuItemClickListener的监听者：
private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem menuItem) {
String msg = "";
swtich(menuItem.getItemId()) {
case R.id.action_edit:
msg +="Click edit";
break;
case R.id.action_share:
msg += "Click share";
break;
case R.id.action_settings:
msg +="CLick settting";
break;
}
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return ture;
}
};
将onMenuItemClick监听者设置给toolbar
setSupportActionBar(toolbar);
...
//Menu item click 的监听事件一样要设定在 setSupportActionBar 才有作用
toolbar.setOnMenuItemClickListener(onMenuItemClick);
补充资料
android:layout_above="@id/xxx" --将控件置于给定ID控件之上
android:layout_below="@id/xxx" --将控件置于给定ID控件之下
android:layout_toLeftOf="@id/xxx" --将控件的右边缘和给定ID控件的左边缘对齐
android:layout_toRightOf="@id/xxx" --将控件的左边缘和给定ID控件的右边缘对齐
android:layout_alignLeft="@id/xxx" --将控件的左边缘和给定ID控件的左边缘对齐
android:layout_alignTop="@id/xxx" --将控件的上边缘和给定ID控件的上边缘对齐android:layout_alignRight="@id/xxx" --将控件的右边缘和给定ID控件的右边缘对齐android:layout_alignBottom="@id/xxx" --将控件的底边缘和给定ID控件的底边缘对齐android:layout_alignParentLeft="true" --将控件的左边缘和父控件的左边缘对齐
android:layout_alignParentTop="true" --将控件的上边缘和父控件的上边缘对齐
android:layout_alignParentRight="true" --将控件的右边缘和父控件的右边缘对齐android:layout_alignParentBottom="true" --将控件的底边缘和父控件的底边缘对齐android:layout_centerInParent="true" --将控件置于父控件的中心位置
android:layout_centerHorizontal="true" --将控件置于水平方向的中心位置
android:layout_centerVertical="true" --将控件置于垂直方向的中心位置
