Material Design之Toolbar的简单使用

　　Toolbar也是在一个 Material Design 风格的导航控件 ，以此来取代之前的 Actionbar 。与 Actionbar 相比， Toolbar 明显要灵活的多，可以添加导航栏图标 、 App的logo 、 标题和子标题 、 自定义控件 、以及 ActionMenu等，效果图如下：

那么我们就来学习一下如何使用它吧。

一、按照惯例，先创建项目,然后添加v7的依赖包

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

二、添加布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.wangguifa.toolbartest.HomeActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4054B2">

        
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="自定义标题"
            android:textColor="#ffffff"
            android:textSize="11sp" />
    android.support.v7.widget.Toolbar>
RelativeLayout>

这样ToolBar就算创建好了，效果如下：

　　你会发现怪怪的，没错，那是因为没有隐藏掉actionBar，通过一下方法隐藏actionBar就可以了：
在布局代码中给activity设置theme：

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

或者在java代码中给activity设置：

requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_home);

他俩效果是一样的。

你以为到这就完了？其实并没有，下面开始我们学习些ToolBar的其他用法吧：

package com.wangguifa.toolbartest;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class HomeActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        Toolbar mToolBar = (Toolbar) findViewById(R.id.toolbar);
        // 左上角按钮图标
        mToolBar.setNavigationIcon(R.drawable.back);
        // 设置logo图标
        mToolBar.setLogo(R.mipmap.ic_launcher);
        // 设置主标题，若不设置，则默认为App的名字
        mToolBar.setTitle("主标题");
        // 设置主标题颜色
        mToolBar.setTitleTextColor(Color.WHITE);
        // 设置副标题
        mToolBar.setSubtitle("副标题");
        // 设置副标题颜色
        mToolBar.setSubtitleTextColor(Color.RED);

        // 设置NavigationIcon的点击事件
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 执行对应操作，这里使用Toast演示
                Toast.makeText(HomeActivity.this, "您点击了返回键", Toast.LENGTH_SHORT).show();
            }
        });

        // 加载Menu布局
        mToolBar.inflateMenu(R.menu.toolbar_menu);
        // menu点击事件
        mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_1:
                        // 执行对应操作，这里使用Toast演示
                        Toast.makeText(HomeActivity.this, "您点击了menu_1", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.menu_2:
                        // 执行对应操作，这里使用Toast演示
                        Toast.makeText(HomeActivity.this, "您点击了menu_2", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.menu_3:
                        // 执行对应操作，这里使用Toast演示
                        Toast.makeText(HomeActivity.this, "您点击了menu_3", Toast.LENGTH_SHORT).show();
                        return true;
                    default:
                        return false;
                }
            }
        });
    }
}

对应的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=".HomeActivity">
    <item
        android:id="@+id/menu_1"
        android:icon="@drawable/ic_menu_camera"
        android:title="menu_1"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menu_2"
        android:icon="@drawable/ic_menu_gallery"
        android:title="menu_2"
        app:showAsAction="never" />
    <item
        android:id="@+id/menu_3"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="menu_3"
        app:showAsAction="never" />
menu>

　　你也许会问app:showAsAction=”ifRoom”这个是什么意思？其实这是跟android:showAsAction属性差不多，showAsAction属性共有五个值：ifRoom、never、always、withText、collapseActionView，可以混合使用。
ifRoom ToolBar如果有位置就显示在ToolBar上，没有则隐藏。
never 永远不会显示在ToolBar上，会存在更多item里面（点击竖向三个点后显示）。
always 无论ToolBar空间是否够，都显示。
withText 该值示意ToolBar要显示文本标题。
collapseActionView 声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。
切记这里使用app:showAsAction=”“而不是android:showAsAction。

最后还可以在ToolBar中添加各种需要的控件，如ImageView、TextView、Button等。

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4054B2">

        
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="自定义标题"
            android:textColor="#ffffff"
            android:textSize="11sp" />
    android.support.v7.widget.Toolbar>

以上就是ToolBar的简单使用，若有什么不准备或者错误的地方请及时联系我更正。