ToolBar详解

2016-04-17 本文已影响1503人 cxm11

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)

description.JPG

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>标签中，还有几个大家常用的元素可以使用，如下图：

Toolbar_component.JPG

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中RelativeLayout各个属性的含义

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" --将控件置于垂直方向的中心位置