Google Material Desigin 之 Toolbar 的使用

一、Toolbar 的添加

本篇文章介绍使用 Toolbar 代替 ActionBar

步骤一：打开 AndroidManifest.xml 文件进入 theme 属性 res/values/styles.xml 文件中去

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"/>

我们可以看到 name = “AppTheme” 中的主题为 DarkActionBar（深灰色主题），之前的 ActionBar 指定了这个主题才会出现的。

   <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>

如果我们想用 Toolbar 代替 ActionBar ，所以我们要用不带 ActionBar 的主题。通常用 Theme.AppCompat.Light.NoActionBar 和 Theme.AppCompat.NoActionBar 两个选择，一个为淡色为主，一个为深色为主，具体可自己实现一遍。我们一般使用淡色所以设置淡色为主

<!-- 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="colorAccent">@color/colorAccent</item>
    </style>

自己观察这里重写了 colorPrimary、colorPrimaryDark、colorAccent 三个属性的颜色，分别代表
标题栏背景颜色、状态栏颜色、悬浮按钮颜色。

步骤二 ：修改 activity_main.xml 中的代码。

<?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"
    tools:context="com.example.boybaby.materialdesigndemo.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/Base.ThemeOverlay.AppCompat.Light">
    </android.support.v7.widget.Toolbar>

</LinearLayout>

① 因为之前的ActionBar使用的是淡色主题所以我们使用
android:theme=”@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar” 指定 Toolbar 为深色主题，
② 属性 app:popupTheme=”@style/Base.ThemeOverlay.AppCompat.Light” 将弹出的菜单栏设置为淡色主题。

步骤三 ：修改 MainActivity,java 中的代码。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //添加 Toolbar 标题栏
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

二、Toolbar 的使用

主要讲解往 Toolbar 中添加文字和图标。

1、修改 Toolbar 中的文字，通过下面的标签来修改 Tool 的文字

android:label="Toolbar"

2、添加 Toolbar 图标

首先在 res 根目录下添加 menu文件夹，然后点击 New → Menu resource file 创建一个 toolbar.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:icon="@drawable/ic_launcher_background"
        android:title="设置1"
        app:showAsAction="always"/>
    <item
        android:icon="@drawable/ic_launcher_background"
        android:title="设置2"
        app:showAsAction="ifRoom"/>
    <item
        android:icon="@drawable/ic_launcher_background"
        android:title="设置3"
        app:showAsAction="never"/>
</menu>

属性 1 ：android:icon 添加图标

android:icon="@drawable/ic_launcher_background"

属性 2 ：android:title=”3” 添加文字

 android:title="设置"

属性 3 ：表示图标文字显示位置

app:showAsAction="always"

• always ： 表示图标永远显示到 Toolbar 中。

• ifRoom : 表示屏幕空间不足时，不显示图标

• never : 表示文字永远显示到菜单栏中

注意：Toolbar 的 action 按钮只显示图标，菜单中的 action 按钮只会显示文字。

3、在 MainActivity.java 中加载 布局文件 toolbar.xml 。

//加载 toolbar.xml 布局文件
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    //按钮监听事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            //处理按钮监听事件

        }
        return true;
    }