ToolBar使用总结

最新推荐文章于 2024-09-17 11:39:13 发布
最新推荐文章于 2024-09-17 11:39:13 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： Android 文章标签： android java app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxy1740/article/details/109181031
版权

目录

toolbar

style配置

    <style name="toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:minHeight">?attr/actionBarSize</item>
        <item name="android:background">@color/colorPrimary</item>
        <item name="android:fitsSystemWindows">true</item>
    </style>
   <style name="base_toolbar" parent="toolbar"/></style>
     <!-- ToolBar样式.-->
    <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title(大标题)颜色-->
        <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
        <!--修改toolbar的subtitle(小标题)颜色-->
        <item name="subtitleTextColor">@android:color/holo_red_dark</item>
        <!--修改toolbar的图标颜色.-->
        <item name="colorControlNormal">@android:color/holo_red_dark</item>
    </style>
    <!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--设置背景-->
        <item name="android:background">@android:color/white</item>
        <!--设置字体颜色-->
        <item name="android:textColor">@android:color/holo_red_dark</item>
        <!--设置不覆盖锚点-->
        <item name="overlapAnchor">false</item>
    </style>

toolbar布局

<android.support.v7.widget.Toolbar
    android:id="@+id/tl_costom"
    style="@style/base_toolbar"
    app:theme="@style/toolbar_theme"
    app:popupTheme="@style/popup_theme"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
</android.support.v7.widget.Toolbar>

在这里插入图片描述

NavigationIcon

NavigationIcon常用方法

//设置是否添加显示NavigationIcon.
void setDisplayHomeAsUpEnabled(boolean showHomeAsUp);

//设置NavigationIcon的icon.可以是Drawable ,也可以是ResId
void setNavigationIcon(@Nullable Drawable icon);
void setNavigationIcon(@DrawableRes int resId) 

//设置NavigationIcon的点击监听.
void setNavigationOnClickListener(OnClickListener listener);

具体使用

Toolbar mToolbar =  (Toolbar)findViewById(R.id.toolbar);
//设置Toolbar
 setSupportActionBar(mToolbar);
 
//显示NavigationIcon,这个方法是ActionBar的方法.Toolbar没有这个方法.
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//设置icon
mToolbar.setNavigationIcon(drawable);
//设置监听.必须在setSupportActionBar()之后调用
mToolbar.setNavigationOnClickListener(clickListener);

注意：
必须先 setSupportActionBar(mToolbar).
setDisplayHomeAsUpEnabled(true)是ActionBar的方法.
setNavigationOnClickListener()必须要在setSupportActionBar()之后调用才能生效.
因为setSupportActionBar(Toolbar),会将Toolbar转换成Acitionbar.点击监听也会重新设置.

title

//是否显示
getSupportActionBar().setDisplayShowTitleEnabled(boolean showTitle);
//设置title.
getSupportActionBar().setTitle(title);
//设置title.
Toolbar.setTitle(title);
//设置Margin边距.
Toolbar.setTitleMargin();
//设置字体.
Toolbar.setTitleTextAppearance();
//设置字的颜色
Toolbar.setTitleTextColor(int color);

Menu

menu的创建

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //写一个menu的资源文件.然后创建就行了.
        getMenuInflater().inflate(R.menu.menu,menu);
        return super.onCreateOptionsMenu(menu);
    }

<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.acctionbaractivitydemo.MainActivity">
    <item
        android:id="@+id/menu1"
        android:icon="@mipmap/ic_launcher_菜单选项的图标" 
        android:title="菜单选项的名字" 
        app:showAsAction="withText|ifRoom"/>
    <item
        android:id="@+id/menu2"
        android:icon="@mipmap/ic_launcher"
        android:title="哈哈"
        app:showAsAction="withText"/>
    <item
        android:id="@+id/menu3"
        android:icon="@mipmap/ic_launcher"
        android:title="呵呵"
        app:showAsAction="withText"/>
</menu>

<!-- 
	showAsAction这个属性的值有： 
	1、always：使菜单项一直显示在ToolBar上。 
	2、ifRoom：如果有足够的空间，这个值会使菜单项显示在ToolBar上。 
	3、never：使菜单项永远都不出现在ToolBar上,在…的子项中显示。 
	4、withText：使菜单项和它的图标，菜单文本一起显示。
-->

menu点击事件

  /**
     * 菜单项被点击时调用，也就是菜单项的监听方法。
     * 通过这几个方法，可以得知，对于Activity，同一时间只能显示和监听一个Menu 对象.
  	 */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }
    /**
    	* 通过设置toolbar进行监听,在setSupportActionBar(Toolbar toolbar)之前设置可能会失效.
    	*/
    Toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    return false;
                }
            });

menu不同状态时操作

 /**
     * 每次菜单被关闭时调用.
     * 菜单被关闭有三种情形:
     * 1.展开menu的按钮被再次点击
     * 2.back按钮被点击
     * 3.用户选择了某一个菜单项
     */
    @Override
    public void onOptionsMenuClosed(Menu menu) {
        super.onOptionsMenuClosed(menu);
    }


  /**
     * 在onCreateOptionsMenu执行后，菜单被显示前调用;
     * 如果菜单已经被创建，则在菜单显示前被调用;
     * 同样的，返回true则显示该menu,false 则不显示; 
     * 可以通过此方法动态的改变菜单的状态，比如加载不同的菜单等
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        return super.onPrepareOptionsMenu(menu);
    }
  /**
     * 显示menu的icon,通过反射,设置Menu的icon显示.
     * @param view
     * @param menu
     * @return
     */
    @Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try{
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    Log.e(getClass().getSimpleName(), "onMenuOpened...unable to set icons for overflow menu", e);
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }

menu菜单图标+标题同时显示

在menu布局文件中指定单独的布局，app:actionLayout="@layout/broad_menu_filtrate"
具体的menu布局文件和组件布局文件如下：

<!-- menu布局文件 -->
<?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/item_filtrate"
        android:icon="@drawable/ic_search_white_36dp"
        android:title="筛选"
        app:showAsAction="ifRoom"
        app:actionLayout="@layout/broad_menu_filtrate">
    </item>

    <item
        android:id="@+id/item_add"
        android:icon="@drawable/ic_add_white"
        android:title="添加广播"
        app:showAsAction="always|withText">

        <menu>

            <item
                android:id="@+id/item_add_1"
                android:title="添加应急广播"
                app:showAsAction="never" />

            <item
                android:id="@+id/item_add_2"
                android:title="添加日常广播"
                android:actionLayout="@layout/toolbar_text_view"
                app:showAsAction="never" />

            <item
                android:id="@+id/item_add_3"
                android:title="添加演练广播"
                app:showAsAction="never" />

            <item
                android:id="@+id/item_add_4"
                android:title="创建实时广播"
                app:showAsAction="never" />

        </menu>

    </item>

</menu>

<!-- broad_menu_filtrate.xml布局文件 -->
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="@dimen/dp_10"
    android:paddingRight="@dimen/dp_10"
    android:gravity="center"
    android:text="筛选"
    android:drawableLeft="@drawable/ic_search_white_36dp"
    android:textColor="@color/c_ffffff"
    android:textSize="@dimen/dp_18"
    android:clickable="true" />

在onCreateOptionsMenu()和onOptionsItemSelected()方法创建菜单，注册菜单选项点击事件

private void initToolBar() {
        setHasOptionsMenu(true); // 设置支持option menu，否则导航菜单item注册的点击事件无效
        ((HostActivity) getActivity()).setSupportActionBar(toolbar); // 支持工具栏的菜单，它填充了活动的选项菜单和导航按钮
        toolbar.setNavigationOnClickListener(v -> getHostActivity().openRightLayout());
        toolbar.inflateMenu(R.menu.broad_toolbar_menu);
        toolbar.setOnMenuItemClickListener(item -> {
            switch (item.getItemId()) {
                case R.id.item_add_1:
                    startCreateDialog(Config.EmergenciesFragmentCode);
                    break;
                case R.id.item_add_2:
                    startCreateDialog(Config.EverydayFragmentCode);
                    break;
                    ...
            }
            return false;
        });
    }

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        new BroadFiltrationDialog(mContext, () -> {
            requestJson = getRequestJson();
            requestData(requestJson);
            refreshLayout.autoRefresh();
        });
        return false;
    }

    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.broad_toolbar_menu, menu);
        final MenuItem filtrateItem = menu.findItem(R.id.item_filtrate);
        filtrateItem.getActionView().setOnClickListener(v1 -> {
            onOptionsItemSelected(filtrateItem);
        });
        super.onCreateOptionsMenu(menu, inflater);
    }

fragment使用menu菜单

但如果是viewpager+多frgament这种.会造成错乱.其他的frgament也会有menu的style配置无效
直接代码设置示例如下，以下代码在setSupportActionBar()之前调用。

//设置popupstyle.比如是否覆盖描点,背景,字体颜色什么的.必须在inflateMenu()之前设置
 mToolbar.setPopupTheme(R.style.popup_theme);
//用Toolbar创建menu
 mToolbar.inflateMenu(R.menu.main_home_menu);
//拿到Menu 
Menu menu = mToolbar.getMenu();
//下面的这段代码是为了让menu菜单折叠样式时,展开能显示icon图标.不然icon图标不会显示.
if (menu != null) {
     if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
           try {
                    MenuBuilder menuBuilder = (MenuBuilder) menu;
                    menuBuilder.setOptionalIconsVisible(true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
        }
}

style的配置

style的基本配置

 <style name="toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        //设置toolbar的最小高度.这样设置的意义,就是解决适配的问题,标准md高度.
        <item name="android:minHeight">?attr/actionBarSize</item>
        <item name="android:background">@color/colorPrimary</item>
          //设置沉浸式,
        <item name="android:fitsSystemWindows">true</item>
    </style>
<style name="base_toolbar" parent="toolbar"></style>

style的使用

   style="@style/base_toolbar"

app:theme & app:popupTheme

app:theme ------------------toolbar的主题
app:popupTheme------------弹出的menu的主题.

这两种style都继承的是ThemeOverlay.AppCompat

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
        <item name="android:colorBackground">#1B2F36</item> <!--这里可以改变菜单的背景色-->
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item><!--新增一个item，用于控制menu-->
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">@dimen/dp_18</item>
    </style>

    <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title(大标题)颜色-->
        <item name="android:textColorPrimary">@android:color/white</item>
        <!--修改toolbar的subtitle(小标题)颜色-->
        <item name="subtitleTextColor">@android:color/white</item>
        <!--修改toolbar的图标颜色.-->
        <item name="colorControlNormal">@android:color/white</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">@dimen/dp_18</item>
    </style>

如果使用的是Dark系列的主题,那么字体就是白色的.menu菜单背景是黑色
在这里插入图片描述
如果使用的是Light系列的主题,那么字体和图标就是黑色的.menu菜单背景是白色
在这里插入图片描述

修改toolbar的字体

<!-- ToolBar样式 .-->
   <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title颜色.-->
       <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
       <!--修改toolbar的subtitle(小标题)颜色.-->
       <item name="subtitleTextColor">@android:color/holo_red_dark</item>
       <!-- 修改Toolbar的menu折叠图标和NavigationIcon的颜色 -->
       <item name="android:colorControlNormal">@android:color/holo_red_dark</item>
       <item name="colorControlNormal">@android:color/holo_red_dark</item>
   </style>

在这里插入图片描述

修改menu的字体颜色

  <!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
      <!--设置背景-->
       <item name="android:background">@android:color/white</item>
       <!--设置字体颜色-->
      <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>

在这里插入图片描述

修改menu显示位置

默认显示位置
在这里插入图片描述
可以直接在app:popupTheme的style里面设置overlapAnchor这个属性。但是，一定是要在app:popupTheme的style里面设置，而不是app:theme的style里面设置。

  <!--设置不覆盖锚点-->
  <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="overlapAnchor">false</item>
 </style>

    <!-- ToolBar菜单样式.-->
 <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
 </style>
 <style name="OverflowMenuStyle"parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>
 </style>

参考文章：
Toolbar设置详解----掉坑总结
动态更新Toolbar Menu以及Menu中同时显示文字和图标

安歌_claire
关注
专栏目录
Android Toolbar 使用总结
Gink's Blog
05-14 1150
Toolbar 是在 Android5.0 推出的一款 MD 风格的导航控件，主要是为了替换 Actionbar 的。与 Actionbar 相比，Toolbar 非常灵活，我们可以自由地在 Toolbar 内添加子控件。 使用 Toolbar 由于 Toolbar 是在 Android5.0 才开始加上的，低版本要使用的话，需要引入 support-v7 兼容包，使用 andro...
在activity的toolbar中使用menu
lly-Rachel的博客
05-10 199
在activity的toolbar中使用menu 1 创建menu文件 在res/menu中创建 activity_detail_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"> <
Toolbar menu 菜单的学习与实现2
11-30
可以查看博客：http://blog.csdn.net/tanwu52/article/details/78674711
ToolBar
Aquarius_Star的博客
08-12 978
package com.example.homework; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.Ap...
【Android】ToolBar，滑动菜单，悬浮按钮和可交互提示等的使用方法
最新发布
2301_79977698的博客
09-17 1640
Toolbar的强大之处在于，它不仅继承了 ActionBar的所有功能，而且灵活性很高，可以配合其他控件来完成一些Material Design的效果。任何一个新建的项目，默认都是会显示ActionBar。
Android Toolbar配合menu使用详解
高级开发者进阶ing... QaQ
03-05 4377
Android Toolbar配合menu使用详解Toolbar使用普通menu使用上下文menu使用:PopupMenu菜单: 历史上的今天(2021.3.5): 1898年3月5日，周恩来生于江苏淮安，早年留学日本。1919年在天津参加“五·四”运动。(1976年1月8日周恩来逝世。) Toolbar使用 注意:需要更改为Theme.AppCompat.Light.NoActionBar 布局使用: <androidx.appcompat.widget.Toolbar
Toolbar简单使用
lixinxiaos的博客
05-18 1201
Toolbar作为标题栏，说一下最基本的使用方式： 首先，在xml中引入，代码如下： <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" style="@style/Toolbar" android:layout_width="match_parent" android:layout_height="?actionBarSize" android:gravit
Android 简单介绍原生ToolBar和Menu的使用
qq_48119279的博客
07-16 1006
Android 简单介绍原生ToolBar和Menu
toolbar示范_VB6.0的toolbar使用示范_
10-01
总结起来，VB6.0中的`Toolbar`控件是构建用户界面的重要元素，通过设置其属性和编写事件处理代码，我们可以创建出具有丰富功能且易于操作的工具栏。在“toolbar示范”这个项目中，你将有机会亲手实践这些步骤，...
Android toolbar 使用详解
08-14
总结一下，Android Toolbar是一个功能强大的组件，它可以作为自定义标题栏、承载菜单项、并支持弹出菜单。通过上述步骤，开发者可以灵活地调整和扩展其功能，以适应各种应用场景。在实际项目中，结合样例代码和具体...
Toolbar使用详解
05-27
总结，Toolbar提供了丰富的自定义功能，通过上述步骤，我们可以轻松地在Android应用中实现功能强大的顶部导航栏。无论是添加菜单项、自定义视图，还是与DrawerLayout的协作，Toolbar都能满足开发者的各种需求，提升...
android-toolbar和状态栏的使用、右上角setting
11-16
总结，`Toolbar`是Android应用中实现自定义导航栏的强大工具，可以轻松集成到任何活动中。通过以上步骤，开发者可以实现标题、副标题的设置，添加菜单项，以及与状态栏的融合。在实际项目中，可以根据需求进行更细致...
Toolbar menu 菜单的学习与实现（app menu apk）
11-30
Toolbar menu 菜单的学习与实现,实习我们常见的menu的样式功能
美化你的APP——从Toolbar开始
热门推荐
xingfeng_coder的博客
04-10 2万+
Toolbar是什么Toolbar是Google在Android 5.0中推出的一款替代ActionBar的View。ActionBar必须得作为Activity内容的一部分，而Toolbar可以放在任何层次。Toolbar比ActionBar支持更多的功能，从开始到终点，Toolbar包含下面可选的元素： - 一个导航按钮。 可以是一个向前的按钮、导航菜单按钮，等等。 - 一个logo图片
Toolbar 不为人知的助手，ActionMenuView
u011277123的博客
11-25 5454
原创 技术鸟 2016-11-24 15:10 封面图来自这次长滩岛旅行。第一次出国，感受颇深，绝不是一言两语能够描述的。只有亲自体验过，才能懂得当初女教师辞职信里的那句瞬间爆红的话：“世界那么大，我想去看看。” 不久前，对 Toolbar 控件的使用写了一篇总结性的文章：Android Toolbar，你想知道的都在这里了，本文应该算是一个补充完善吧，将
Android---Toolbar
qq_44950283的博客
01-06 4481
使用 Toolbar 更好的代替 Actionbar。Toolbar 也可以很好的与 menu 结合设计出更炫酷大的UI。特别注意设置 Toolbar 的主题，可以单独设置
Toolbar Menu的显示与隐藏
谷哥的小弟
10-22 1万+
我们在写项目的时候，一般都会用到fragment来显示多个页面，并且每个页面的功能可能都不尽相同，这样每个标题栏的菜单选项都会不太一样，所以我们就需要在不同的页面中显示不同的菜单选项，这就要求标题栏中menu的每个item选项要能够根据不同的页面显示或者隐藏，本文就着重解决这个问题。 先来看一下最终的显示效果 主页有三个页面选项 新闻页面，menu什么都没有 图片页面，同样menu
Toolbar和menu使用
张风捷特烈的博客
12-17 979
Toolbar和menu的使用
小案例：ToolBar+选项菜单
以秘
04-23 387
ToolBar+选项菜单
使用Visual Toolbar轻松创建真彩工具栏
本文档将详细介绍如何使用Visual Toolbar 和CtrueColorToolBar类来实现这一目标，适合VC++6.0用户及界面设计初学者。 1、Visual Toolbar 工具 Visual Toolbar 是一个强大的小工具，它允许开发者快速地制作24位及...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值