Materail Design 入门（四）——Toolbar的使用方法（1）

最近有些忙，今天又用到了Toolbar就想起来继续写Material Design的文章了，大家久等了，今天我们主要来讨论下Toolbar的使用方法以及使用过程中可能遇到的问题。
简单介绍下，Toolbar是Android 5.0提供的控件，如果想在低版本上使用导入V7包即可。通常一个APP的多个页面中都会有一个标题，而且效果差不多，这时我们可以考虑在Activity的基类中集成Toolbar，并提供一些设置back按钮图标，title，title字体颜色等方法。下面呢，我们就分为两部分来介绍，首先讲解Toolbar的基础用法，然后给大家讲解BaseActivity中如何集成Toolbar。

Toolbar的简单用法

1、首先我们需要定义一个app的base style和Toolbar的style

  <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:windowBackground">@color/windowBackground</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <!--返回或更多(app:showAsAction="never")的按钮颜色-->
        <item name="colorControlNormal">@android:color/white</item>
        <!--菜单字体颜色-->
        <item name="actionMenuTextColor">@android:color/white</item>
    </style>
<!-- Toolbar的style，这里设置了menu上面字体的颜色 -->
  <style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="actionMenuTextColor">@color/black</item>
    </style>

没明白base style意思的同学参考这张图哈

2、接下来编写布局文件，直接上代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        toolbar:navigationIcon="@drawable/img_back_white"
        android:background="?attr/colorPrimary"
        toolbar:popupTheme="@style/Theme.ToolBar.Base">

        <!--<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="center"
            android:src="@drawable/img_back_white" />-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/index"
            android:textColor="@color/white" />
    </android.support.v7.widget.Toolbar>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/title" />
</LinearLayout>

这里有个小小的注意：我们在编写固定宽高的布局时最好，不要直接将android:layout_width/android:layout_height而是将他们设为wrap_content，然后设置android:minHeight/android:minWidth。这里设置了Toolbar的最小高度为ActionBar的高度。

3、新建一个menu文件,主要是用来显示Toolbar上面的按钮的，现在可能有的同学还不理解是什么意思，没关系，等下妹子给你上图。

<?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_edit"
        android:orderInCategory="80"
        android:title="@string/edit"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_share"
        android:orderInCategory="90"
        android:title="@string/share"
        app:showAsAction="ifRoom" />


    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/setting"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_about"
        android:orderInCategory="101"
        android:title="@string/about"
        app:showAsAction="never" />
</menu>

这里也要注意下：android:orderInCategory的值越大，这个menu在Toolbar上面的位置排的就越靠后。app:showAsAction=never表示这个menu从不在Toolbar上面展示，app:showAsAction=ifRoom表示如果Toolbar上面还有空间就展示出来，否则就折叠起来。

4、设置Toolbar中的popupmenu的字体颜色：
在style文件中新建一个style，上面已经提前说过了哦 <item name="actionMenuTextColor">@color/black</item>
在布局文件中添加：
toolbar:popupTheme="@style/Theme.ToolBar.Base"

5、Activity代码实现：

 toolbar = (Toolbar) findViewById(R.id.toolbar);
//        toolbar.setLogo(R.mipmap.ic_launcher);
//        toolbar.setTitle("title");
//        toolbar.setSubtitle("subtitle");

        setSupportActionBar(toolbar);
        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setDisplayShowTitleEnabled(false);
        }
//        toolbar.setNavigationIcon(R.mipmap.ic_launcher);
        toolbar.inflateMenu(R.menu.menu);
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                String msg = "";
                switch (item.getItemId()) {
                    case R.id.action_edit:
                        msg += "edit";
                        break;
                    case R.id.action_share:
                        msg += "share";
                        break;
                    case R.id.action_settings:
                        msg += "settings";
                        break;
                    case R.id.action_about:
                        msg += "about";
                        break;
                    default:
                        break;
                }

                if (!msg.equals("")) {
                    Toast.makeText(ToolbarActivity.this, msg, Toast.LENGTH_SHORT).show();
                }
                return false;
            }
        });

运行效果如图所示：

6、更改系统返回键的图标
toolbar:navigationIcon="@drawable/img_back_white"

7、不显示系统标题

if (actionBar != null) {
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setDisplayShowTitleEnabled(false);
}

8、设置Toolbar的title和logo有两种方法：Java代码和xml文件，在xml文件中添加时首先要在xml的头部添加自定义属性toolbar的声明，再使用toolbar的属性 xmlns:toolbar="http://schemas.android.com/apk/res-auto"

9、去掉Toolbar默认左边距
Toolbar默认包含了一个左边距，这会导致我们的标题或Toolbar里面的布局不居中，修改方法：

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"