toolbar 基本用法（Android studio中测试）

最新推荐文章于 2024-09-17 11:39:13 发布

空中的石子

最新推荐文章于 2024-09-17 11:39:13 发布

阅读量9.2k

点赞数 4

分类专栏：移动开发文章标签：移动开发 android

本文链接：https://blog.csdn.net/shouwangyaoyuan/article/details/50492692

版权

移动开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

声明一下：因为本人也是初学者，在写这篇博客之前也参考了网上的一些资料和博客。其中大部分都是讲在eclipse中的用法，这和在Android studio中会有稍微一些差别，所以就打算写下这篇博客（可能会和网上的部分内容相似）供自己以后用，也希望能对阅读此文的人有一些帮助！

Android 3.0 Android 推了 ActionBar 这个控件，而到了2013 年 Google 开始大力地推动所谓的 android style，想要逐渐改善过去 android 纷乱的界面设计，希望让终端使用者尽可能在 android 手机有个一致的操作体验。ActionBar 过去最多人使用的两大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 里的 AppCompat。

既然会有本篇跟各位介绍的 Toolbar，也意味着官方在某些程度上认为 ActionBar 限制了 android app 的开发与设计的弹性，而在 material design 也对之做了名称的定义：App bar。接下来将会详细介绍一些toolbar的基本用法

1 .AppCompatActivity与Toolbar结合
其实我们并不是要使用AppCompatActivity自带的标题栏，那样扩展会很麻烦，在14年的Android 5.0的时候就用Toolbar替代了ActionBar,而ActionBarActivity又被AppCompatActivity替代，那么使用方法就是引入Toolbar设置到Activity中。

1.1 在 activity_main.xml 里面加入 Toolbar 元件：

    <android.support.v7.widget.Toolbar
        android:id="@+id/activity_main_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary">
    </android.support.v7.widget.Toolbar>

请记得用 support v7 里的 toolbar，不然然只有 API Level 21 也就是 Android 5 以上的版本才能使用。
这边需注意，要将 RelatvieLayout 里的针对四个方向的padding 属性去掉

简单解释一下：

android:minHeight="?attr/actionBarSize"：设置标题栏最小高度为ActionBar的高度。

android:background="?attr/colorPrimary"：该主题下的主色。Ctrl +B可以查看一下默认颜色的16进制

1.2 进入上图中的styles查看资源样式如下

<resources>

    <!-- Base application theme. -->
    <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>

</resources>

从名字我们就可以看出来，默认的标题栏为黑色。我们使用了toolbar就必须修改样式文件，将原来的标题栏去掉，修改后的样式文件如下：

<resources>

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

</resources>

你可以运行一下，现在没有效果，接下来的就是显示toolbar了
1.3.将Toolbar显示到界面

在MainActivity的onCreate方法中添加如下代码

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

注意输入的包一定要是import android.support.v7.widget.Toolbar;和前面的XML文件对应，否则会出现错误

运行结果如下：

2.AppCompatActivity详解

接着在onCreate方法中再加入如下代码

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

        toolbar.setLogo(R.drawable.ic_launcher);//设置图标
        toolbar.setTitle("My Title");//标题
        toolbar.setSubtitle("Sub title");//副标题
        setSupportActionBar(toolbar);

        toolbar.setNavigationIcon(R.drawable.back);//设置Navigation 图标

假如我的这个界面并不是主界面，而是一个子界面，这个时候我有一个需求，需要回退到上一个界面也就用到了

Navigation，为什么在setSupportActionBar(toolbar)后面加入而不在前面，你可以加入到前面试试，虽然可以显示回退的图片，但是点击并没有调用该按钮的点击事件，而在setSupportActionBar(toolbar);后面设置点击才有反应。一定要记住，不然回退是不会起作用的。

回退按钮,代码如下

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

        toolbar.setLogo(R.drawable.ic_launcher);//设置图标
        toolbar.setTitle("My Title");//标题
        toolbar.setSubtitle("Sub title");//副标题
        setSupportActionBar(toolbar);

        toolbar.setNavigationIcon(R.drawable.back);//设置Navigation 图标
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

接着加入菜单部分并设置菜单按钮的响应：

Android studio中新建菜单资源

进入界面如下：

<?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/action_edit"
        android:title="action_edit"
        android:orderInCategory="80"
        android:icon="@drawable/ab_edit"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/action_share"
        android:title="action_edit"
        android:orderInCategory="90"
        android:icon="@drawable/ab_share"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/action_settings"
        android:title="action_settings"
        android:orderInCategory="100"
        app:showAsAction="never"/>

</menu>

上面的几个含义解释一下

orderInCategory：toolbar里每个item的优先级，值越大优先级越低，toolbar地方不够就会放到overflow中

showAsAction属性共有五个值：ifRoom、never、always、withText、collapseActionView，可以混合使用。

ifRoom	会显示在Item中，但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个，依据屏幕的宽窄而定
never	永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好把标题都带上。
always	无论是否溢出，总会显示。
withText	withText值示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action bar空间的限制，文本标题有可能显示不全。
collapseActionView	声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。

怎么样将上面设置的菜单项进行显示呢？当然在MainActivity.java重写 onCreateOptionsMenu(Menu menu)，接着加载菜单项，代码如下

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

再回到MainActivity.java onCreate方法中加入菜单响应

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

        toolbar.setLogo(R.drawable.ic_launcher);//设置图标
        toolbar.setTitle("My Title");//标题
        toolbar.setSubtitle("Sub title");//副标题
        setSupportActionBar(toolbar);

        toolbar.setNavigationIcon(R.drawable.back);//设置Navigation 图标
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        toolbar.setOnMenuItemClickListener(this);

接着监听：

    @Override
    public boolean onMenuItemClick(MenuItem item) {
        String msg = "";
        switch (item.getItemId()) {
            case R.id.action_edit:
                msg += "Click edit";
                break;
            case R.id.action_share:
                msg += "Click share";
                break;
            case R.id.action_settings:
                msg += "Click setting";
                break;
        }
        if(!msg.equals("")) {
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }
        return true;
    }

点击上面的图标时，就会响应各自的监听事件；

这里还要要注意一个细节的东西点击图中的三个纵向排列的三个点会出现如下图的情况

从图中可以看到菜单栏中挡住标题栏，日常中常见的APP效果肯定不是这个样子，需要设置

首先要说明一下，toolbar菜单默认样式的父类为Widget.AppCompat.Light.PopupMenu.Overflow，那么要更改toobar中菜单的弹出的样式，就必须继承这个父类的样式。

再次进入styles文件下，修改后如下：

<resources>

    <!-- 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>
        <item name="actionOverflowMenuStyle">@style/MenuStyle</item>
    </style>
    <style name="MenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="android:dropDownVerticalOffset">?attr/actionBarSize</item>
    </style>

</resources>

如图所示，得到了最终的结果，有一点提一下，网上的做法是用<item name="overlapAnchor">false</item>代替上面的 <item name="android:dropDownVerticalOffset">?attr/actionBarSize</item>，但是在我实验的时候两个手机上一个有效果，一个没效果，读者可以自己实验一下看看结果！

上面的一些属性在讲解一下，一张图就可以说明一切（转载于http://blog.sina.com.cn/s/blog_6e334dc70102ve7d.html）

标题居中问题：

修改前的为：

    <android.support.v7.widget.Toolbar
        android:id="@+id/activity_main_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary">
    </android.support.v7.widget.Toolbar>

修改后：

    <android.support.v7.widget.Toolbar
        android:id="@+id/activity_main_toolbar"
        android:layout_height="wrap_content"

        android:layout_width="match_parent"
        android:background="?attr/colorPrimary">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我的App"
            android:layout_gravity="center"
            android:id="@+id/toolbar_title" />
    </android.support.v7.widget.Toolbar>

重新运行：