Material Design 方案之 <Toolbar> (详细)

最新推荐文章于 2025-07-02 20:05:33 发布

AND独一无二ROID

最新推荐文章于 2025-07-02 20:05:33 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

分类专栏： android 基础必备文章标签： android Toolbar ActionBar

本文链接：https://blog.youkuaiyun.com/qq_36043263/article/details/78760057

android 基础必备专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何将Android应用的标题栏从ActionBar迁移到Toolbar，强调了Toolbar的灵活性和兼容性。首先，通过修改主题移除默认的ActionBar，然后在布局中添加并配置Toolbar。接着讨论了布局后可能遇到的问题，如与AppBarLayout的配合使用。此外，展示了如何在Toolbar中添加自定义内容和菜单项，包括设置点击事件。最后，提到了Toolbar与其他Material Design组件的组合使用可能性。

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

随着android 版本不断推进，android的标题栏也渐渐由ActionBar过渡到Toolbar， Toolbar涵盖了ActionBar的所有功能并且更加灵活，于是笔者就总结了Toolbar的使用。

注意： << 我们继承的是AppCompatActivity与Activity相比兼容了android较低版本的Material Design>>

文章大纲：

1：如何布局Toolbar。

2： Toolbar布局后相关问题。

3：为Toolbar增加内容。

环节一 <如何布局Toolbar>：

继承AppCopatActivity后AS会默认帮我们创建一个ActionBar，所以替换为Toolbar之前先将其移除。在 AndroidManifest文件中修改application或Activity 的theme。例如：

        android:theme="@style/Theme.AppCompat.Light.NoActionBar">

                                       使用android库里的去除title样式。

<item name="windowNoTitle">true</item>   自定义样式加上这个属性(要继承一个合理的父样式)。 上述任选其一即可。运行app发现标题栏消失了。

	   注意： 在Activity中调用getSupportActionBar().hide();  并不是移除ActionBar看源码：

public void hide() {  mDecorToolbar.setVisibility(View.GONE); } //只是将其隐藏并解除占用空间，如果这时候我们再添加Toolbar会报错。

上述过程完成后我们就可以添加Toolbar了，添加Toolbar所具备的条件：

                  一： Toolbar必须存在顶层DecorView的tree结构中(在Decorview中可找到即可)；

                  二：调用setSupportActionBar(toolbar); toolbar即是上述存在于DecorView的Toolbar。 这行代码通俗讲就是让toolbar显示出来。

	  我们试一下一个不存在布局的Toolbar会不会被添加。

protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState);

ViewGroup view_decor= (ViewGroup) getWindow().getDecorView();

           view= LayoutInflater.from(this).inflate(R.layout.mytoolbar,view_decor,false);

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

           setContentView(R.layout.layout);

} 我们先创建了一个包含Toolbar的View对象(没有添加到DecorView中)。

                 R.layout.mytoolbar  布局：

<?xml version="1.0" encoding="utf-8"?>  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical" 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="50dp"> </android.support.v7.widget.Toolbar> </FrameLayout> 很简单就是一个FrameLayout 包含一个Toolbar对象。

R.layout.layout的布局为空。 Run as....

      什么都没有.....  接下来修改上述一行代码

View view= LayoutInflater.from(this).inflate(R.layout.mytoolbar,view_decor,true);

就是将上面的false改为true

                             这样在inflate时候会添加到DecorView里  运行看看....

         看看toolbar是不是已经显示出来了，如果我们不调用setSupportActionBar(toolbar) 同样不能显示。

          由于我们的Toolbar是直接添加到DecorView上的

而DecorView本身是FrameLayout布局所以就从屏幕顶端开始计算 ，当然Toolar也可添加到我们自定义的布局中。

                   ok  ，环节一结束了。

环节二 <Toolbar布局后相关问题>

         我们在环节一中残留的问题， Toolbar被其他控件遮挡，做为一个标题栏就应该在最前端的位置显示，否则视觉效果会非常不好，而google官方则为我们提供了一个组件，针对这个问题。来看看：

android.support.design.widget.AppBarLayout 直接可作为一个容器使用：

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical" android:layout_width="wrap_content"  android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar  android:id="@+id/toolbar"  android:layout_width="match_parent"  android:layout_height="50dp"> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout>  将上述的FrameLayout替换为AppBarLayout运行看效果

清楚的看到Toolbar显示在最前端了， AppbarLayout的作用就是在使得自己在同级别下最前端显示，而自己显示的就是子控件。要注意的是如果AppBarLayout有多个子控件则会显示异常，一般只与Toolbar搭配使用。环节二结束。

环节三： <为Toolbar增加内容>

Toolbar的灵活就在此处，可以调用addView()然后传入我们的布局即可，举个例子我们在上述代码中继续接着写：

     Button button=new Button(this);
     button.setBackground(getDrawable(R.mipmap.background));
     ViewGroup.LayoutParams layoutParams=new ViewGroup.LayoutParams(200,50);
     toolbar.addView(button,layoutParams);

		只是给Toolbar增加了一个button，button有背景图片。

          美观起见toolbar.setTitle(" ");其实就是让title文字为空字符串。上图：

这个button即是我们自定义的view，同样可以响应点击事件，所以我们可以给Toolbar中填入我们自定义的布局。

当然Toolbar还有个比较统一的菜单栏写法接着看：我们先在res文件夹下创建一个menu菜单，

在此文件夹下创建一个xml文件

然后看看menu.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:id="@+id/menu"
        android:icon="@mipmap/menu"
        android:title="menu"
        app:showAsAction="never"
        ></item>
         <item
        android:id="@+id/delete"
        android:icon="@mipmap/delete"
        android:title="delete"
        app:showAsAction="always"
        ></item>
         <item
        android:id="@+id/post"
        android:icon="@mipmap/post"
        android:title="post"
        app:showAsAction="ifRoom"
        ></item>
         </menu>

解释一下：icon属性设置图标内容，title设置文字内容，这两种只能显示一种，showAsAction设置具体显示哪一种： never表示永远在菜单栏显示(设置这个后toolbar会默认帮我们创建一个菜单栏点击按钮)。 always表示要么只显示在toolbar，要么就不显示，ifRoom表示toolbar没空间后就显示在菜单栏里。菜单栏只显示文本， toolbar只显示图标。然后在Activity中重写一下方法就ok

        public boolean onCreateOptionsMenu(Menu menu) { 
              getMenuInflater().inflate(R.menu.menu,menu);     //这个方法来自AppCompatAvtivity
                  return true;
          }

还可以设置点击事件：

       public boolean onOptionsItemSelected(MenuItem item) {
             item.getItemId();     //  拿到点击按钮的Id，然后就可以执行我们的操作了。
             return true; 
          }

ok 先到这里 Toolbar还可以与其他Material Design的组件组合使用，笔者也是边学习边总结，后续文章再见。如有不正请指导！！