ToolBar使用教程(小白快速上手)

ToolBar效果展示:(做工粗糙,有那个意思就行了)

概述:

在toolbar出来之前,对于标题栏的操作,小伙伴接触比较多的应该是ActionBar了.这里说明下啊,使用ToolBar能都实现和ActionBar 一样的效果.那么问题来了,为什么Google官方还要推荐toolbar来替代actionbar呢?

第一点,要知道Google于2015年引入Material Design风格的控件，Android SDK中的ActionBar每个版本都会做一些改变, 所以在不同的系统上看起来可能会不一样，导致严重的碎片化问题，于是谷歌在更新android-support-v7兼容包时引入了ToolBar，用来替代ActionBar，它推荐开发者使用兼容包中的ToolBar，而非SDK中的ActionBar，以期解决碎片化问题
第二点,还有一个原因就是ActionBar的可操作性比不上ToolBar.主要是因为toolbar的使用需要在layout.xml中进行定义,而actionbar的使用则不存在这种定义方式. 那么当进行某些参数调节的时候,toolbar可能只需在xml布局文件中定义toolbar的时候添加一个属性就可以了.而action则比较麻烦.这一点可以在Android Studio环境下ActionBar的使用教程以及如何解决遇到的问题找到部分佐证.

使用方法:

Step1.
为了之后设定方便，我们先在 res/values/styles.xml 里增加一个名为 AppTheme.Base 的风格
一在 res/values/styles.xml中,添加

    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <!-- 如果报错AppCompat does not support the current theme features....则去除前缀:android -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <!--Window color-->
        <item name="android:windowBackground">@color/dim_foreground_material_dark</item>

        <!-- colorPrimary 应用的主要色调，actionBar默认使用该颜色，Toolbar导航栏的底色-->
        <item name="colorPrimary">@color/colorPrimary</item>
    </style>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
    </style>

二在 /res/values-v21/styles.xml中

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!--Navigation bar color-->
        <item name="android:navigationBarColor">@color/accent_material_light</item>
    </style>

科普一下,正常情况下,当使用as新建一个工程时,style中默认主题中的参数指标的对应意义,了解一下.

<resources>
    <!-- Base application theme. -->
    <style name="Theme.AppCompat" parent="Theme.AppCompat.Light.DarkActionBar">
         <!-- 1.colorPrimary 应用的主要色调，actionBar默认使用该颜色，Toolbar导航栏的底色-->
        <item name="colorPrimary">@color/colorPrimary</item>

        <!-- 2.statusBarColor 状态栏(通知栏)颜色，默认使用colorPrimaryDark-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <!-- 3.colorAccent—控件选中后颜色-->
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

Step2.
在layout布局中定义toolbar.

    <!--todo  android:background="?attr/colorPrimary"y沿用actionbar的颜色设定-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:contentInsetStartWithNavigation="0dp">

    </android.support.v7.widget.Toolbar>

请记得用 support v7 里的 toolbar，不然然只有 API Level 21 也就是 Android 5.0 以上的版本才能使用。

Step3.
定义tool_menu.xml文件,用于toolbar标题栏中各种action按钮的展示.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.zq.actionbardemo.ThirdActivity">

    <item
        android:id="@+id/action_query"
        android:title="搜索"
        android:icon="@mipmap/ic_action_query"
        app:showAsAction="always"
        app:actionViewClass="android.widget.SearchView" />

    <!--todo orderInCategory越大优先级越低-->
    <item
        android:id="@+id/action_download"
        android:title="下载"
        android:icon="@mipmap/ic_action_download"
        android:orderInCategory="100"
        app:showAsAction="always" />


    <item
        android:id="@+id/action_edit"
        android:title="编辑"
        android:icon="@mipmap/ic_action_edit"
        android:orderInCategory="90"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_delete"
        android:title="删除"
        android:icon="@mipmap/ic_action_delete"
        android:orderInCategory="80"
        app:showAsAction="always" />

</menu>

Step4.
在MainActivity.java中加载toolbar的menu资源

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

Step5.
在 MainActivity.java 中加入 Toolbar 的声明：

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);

        // App Logo
        toolbar.setLogo(R.mipmap.return_icon);
        // Title
        toolbar.setTitle("My Title");
        // Sub Title
        toolbar.setSubtitle("Sub title");

        setSupportActionBar(toolbar);

        // Navigation Icon 要設定在 setSupoortActionBar 才有作用
        // 否則會出現 back button
        toolbar.setNavigationIcon(R.mipmap.return_icon);
        toolbar.setOnMenuItemClickListener(onMenuItemClick);
    }

    private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
            String msg = "";
            switch (menuItem.getItemId()) {
                case R.id.action_edit:
                    msg += "Click edit";
                    break;
                case R.id.action_delete:
                    msg += "Click delete";
                    break;
                case R.id.action_download:
                    msg += "Click download";
                    break;
            }

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

对上述代码做简要说明.
1.setNavigationIcon: 即设定 up button 的图标，因为 Material 的介面，在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。
2. setLogo: APP 的图标。
3. setTitle: 主标题。
4. setSubtitle: 副标题。
5. setOnMenuItemClickListener: 设定菜单各按鈕的动作。
这边要留意的是setNavigationIcon需要放在 setSupportActionBar之后才会生效。

最后对ToolBar中用于调节的各个参数指标进行总结下.

• colorPrimaryDark
  状态栏背景色。
  在 style 的属性中设置。
• textColorPrimary
  App bar 上的标题与更多菜单中的文字颜色。
  在 style 的属性中设置。
• App bar 的背景色
  Actionbar 的背景色设定在 style 中的 colorPrimary。
  Toolbar 的背景色在layout文件中设置background属性。
• colorAccent
  各控制元件(如：check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。
  在 style 的属性中设置。
• colorControlNormal
  各控制元件的预设颜色。
  在 style 的属性中设置
• windowBackground
  App 的背景色。
  在 style 的属性中设置
• navigationBarColor
  导航栏的背景色，但只能用在 API Level 21 (Android 5) 以上的版本
  在 style 的属性中设置

OK,完结.有疑问请留言.
另外给大家推荐一个比较好的参考博文,上面讲的比较详细.
android:ToolBar详解（手把手教程）