Androd Toolbar 的简单使用（转）

14年Android开发者大会提出了Android5.0 系统以及 材料设置 Material Design。在 材料设计中推出了大量的UI效果，其中某些功能 已添加进 兼容包，所以可以在低版本中来实现一些材料设计效果。今天主要介绍的就是 ActionBar的替代品 Toolbar。Toolbar 是在V7包兼容的，所以需要下载最新的V7包。

使用ToolBar主要从以下3个步骤开始：

1. 样式定义显示效果，属性
2. 在布局中使用ToolBar
3. 在代码中设置属性

 1.  首先，来看下如何设置样式。由于Toolbar是替代ActionBar的，还需要使用 ActionBar兼容的Theme，但是需要做一些简单修改。

a. 先把ActionBar隐藏，为了 方便修改可以將原本 AppTheme 的 parent 属性改为 AppTheme.Base，修改文件 res/values/styles.xml

1. <resources>
2. <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
3. <item name="windowActionBar">false</item>
4. <item name="android:windowNoTitle">true</item>
5. </style>
6. <style name="AppTheme" parent="AppTheme.Base"/>
7. </resources>

b. 同样，为统一风格，需要将  /res/values-v21/styles.xml  的样式 parent 属性设置为 AppTheme.Base

1. <resources>
2. <style name="AppTheme" parent="AppTheme.Base"></style>
3. </resources>

2. 在 Activity 布局中 加入 Toolbar 组件。注意：为了向下兼容，要使用 V7包下的 Toolbar，并且去掉最外层布局的padding属性。为了确保Toolbar的高度，需要设置 最小高度为ActionBar高度 android:minHeight="?attr/actionBarSize"。

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. tools:context=".MainActivity">
6. <android.support.v7.widget.Toolbar
7. android:layout_width="match_parent"
8. android:layout_height="<span style="font-family: Arial, Helvetica, sans-serif;">?attr/actionBarSize</span><span style="font-family: Arial, Helvetica, sans-serif;">"</span>
9. android:id="@+id/toolbar" />
10. </RelativeLayout>

3. 在代码中设置Toolbar。需要Activity 继承 ActionBarActivity。通过setSupportActionBar（）替代ActionBar，在OnCreate() 方法中加入以下代码。

1. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
2. setSupportActionBar(toolbar);

完成之后，效果如下：

这个 效果不怎么好，需要对其进行简单的修改，改变一些颜色，修整修整就可以见人了。修改的颜色可以参见下图。

通过上图，不难发现，修改颜色主要从这几个方面开始：

• 状态栏背景色  colorPrimaryDark 属性
• 如果还是使用ActionBar，colorPrimary 属性设置背景  如果时Toolbar，布局中background 属性设置背景
• 导航栏背景色 navigationBarColor 属性 ，需要在 5.0 才可以使用，所以属性只可以在 /res/values-v21/styles.xml  设置
• 主界面背景色 windowBackground

 

如果要使用这些属性，需要从三个地方开始

a.  主样式中设置基本属性  res/values/styles.xml

1. <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
2. <item name="windowActionBar">false</item>
3. <item name="android:windowNoTitle">true</item>
4. <item name="colorPrimary">#66cc99</item>
5. <item name="colorPrimaryDark">#66cc99</item>
6. <item name="android:windowBackground">@color/back</item>
7. </style>

 

b.   v21中设置导航栏背景

1. <style name="AppTheme" parent="AppTheme.Base">
2. <item name="android:navigationBarColor">#66cc99</item>
3. </style>

c.   布局中设置 Toolbar背景

1. <android.support.v7.widget.Toolbar
2. android:layout_width="match_parent"
3. android:layout_height="wrap_content"
4. android:id="@+id/toolbar"
5. android:background="#339999"
6. android:minHeight="?attr/actionBarSize" />

设置完成后，效果如下：

 

上一篇简单的介绍了如何简单使用Toolbar,这篇主要介绍Toolbar的进一步设置。

既然Toolbar要替代ActionBar，那么Toolbar的功能应该更为强大，在Toolbar上有一些默认的显示效果，先来看下。

通过上图，不难看出，我们其实是可以为Toolbar设置以下属性的：

• 上级按钮 (upbutton)   setNavigationIcon
• APP 的图标      setLogo
• 主标题  setTitle
• 副标题  setSubtitle
• 设定菜单各按鈕的动作 setOnMenuItemClickListener

在MainActivity的OnCreate() 方法中加入以下代码：

1. toolbar.setLogo(R.drawable.ic_launcher);
2. toolbar.setNavigationIcon(R.drawable.ic_launcher);
3. toolbar.setTitle(getResources().getString(R.string.app_name));
4. toolbar.setSubtitle("ToolBar");
5. toolbar.setOnMenuItemClickListener(this);
6. toolbar.setTitleTextColor(0xffffffff);
7. toolbar.setSubtitleTextColor(0xffffffff);

注意：setNavigationIcon(),setOnMenuItemClickListener() 需要放在 setSupportActionBar之后才会生效

Toolbar菜单效果与ActionBar的实现一样，都是OptionsMenu。需要在Menu中添加 item ，然后通过Toolbar显示出来。

res/menu/menu_main.xml

1. <menu xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:app="http://schemas.android.com/apk/res-auto"
3. xmlns:tools="http://schemas.android.com/tools"
4. tools:context=".MainActivity">
5. <item
6. android:id="@+id/action_settings"
7. android:title="@string/action_settings"
8. android:orderInCategory="100"
9. android:icon="@drawable/ic_launcher"
10. app:showAsAction="always" />
11. <item
12. android:id="@+id/action_test"
13. android:title="@string/action_settings"
14. android:orderInCategory="10"
15. android:icon="@drawable/ic_launcher"
16. app:showAsAction="ifRoom" />
17. </menu>

然后在MainActivity中添加以下代码

1. @Override
2. public boolean onCreateOptionsMenu(Menu menu) {
3. getMenuInflater().inflate(R.menu.menu_main, menu);
4. return true;
5. }
6. @Override
7. public boolean onMenuItemClick(MenuItem menuItem) {
8. Toast.makeText(this, menuItem.getTitle(), Toast.LENGTH_SHORT).show();
9. return false;
10. }

运行效果如下：

通过点击 菜单，可以发现能够触发 onMenuItemClick() 方法，但是，点击上级按钮 (upbutton)并没有触发该事件，因为它有自己独立的点击事件。

1. toolbar.setNavigationOnClickListener(new View.OnClickListener() {
2. @Override
3. public void onClick(View v) {
4. Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();
5. }
6. });

在Android 原生样式应用中，有一个特别漂亮的效果，在使用抽屉布局的时候，展开或关闭抽屉时，Toolbar的 navigation drawer（upButton） 有一个动画，由三个横线旋转成箭头，大概如下：

静态图片展示不出来动画效果，请自行补脑！

这个效果其实是由 Toolbar+DrawerLayout 实现的。

可以通过以下几步实现：

1. 在布局中加入DrawerLayout
2. 在代码中找到DrawerLayout，将DrawerLayout 与 Toolbar关联
3. 通过样式修改 navigation drawer 的颜色

1. 在布局中加入DrawerLayout   res/layout/activity_main.xml

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. tools:context=".MainActivity">
6. <android.support.v7.widget.Toolbar
7. android:layout_width="match_parent"
8. android:layout_height="?attr/actionBarSize"
9. android:id="@+id/toolbar"
10. android:background="#339999" />
11. <android.support.v4.widget.DrawerLayout
12. android:layout_below="@+id/toolbar"
13. android:id="@+id/drawerlayou"
14. android:layout_width="match_parent"
15. android:layout_height="match_parent">
16. <!--Main Content-->
17. <LinearLayout
18. android:layout_width="match_parent"
19. android:layout_height="match_parent"
20. android:background="#123456">
21. </LinearLayout>
22. <!--DrawerLayout Content-->
23. <LinearLayout
24. android:layout_width="300dp"
25. android:layout_height="match_parent"
26. android:background="#345678"
27. android:layout_gravity="start" />
28. </android.support.v4.widget.DrawerLayout>
29. </RelativeLayout>

 

2. 在MainActivity中找到DrawerLayout，将DrawerLayout 与 Toolbar关联

1. final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayou);
2. ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name);
3. toggle.syncState();
4. drawerLayout.setDrawerListener(toggle);
5. //通过 NavigationDrawer 打开关闭 抽屉
6. toolbar.setNavigationOnClickListener(new View.OnClickListener() {
7. @Override
8. public void onClick(View v) {
9. Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();
10. if (drawerLayout.isDrawerOpen(Gravity.START))
11. drawerLayout.closeDrawer(Gravity.START);
12. else
13. drawerLayout.openDrawer(Gravity.START);
14. }
15. });

 

3. 修改样式 为如下：

1. <resources>
2. <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
3. <item name="windowActionBar">false</item>
4. <item name="android:windowNoTitle">true</item>
5. <item name="colorPrimary">#66cc99</item>
6. <item name="colorPrimaryDark">#66cc99</item>
7. <item name="android:windowBackground">@color/back</item>
8. <!-- 使用自定义样式-->
9. <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>
10. </style>
11. <style name="AppTheme" parent="AppTheme.Base" />
12. <!--自定义 navigation drarwer 的样式-->
13. <style name="AppTheme.MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
14. <item name="spinBars">false</item>
15. <item name="color">#FFFFFF</item>
16. </style>
17. </resources>

 

其中：

spinBars  旋转效果      默认值为 true，有旋转效果 ；false则无旋转效果。

color navigation icon 的顏色

如果想要抽屉遮住 Toolbar，只需要改下布局，将Toolbar放入DrawerLayout的主界面即可：

1. <android.support.v4.widget.DrawerLayout
2. android:id="@+id/drawerlayou"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent">
5. <!--Main Content-->
6. <LinearLayout
7. android:layout_width="match_parent"
8. android:layout_height="match_parent"
9. android:background="#123456">
10. <!-- android:elevation="5dp" 加上阴影-->
11. <android.support.v7.widget.Toolbar
12. android:layout_width="match_parent"
13. android:layout_height="?attr/actionBarSize"
14. android:id="@+id/toolbar"
15. android:elevation="5dp"
16. android:background="#339999" />
17. </LinearLayout>
18. <!--DrawerLayout Content-->
19. <LinearLayout
20. android:layout_width="300dp"
21. android:layout_height="match_parent"
22. android:background="#345678"
23. android:layout_gravity="start" />
24. </android.support.v4.widget.DrawerLayout> 

    Toolbar 相对于 ActionBar的强大之处在于，ToolBar有更强大的自定义效果。因为ToolBar本身就是一个ViewGroup，可以往Toolbar中放入各种组件。

    1. <android.support.v7.widget.Toolbar
    2. android:layout_width="match_parent"
    3. android:layout_height="?attr/actionBarSize"
    4. android:id="@+id/toolbar"
    5. android:elevation="5dp"
    6. android:background="#339999">
    7. <RelativeLayout
    8. android:layout_width="match_parent"
    9. android:layout_height="match_parent"
    10. android:background="#F00">
    11. <Button
    12. android:id="@+id/toolbar_btn"
    13. android:layout_width="wrap_content"
    14. android:layout_height="match_parent"
    15. android:text="Button"/>
    16. <ImageView
    17. android:layout_width="20dp"
    18. android:layout_height="20dp"
    19. android:src="@drawable/ic_launcher"
    20. android:layout_centerInParent="true" />
    21. <TextView
    22. android:layout_alignParentRight="true"
    23. android:layout_centerVertical="true"
    24. android:layout_width="wrap_content"
    25. android:layout_height="wrap_content"
    26. android:text="邓紫棋" />
    27. </RelativeLayout>

    可以根据自己的需求，设置各种效果。但是，左边的边距一直去不了，如果知道的朋友，请给我留言，谢谢！