Android开发之ToolBar的使用

前言：是时候该解析ToolBar的用法了，前面我们有使用过ToolBar和DrawerLayout的搭配使用，相信大家对ToolBar有个简单的了解，那么今天我们就着重讲解ToolBar的用法。顾名思义ToolBar就是个顶部导航栏，之前用的是ActionBar（3.0API，也有兼容包），随着使用ActionBar的弊端越来越多，使用起来比较费劲，拓展性差，所以google又重新定义了一个ToolBar。

作用：可以显示标题、导航back、快捷操作、菜单等。而且Toolbar不一定要放在顶部，也可以放底部。

-------------------------------分割线----------------------------------------------

ok，咱们开始看一个效果图：

-------------------------------分割线----------------------------------------------

当然了，为了实现上述效果你也完全可以按照自己的方式自定义来实现，既然讲解ToolBar就按照ToolBar的方式来实现！

第一步：添加依赖(Android Studio是默认继承AppCompatActivity类所以自然就默认使用了v7包)

compile 'com.android.support:appcompat-v7:24.2.1'

第二步： 修改主题 (注意主题一定要使用：NoActionBar)：

 <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">

第三步： 写布局，把Toolbar当做一个普通的容器使用。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.fly.lsn10_toolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:logo="@mipmap/ic_launcher"
        app:navigationIcon="@drawable/back"
        app:subtitle="fly旅行"
        app:title="fly新闻">
    </android.support.v7.widget.Toolbar>
</LinearLayout>

第四步： 使用Toolbar替换ActionBar

setSupportActionBar(toolbar);

第五步： 设置NavigationIcon的点击事件监听，比如返回按钮。

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "返回键", Toast.LENGTH_SHORT).show();
            }
        });

ok！完成代码，即可实现上述效果！

-------------------------------分割线----------------------------------------------

我们来看下这个效果：

这是一个实现搜索的效果，ok废话少说我们代码来实现，重复代码略去。

首先我们添加menu菜单：

<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="com.ricky.materialdesign.toolbar.MainActivity">

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        android:title="查找"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="设置"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_share"
        android:icon="@android:drawable/ic_menu_share"
        android:orderInCategory="100"
        android:title="分享"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_edit"
        android:icon="@android:drawable/ic_menu_edit"
        android:orderInCategory="100"
        android:title="编辑"
        app:showAsAction="ifRoom" />

</menu>

然后我们在MainActivity中重写onCreateOptionsMenu方法，不懂之处看代码注释：

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        //searchView在menu里面
        MenuItem item = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
        //设置一出来就直接呈现搜索框---SearchView
        //searchView.setIconified(false);
        //进来就呈现搜索框并且不能被隐藏
        //searchView.setIconifiedByDefault(false);

        ImageView icon = (ImageView) searchView.findViewById(R.id.search_go_btn);
        icon.setImageResource(R.mipmap.ic_launcher);
        icon.setVisibility(View.VISIBLE);
        //searchView.setMaxWidth(200);

        SearchView.SearchAutoComplete et = (SearchView.SearchAutoComplete) searchView.findViewById(R.id.search_src_text);
        et.setHint("请输入查询的名字");
        et.setHintTextColor(Color.WHITE);

        //设置提交按钮是否可见
        searchView.setSubmitButtonEnabled(true);

        //监听焦点变化
        searchView.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {

            }
        });

        //searchView的关闭监听
        searchView.setOnCloseListener(new SearchView.OnCloseListener() {
            @Override
            public boolean onClose() {
                return false;
            }
        });

        searchView.setOnSearchClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "search", Toast.LENGTH_SHORT).show();
            }
        });

        //监听文本变化，调用查询
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                //提交文本
                Toast.makeText(MainActivity.this, "提交文本:" + query, Toast.LENGTH_SHORT).show();
                return true;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                // 文本改变的时候回调
                System.out.println("文本变化~~~~~" + newText);
                return false;
            }
        });
        return true;
    }

ok完成搜索效果，当然了这些只是局部的ToolBar的使用效果，正所谓师傅领进门，修行看个人，希望大家多多去看，多多去练习！

-------------------------------该休息了，毕竟熬夜伤身体啊------------------------------------