ToolBar控件的使用<一> 通过菜单项设置ToolBar

最新推荐文章于 2025-06-11 13:27:41 发布

AFinalStone

最新推荐文章于 2025-06-11 13:27:41 发布

阅读量7.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Android控件

本文链接：https://blog.youkuaiyun.com/abc6368765/article/details/53761132

Android控件专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍Toolbar控件的使用方法，包括如何隐藏ActionBar、在布局文件中配置Toolbar、设置菜单及响应事件，以及如何修改隐藏菜单的弹出位置和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Toolbar控件介绍

由于ActionBar存在不少问题，而且使用也不灵活。在更高的版本中，谷歌推出了新的控件Toolbar来替换ActionBar，并提供了低版本的兼容包，Toolbar更加自由灵活，子菜单和logo的设置和响应都比之前的更加方便，还可以随处放置。可以说，Toolbar是对ActionBar的进一步完善和强化，
- 首先看下我们最终实现的效果图

效果图

网上看了一些文章，好些都是把ToolBar，AppBarLayout，CollapsingToolbarLayout，CoordinatorLayout等控件一块结合起来讲，但是我打算本文只单独讲讲ToolBar，后续文章再让Toolbar结合其他几个控件一块讲。
- Toolbar控件的使用

<1> 隐藏ActionBar控件
为了使用ToolBar，首先我们需要隐藏之前的ActionBar，可以通过主题风格来隐藏ActionBar，也可以通过代码隐藏ActionBar，我一般是通过主题风格来实现的：


    <!--设置给ToolbarActivity的风格-->
    <style name="NoActionbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--设置Toobar左侧空白消失-->
        <item name="toolbarStyle">@style/ClubToolbar</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

    <style name="ClubToolbar" parent="Widget.AppCompat.Toolbar">
        <item name="contentInsetStart">0dp</item><!-- 设置该属性解决Toolbar左侧空白部分-->
    </style>

    <!--设置给Toolbar的风格-->
    <style name="ToolBarTheme" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="android:textColorSecondary">#FFFFFFFF</item>
        <item name="android:colorBackground">#88FFFFFF</item>
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
        <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
    </style>

    <!--设置toolbar弹出菜单的位置-->
    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--设置为false即可使menu位置位于toolbar之下-->
    </style>
    <!--修改toolbar弹出剩余隐藏菜单条目按钮的样式-->
    <style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_menu_setting</item>
    </style>

然后在AndroidManifest.xml中设置ToolBarActivity的主题

<activity android:name=".Toolbar.ToolBarActivity"  
          android:theme="@style/NoActionbarTheme"/>

<2> 把ToolBar控件放入到布局文件中
隐藏好ActionBar之后，我们直接把Toolbar放到布局文件中，可以通过代码和布局文件两种方式来设置Toolbar的logo，navigationIcon，title，subTitle等属性。这里我是通过布局文件来设置title的属性的。具体如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".Toolbar.ToolBarActivity_01">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/background02"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="界面标题"
        app:subtitle="二级标题"
        app:navigationIcon="@mipmap/ic_menu_back"
        app:logo="@mipmap/logo"
        android:background="?attr/colorPrimary"
        android:theme="@style/ToolBarTheme"/>

</RelativeLayout>

<3>通过菜单项为ToolBar设置菜单条目以及响应事件

在Activity中，我们首先获取到toolbar，然后再把它设置给当前界面的工具栏。可以通过重写onCreateOptionsMenu方法来给当前Toolbar控件设置具体菜单条目。然后通过setOnMenuItemClickListener方法来监听具体哪个菜单字条被点击，通过setNavigationOnClickListener方法来监听navigationIcon是否被点击。
- java代码

public class ToolBarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tool_bar);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item)  {
                //在这里执行我们的逻辑代码
                switch (item.getItemId()){
                    case R.id.action_edit:
                        Toast.makeText(ToolBarActivity.this,"编辑被点击",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_share:
                        Toast.makeText(ToolBarActivity.this,"分享被点击",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_settings01:
                        Toast.makeText(ToolBarActivity.this,"设置01被点击",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_settings02:
                        Toast.makeText(ToolBarActivity.this,"设置02被点击",Toast.LENGTH_SHORT).show();
                        break;

                }
                return false;
            }
        });
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //在这里执行我们的逻辑代码
                Toast.makeText(ToolBarActivity.this,"返回按钮被点击",Toast.LENGTH_SHORT).show();
            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 为toolbar创建Menu
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

}

R.menu.menu_main对应的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_edit"
        android:title="@string/action_edit"
        android:orderInCategory="80"
        android:icon="@mipmap/ic_menu_edit"
        app:showAsAction="ifRoom" />

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

  <item android:id="@+id/action_settings01"
        android:title="@string/action_settings01"
        android:orderInCategory="100"
        android:icon="@mipmap/ic_menu_setting"
        app:showAsAction="ifRoom"/>

  <item android:id="@+id/action_settings02"
        android:title="@string/action_settings02"
        android:orderInCategory="100"
        android:icon="@mipmap/ic_menu_setting"
        app:showAsAction="ifRoom"/>

</menu>

你可以利用ActionBar部件提供的全部功能，将你的选项菜单项放在Action Bar的右上角，对用户来说使用更方便，控制该行为的主菜单项属性是android:showAsAction。
　　这个属性可接受的值有：
　　1、always：这个值会使菜单项一直显示在Action Bar上。
　　2、ifRoom：如果有足够的空间，这个值会使菜单项显示在Action Bar上。
　　3、never：这个值使菜单项永远都不出现在Action Bar上。
　　4、withText：这个值使菜单项和它的图标，菜单文本一起显示。

<4>修改ToolBar隐藏菜单的弹出位置和颜色，弹出按钮的样式
ToolBar弹出隐藏菜单条目的默认位置和Menu处于同一水平高度，这样看起来很不美观，如果我们希望修改隐藏菜单的默认位置和颜色，以及修改弹出按钮的样式，就需要给ToolBar设置新的主题。
修改之前

修改之后
具体代码如下：

    <style name="ToolBarTheme" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="android:textColorSecondary">#FFFFFFFF</item>
        <item name="android:colorBackground">#88FFFFFF</item>
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
        <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
    </style>

    <!--设置toolbar弹出菜单的位置-->
    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--设置为false即可使menu位置位于toolbar之下-->
    </style>
    <!--修改toolbar弹出剩余隐藏菜单条目按钮的样式-->
    <style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_menu_setting</item>
    </style>