Android标题栏ToolBar详解

很多时候，Androdi应用程序的UI都按照iOS的设计标准实现。以至于Android应用程序失去了许多系统特性。但并无法掩饰许多Android自带的非常好用的系统级控件。

这篇文章简单介绍ToolBar的知识，实践ToolBar的使用。

---

记录我跟Android的邂逅。

---

ToolBar简介

从 Android 3.0（API 级别 11）开始，所有使用默认主题的 Activity 均使用 ActionBar 作为应用栏。不过，经过不同 Android 版本的演化，应用栏功能已逐渐添加到原生 ActionBar 中。因此，原生 ActionBar 的行为会随设备使用的 Android 系统的版本而发生变化。相比之下，Toolbar 可以在任何能够使用该支持库的设备上使用。
例如，Toolbar 小部件能够在运行 Android 2.1（API 级别 7）或更高版本的设备上提供 Material Design 体验，但除非设备运行的是 Android 5.0（API 级别 21）或更高版本，否则原生操作栏不会支持 Material Design。

ToolBar的使用

1.添加依赖库

compile 'com.android.support:appcompat-v7:26.0.0-alpha1'

2.确保 Activity 可以扩展 AppCompatActivity

public class MyActivity extends AppCompatActivity {
  // ...
}

3.修改App的主题

<application
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    />

4.在Activity布局中添加一个ToolBar

<android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Material Design 规范建议应用栏具有 4 dp 的仰角。
将工具栏定位在 Activity 布局的顶部，因为您要使用它作为应用栏。

5.Activity中进行设置

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(myToolbar);
    }

经过以上5个步骤，ToolBar就已经成功添加到我们Activity的顶部了。

但是目前ToolBar的样式只是显示了我们应用的标题，接下来我们看如何在ToolBar中增加按钮。效果如图

---

ToolBar的Action操作

ToolBar的一大亮点之一就是允许添加很多的Action动作在其上。

1.添加一个Action按钮

在res下新建menu资源文件夹，然后在menu文件夹中创建菜单栏按钮布局menu_main.xml文件（当然你可以随便命名）。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView" />

    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite_black_48dp"
        android:title="@string/action_favorite"
        app:showAsAction="always"/>

    <!-- Settings, should always be in the overflow -->
    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
</menu>

其中一个关键的属性showAsAction是控制按钮在Item中的显示情况的。有几个值可以设置:

• never：永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好把标题都带上；
• ifRoom：会显示在Item中，但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个，依据屏幕的宽窄而定；
• always：无论是否溢出，总会显示；
• withText：withText值示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action bar空间的限制，文本标题有可能显示不全；
• collapseActionView：声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。
  一般要配合ifRoom一起使用才会有效果。

Activity中操作ToolBar的Action

初始化menue的布局文件：

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

控制menue中item的点击事件：

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
                // User chose the "Settings" item, show the app settings UI...
                return true;

            case R.id.action_favorite:
                Toast.makeText(mContext,"点击了喜欢菜单",Toast.LENGTH_SHORT).show();
                return true;

            default:
                // If we got here, the user's action was not recognized.
                // Invoke the superclass to handle it.
                return super.onOptionsItemSelected(item);

        }
    }

经过以上两个步骤，你就可以在ToolBar中随意定制右侧的按钮，并操作其点击事件。

---

ToolBar的返回操作

使用ToolBar可以非常简单的实现页面的返回操作。例如，我现在新建了一个SecondActivity，并在SecondActivity中也加入了ToolBar控件，那么通过以下几步，就可以很简单的实现ToolBar上面添加一个返回按钮，点击返回上一页的操作。

首先，声明上一级Activity

 <activity android:name=".SecondActivity"
            android:parentActivityName=".MainActivity">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".MainActivity" />
        </activity>

Android4.1以后新增的android:parentActivityName属性可以帮助SecondActivity声明上一级Activity。这里为了适配低版本需要同时声明meta-data属性。

给ToolBar设置允许返回操作

public class SecondActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);

        Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
        setSupportActionBar(myToolbar);

        ActionBar ab = getSupportActionBar();
        ab.setDisplayHomeAsUpEnabled(true);
    }
}

这样ToolBar自己新增了返回按钮，并实现了点击返回按钮返回到上一级MainAcitity的动作。

---

ToolBar的扩展功能

此外，ToolBar不仅可以添加按钮，还可以添加一些特定的view，比如SearchView。
我们给menu_main文件中新增一个搜索的view

<item android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView" />

效果如下：

由于我们给该item指定了

app:actionViewClass="android.support.v7.widget.SearchView"

当我们点击搜索按钮的时候，ToolBar会自动处理为SearchView的样式

没错，看似我们什么都没做，但其实已经实现了很棒的交互效果。那么添加了SearchView，我们如何实现其监听操作

@Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu_main, menu);

        MenuItem searchItem = menu.findItem(R.id.action_search);
        final SearchView searchView =
                (SearchView) MenuItemCompat.getActionView(searchItem);
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                Toast.makeText(mContext,"开始搜索..." + query,Toast.LENGTH_SHORT).show();
                Log.e("wj","开始搜索..." + query);
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                Log.e("wj","输入框值..." + newText);
                return false;
            }
        });
        return true;
    }

我们只需要在初始化Menue布局的地方实现SearchView的动作监听就可以。

---

至此，ToolBar的介绍就全部介绍了。有没有感觉ToolBar真的太强大了。当然，这里我还没有将ToolBar跟Material Design中的控件进行交互处理，可能有些同学知道Material Design中通过几个控件的结合使用，可以实现各种漂亮的页面交互效果。以后有时间我会继续实践ToolBar跟其他控件结合使用。

感觉有帮助的同学欢迎留言交流，点赞关注！谢谢。