Android常用UI之Toolbar
转载请注明出处：http://blog.csdn.net/h_zhang/article/details/51232773
Android3.0之后引入了ActionBar控件，但是由于ActionBar操作的诸多不便，并且官方也在一定程度上承认ActionBar限制了android app设计与开发的弹性。所以google官方建议使用Toolbar代替ActionBar，Toolbar比ActionBar使用起来更加灵活。而在material design中也对其做了名称的定义：app bar。
app bar可以向用户提供非常熟悉的可视化结构和交互元素。使用app bar可以让用户快速了解怎样使用你的应用，这就给用户一个很好的体验。
应用程序中使用app bar可有如下优点：
1. 可以显示出用户所处的当前位置；
2. 可以提供一些重要的交互操作，比如搜索(search)操作；
3. 可以实现导航功能，让用户快速回到Home Activity；
本文就主要介绍一下Android Toolbar的使用方法。
设置Toolbar
即使再简单的Toolbar也应该具有两个元素，左边显示activity的标题，右边显示一个overflow菜单。为了让android 5.0以前也能使用Toolbar，我们得使用support v7包中的Toolbar来为activity设置toolbar。
设置Toolbar需要注意一下两点：
1. 你的Activity需要继承自AppCompatActivity
2. 你得先定义一个NoActionBar的主题，并让你的应用程序使用这个主题。这样做的目的是阻止你的应用程序使用本地ActionBar的功能。
下面贴一个示例程序：
首先看样式定义文件，values/styles.xml :
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/> <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/> </resources>主要就是定义了一些主题，其中主题AppTheme中colorPrimary属性就指定了Toolbar的底色。colorPrimaryDark属性指定顶部状态栏的颜色。
接下来在activity布局文件中加上Toolbar的布局。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="cn.hebut.toolbar2.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/AppTheme.AppBarOverlay" app:title="首页" app:logo="@mipmap/ic_launcher" app:popupTheme="@style/AppTheme.PopupOverlay"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"/> </LinearLayout></android.support.design.widget.CoordinatorLayout>利用android.support.v7.widget.Toolbar定义了Toolbar的布局。通过app:title属性设置Toolbar的标题，通过app:logo属性设置Toolbar的图标。还可以通过app:titleTextColor属性设置标题文字颜色等等。
接着再看MainActivity.java中用代码如何设置Toolbar：
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; }}代码相当简单，通过setSupportActionBar()方法将布局文件中的Toolbar设置进去就可以了。
在menu_main.xml布局文件中添加action按钮。
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="cn.hebut.toolbar2.MainActivity"> <item android:id="@+id/action_setting" android:icon="@mipmap/ic_settings" android:title="设置" app:showAsAction="never"/></menu>action按钮通过item标签设置。其中icon属性指定action按钮的图标，如果anction按钮在Toolbar中显示就显示该图标；title属性指定action按钮的名称，如果anction按钮在overflow中显示就显示title。注意，在overflow按钮中，系统默认只显示title，而不显示icon；最后showAsAction属性设置为”never”，表示该action按钮只在overflow按钮中显示，showAsAction属性还可以指定为ifRoom，ifRoom表示如果Toolbar中有空间，就在Toolbar中显示，如果Toolbar中没有足够的空间，就在overflow中显示。
下面是manifest文件：
<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme.NoActionBar"> <activity android:name=".MainActivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity></application>第6行，设置app的样式为AppTheme.NoActionBar，这样应用程序就可以阻止使用系统自带的ActionBar。
运行程序，得到如下效果：
上图中最右边的三个点就是overflow按钮。点击overflow会发现里面有个title为”设置”的action按钮。
响应action按钮点击事件
在menu_main.xml文件中添加几个action按钮；
menu_main.xml
<item android:id="@+id/action_search" android:icon="@mipmap/ic_search" android:title="搜索" app:showAsAction="ifRoom"/><item android:id="@+id/action_add" android:icon="@mipmap/ic_add" android:title="添加" app:showAsAction="ifRoom"/><item android:id="@+id/action_setting" android:icon="@mipmap/ic_settings" android:title="设置" app:showAsAction="never"/>action按钮的事件响应主要在Activity中的onOptionsItemSelected()方法中实现，具体代码如下。
MainActivity.java :
public boolean onOptionsItemSelected(MenuItem item){ switch (item.getItemId()) { case R.id.action_search: Toast.makeText(MainActivity.this, "搜索", Toast.LENGTH_SHORT).show(); break; case R.id.action_add: Toast.makeText(MainActivity.this, "添加", Toast.LENGTH_SHORT).show(); break; case R.id.action_setting: Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show(); break; } return super.onOptionsItemSelected(item);}程序运行效果图：
添加导航按钮
导航按钮可以让用户很容易的返回app的主界面，这就能够产生非常好的用户体验。给Toolbar添加导航按钮功能也是非常简单的，通过如下两步即可：
1. 在manifest文件中通过android:parentActivityName属性为Activity配置parent activity
2. 在代码中通过ActionBar.setDisplayHomeAsUpEnabled(true)方法使能导航按钮
下面我们就来实现一下，先做一些准备工作。在首页增加一个按钮；
activity_main.xml :
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/AppTheme.AppBarOverlay" app:title="首页" app:logo="@mipmap/ic_launcher" app:popupTheme="@style/AppTheme.PopupOverlay"/><TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"/><Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="child activity" android:onClick="start"/>相当简单，就是增加了一个Button按钮，点击button执行start()方法。
MainActivity.java :
public void start(View view){ Intent i = new Intent(this, ChildActivity.class); startActivity(i);}start()方法启动了一个child activity。
ChildActivity.java :
public class ChildActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_child); Toolbar toolbar = (Toolbar) findViewById(R.id.child_toolbar); setSupportActionBar(toolbar); ActionBar ab = getSupportActionBar(); //使能app bar的导航功能 ab.setDisplayHomeAsUpEnabled(true); } @Override public boolean onOptionsItemSelected(MenuItem item) { return super.onOptionsItemSelected(item); }}第11行，通过getSupportActionBar()方法得到ActionBar实例；第14行，调用ActionBar的setDisplayHomeAsUpEnabled()使能导航功能。
接下来看一下child activity的布局文件
<android.support.design.widget.CoordinatorLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="cn.hebut.toolbar3.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/child_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/AppTheme.AppBarOverlay" app:title="childActivity" app:logo="@mipmap/ic_launcher" app:popupTheme="@style/AppTheme.PopupOverlay"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="this is child activity!" android:textSize="22sp"/> </LinearLayout></android.support.design.widget.CoordinatorLayout>没什么好说的。最后，在manifest文件中为ChildActivity指定parent Activity。
<activity android:name=".ChildActivity" android:label="@string/title_activity_child" android:parentActivityName=".MainActivity"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".MainActivity"/></activity>通过android:parentActivityName属性指定ChildActivity的parent Activity。注意：meta-data标签是为了兼容android 4.0或者更小的版本。
程序运行效果图：
最后需要注意一点：你不需要对导航按钮的点击事件做出响应。因为点击导航按钮的响应事件，父类已经已经实现好了，你只需要调用父类方法即可。代码如下：
public boolean onOptionsItemSelected(MenuItem item){ return super.onOptionsItemSelected(item);}添加Action View
Action View和Action按钮大致类似，都是为了通过Toolbar和用户进行交互操作。不过Action View提供了更加丰富的功能。举个例子：一个搜索功能的Action View可以让用户实现搜索操作，并且这个操作就在Toolbar中完成，而不需要切换activity或者fragment。support v7包中提供了很多现成的Action View，其中就包括SearchView，用来实现搜索功能。下面我们来实现一下。
添加一个Action View只需要在menu_main.xml中为item标签添加actionViewClass属性即可。
menu_main.xml:
<item android:id="@+id/action_search" android:icon="@mipmap/ic_search" android:title="搜索" app:showAsAction="ifRoom|collapseActionView" app:actionViewClass="android.support.v7.widget.SearchView"/>actionViewClass属性指定为support v7包下SearchView；showAsAction指定为ifRoom|collapseActionView，其中collapseActionView表示：如果用户没有和action view交互，该Action view该如何在Toolbar中显示。
下面贴一下效果：
可以看到，如果用户不点击Action View，Action View将会和普通Action按钮一样；如果用户点了Action View的icon，Action View将会展开填充整个Toolbar。
你还可以在代码中对SearchView的属性就行配置，这些工作主要在Activity的onCreateOptionsMenu()方法中实现。
public boolean onCreateOptionsMenu(Menu menu){ getMenuInflater().inflate(R.menu.menu_main, menu); MenuItem searchItem = menu.findItem(R.id.action_search); SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem); //配置searchView... return true;}有的时候应用程序需要在Action View展开与合并的时候显示不同的界面。这时程序就可以对Action View的展开与合并进行监听。
public boolean onCreateOptionsMenu(Menu menu){ getMenuInflater().inflate(R.menu.menu_main, menu); MenuItem searchItem = menu.findItem(R.id.action_search); //定义一个监听器 OnActionExpandListener expandListener = new OnActionExpandListener() { @Override public boolean onMenuItemActionExpand(MenuItem item) { Toast.makeText(MainActivity.this, "expand", Toast.LENGTH_SHORT).show(); return true; } @Override public boolean onMenuItemActionCollapse(MenuItem item) { Toast.makeText(MainActivity.this, "collapse", Toast.LENGTH_SHORT).show(); return true; } }; //设置监听器 MenuItemCompat.setOnActionExpandListener(searchItem, expandListener); return true;}下面给个效果图：
添加Action Provider
Action Provider的功能就更加丰富了，Action Provider可以使用自定义布局。一个Action Provider初始状态也和Action按钮相似，可以显示在Toolbar中，也可以显示在Overflow按钮中。当用户点击Action Provider，用户可以按照自己想要的方式控制点击的响应事件。比如说，点击Action Provider后，用户可以展示一个子菜单。
下面我们自定义一个简单的Action Provider用于展示子菜单功能。
使用Action Provider很简单，只需要在menu资源文件中的item标签设置app:actionProviderClass属性即可：
menu_main.xml:
<item android:id="@+id/action_add" android:icon="@mipmap/ic_add" android:title="添加" app:showAsAction="ifRoom" app:actionProviderClass="cn.hebut.toolbar2.MyActionProvider"/>可以看到actionProviderClass设置了一个自定义的MyActionProvider。下面我们来看如果自定义ActionProvider：
public class MyActionProvider extends ActionProvider { public MyActionProvider(Context context) { super(context); } @Override public View onCreateActionView() { return null; } @Override public void onPrepareSubMenu(SubMenu subMenu) { subMenu.clear(); subMenu.add("sub item 1") .setIcon(R.mipmap.ic_launcher) .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { return true; } }); subMenu.add("sub item 2") .setIcon(R.mipmap.ic_launcher) .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { return true; } }); } @Override public boolean hasSubMenu() { return true; }}我们定义了MyActionProvider类并继承ActionProvider。为了表示这个Action Provider有子菜单，需要重写hasSubMenu()方法并返回true。然后在onPrepareSubMenu()方法中通过SubMenu的add()方法添加子菜单。
好，最后我们看一下自定义ActionProvider的执行效果图：
可以发现，这个自定义ActionProvier的功能和overflow很相似。
OK，关于Android的Toolbar的使用用法就说这么多，相信通过对本篇文章的学习，大家基本能掌握Toolbar的使用方法了。
参考文章：
Android Developers: http://developer.android.com/intl/zh-cn/training/appbar/index.html
郭霖大神的文章：http://blog.csdn.net/guolin_blog/article/details/18234477
更多相关文章
- Android 关闭虚拟按钮、底部导航条
- Android圆角按钮的制作方法
- Android clickable 属性问题
- Android相对属性布局总结
- 快乐周末：典型的 Android 用户是穿T恤和牛仔裤的书呆子？
- android android:windowSoftInputMode相关属性