ToolBar

@xujun94 2016-09-21T13:41:40.000000Z 字数 6450 阅读 1650

本篇博客主要介绍以下内容

ToolBar的简单介绍
ToolBar的简单引用
- ToolBar导航栏颜色的修改
- 为toolBar添加menu点击事件
ToolBar的一些扩展
- 常见的一些 style样式的说明
- 修改menu的样式

转载请注明原博客地址： http://blog.csdn.net/gdutxiaoxu/article/details/52602327

例子源码下载地址： http://download.csdn.net/detail/gdutxiaoxu/9635393

介绍

先来看一下官方的介绍

A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setSupportActionBar() method.

简单来说就是Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。

那么ToolBar能干什么呢
- A navigation button，设置导航栏图标
- A branded logo image. 设置APP logo图标
- A title and subtitle. 设置标题和子标题
- One or more custom views. 设置一个或者多个自定义View
- An action menu. 设置一个ActionMenu

基本使用

首先我们需要先了解一下知识

怎样修改导航栏的颜色？

1.在AndroidStudio moudle下的build.grade添加如下代码

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

2.修改我们的style样式

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

1. 在布局文件下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
    >
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

运行以上代码将可以看到以下效果图

如何为toolBar添加内容

总共有两种方法，

第一种方法方法，在布局文件里面

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="match_parent"
>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        toolbar:logo="@mipmap/ic_launcher"
        toolbar:navigationIcon="@mipmap/me"
        toolbar:subtitle="subtitle"
        toolbar:title="@string/app_name"
    >
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

注意事项

要使用


   xmlns:toolbar="http://schemas.android.com/apk/res-auto"
        toolbar:logo="@mipmap/ic_launcher"
        toolbar:navigationIcon="@mipmap/me"
        toolbar:subtitle="subtitle"
        toolbar:title="@string/app_name"

而不是

        android:logo="@mipmap/ic_launcher"
        android:navigationIcon="@mipmap/me"
        android:subtitle="subtitle"
        android:title="@string/app_name"

第二种方法，在java代码里面

toolbar = (Toolbar) findViewById(R.id.toolBar);
toolbar.setTitle("Title");
toolbar.setSubtitle("SubTitle");
toolbar.setLogo(R.mipmap.ic_launcher);
//设置导航图标要在setSupportActionBar方法之后
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.mipmap.ic_launcher);

将可以看到如下效果图

1）首先在res/menu简历menu_main.xml文件，内容如下

<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=".MainActivity">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/search"
        android:orderInCategory="80"
        android:title="查找"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_share"
        android:icon="@drawable/share"
        android:orderInCategory="90"
        android:title="分享"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="设置"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_about"
        android:orderInCategory="110"
        android:title="关于"
        app:showAsAction="never" />
</menu>

2)接着在我们的代码中处理我们的menu，需要重写onCreateOptionsMenu（)，找到我们的menu

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

3）在java代码中处理我们的点击事件

       toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_settings:
                        ToastUtils.showText(NormalToolBarActivity.this,"setting");
                        return true;
                    case R.id.action_about:
                        ToastUtils.showText(NormalToolBarActivity.this,"about");
                        return true;
                    case R.id.action_search:
                        ToastUtils.showText(NormalToolBarActivity.this,"serch");
                        break;
                    case R.id.action_share:
                        ToastUtils.showText(NormalToolBarActivity.this,"share");
                        break;
                    case  android.R.id.home:
                        ToastUtils.showText(NormalToolBarActivity.this,"home");
                        break;
                }
                return false;
            }
        });

运行上述代码，可以看到以下效果图

拓展

1）各种属性讲解

引用地址来源：http://blog.csdn.net/feiduclear_up/article/details/46457433

以上效果的主题配置如下：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--导航栏底色-->
        <item name="colorPrimary">@color/accent_material_dark</item>
        <!--状态栏底色-->
        <item name="colorPrimaryDark">@color/accent_material_light</item>
        <!--导航栏上的标题颜色-->
        <item name="android:textColorPrimary">@android:color/black</item>
        <!--Activity窗口的颜色-->
        <item name="android:windowBackground">@color/material_blue_grey_800</item>
        <!--按钮选中或者点击获得焦点后的颜色-->
        <item name="colorAccent">#00ff00</item>
        <!--和 colorAccent相反，正常状态下按钮的颜色-->
        <item name="colorControlNormal">#ff0000</item>
        <!--Button按钮正常状态颜色-->
        <item name="colorButtonNormal">@color/accent_material_light</item>
        <!--EditText 输入框中字体的颜色-->
        <item name="editTextColor">@android:color/white</item>
    </style>

1.colorPrimary: Toolbar导航栏的底色。
2.colorPrimaryDark：状态栏的底色，注意这里只支持Android5.0以上的手机。
3.textColorPrimary：整个当前Activity的字体的默认颜色。
4.android:windowBackground：当前Activity的窗体颜色。
5.colorAccent：CheckBox，RadioButton，SwitchCompat等控件的点击选中颜色
6.colorControlNormal：CheckBox，RadioButton，SwitchCompat等默认状态的颜色。
7.colorButtonNormal：默认状态下Button按钮的颜色。
8.editTextColor：默认EditView输入框字体的颜色。

在默认的情况下，弹出menu的位置是这样的

其实大家也不难想到要修改popupTheme的样式，首先我们现在styles中修改为我们想要的样式.

    <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
        <item name="android:colorBackground">#000000</item>
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item，用于控制menu-->
    </style>
    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
    </style>

接着再在toolBar目录下修改我们toolBar的样式.

 toolbar:popupTheme="@style/ToolbarPopupTheme"

修改之后的menu的样式是这样的

题外话

本次学习toolBar的使用，主要是想修改最上面状态栏的颜色，google了一下发现与toolBar相关，便学习了一下，相对来说这篇博客是比较枯燥的，很多东西都是要查阅相关文档的，用起来比较繁琐。对于本人来说，还是习惯不用actionBar，用自定义的title比较顺手。当然，每个人都有自己的习惯，适合自己的才是最好的，了解toolBar也能了解多一种实现方式。

```
```java

介绍

基本使用

怎样修改导航栏的颜色？

如何为toolBar添加内容

第一种方法方法，在布局文件里面

第二种方法，在java代码里面

为toolBar添加Menu点击事件

拓展

1）各种属性讲解

修改toolBar menu的样式

题外话

介绍

基本使用

怎样修改导航栏的颜色？

如何为toolBar添加内容

第一种方法方法，在布局文件里面

第二种方法，在java代码里面

为toolBar添加Menu点击事件

拓展

1）各种属性讲解

修改toolBar menu的样式

题外话

内容目录