ToolBar

本文详细介绍了Android中的Toolbar组件,包括其组成部分如导航按钮、logo图标、标题和副标题、自定义视图及操作菜单等。同时,讲解了如何通过XML和Java代码设置Toolbar的主题、样式、事件监听以及加载自定义视图和菜单。

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

Toolbar是个什么东西?
看官方文档(神器😁),不懂英语,咱有google
在这里插入图片描述

  • A navigation button. 一个导航按钮。
  • A branded logo image.一个logo图片
  • A title and subtitle. 标题和副标题
  • One or more custom views. 一个或多个自定义视图
  • An action menu. 一个操作菜单

ToolBar的常用方法

设置主题 为 没有actionBar,

<style name="Theme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/color13</item>
        <item name="colorPrimaryDark">@color/color14</item>
        <item name="colorAccent">@color/colorAccentBlack</item>
        <item name="android:windowBackground">@color/colorAccentBlack</item>

    </style>
  1. 导航按钮(返回键)
app:navigationIcon="@drawable/abc_vector_test"
//或者
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.abc_vector_test));
toolbar.setNavigationOnClickListener(this);
  1. logo图标
app:logo="@drawable/ic_action_name"
//或者
toolbar.setLogo(getResources().getDrawable(R.drawable.abc_vector_test));
  1. 标题和副标题
		app:title="TB标题"  //设置内容
        app:titleTextColor="#000000"  //设置字体颜色
        app:titleTextAppearance="@style/TitleTextStyle"  //设置字体大小
        // app:titleMargin="" 系列的 控制 title的位置
 	<style name="TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor"> #ffaadd</item>  //设置字体大小,如果设置了app:titleTextColor,此处就无效
        <item name="android:textSize">10sp</item>  //设置字体大小
    </style>
   // 副标题也是一样,app:subtitle,就不说了,
    app:subtitle="@string/app_name"
  

完整代码

 <androidx.appcompat.widget.Toolbar
        android:id="@+id/tb"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"  //和系统actionbar同高
        app:layout_constraintTop_toTopOf="parent"
        android:background="@color/colorPrimaryDark"   //设置背景颜色,使用状态栏背景色
        app:navigationIcon="@drawable/abc_vector_test"//导航按钮,返回按钮
        app:logo="@drawable/ic_action_name" //logo
        app:title="TB标题"   //标题内容
        app:titleTextColor="#000000"//标题颜色
        app:titleTextAppearance="@style/TitleTextStyle"//标题字体大小和颜色
        app:subtitle="@string/app_name"//副标题
        >
java:
        toolbar = findViewById(R.id.tb);
        toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.abc_vector_test));
        toolbar.setNavigationOnClickListener(this);
        toolbar.setLogo(getResources().getDrawable(R.drawable.abc_vector_test));
style :
	<style name="TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor"> #ffaadd</item>
        <item name="android:textSize">10sp</item>

    </style>
  1. 自定义视图

我是直接把toolbar当线性布局来用,例如:

<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar02"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        android:background="@color/colorPrimaryDark"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是自定义的"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是自定义的sss"/>
    </androidx.appcompat.widget.Toolbar>
  1. menu
    1. 创建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/item01"
        android:title="测试1 "
        android:icon="@drawable/ic_stat_name"
        app:showAsAction="never"/>
    <item android:id="@+id/item02"
        android:title="测试2 "
        android:icon="@drawable/ic_stat_name"
        app:showAsAction="never"/>
    <item android:id="@+id/item03"
        android:title="测试3 "
        android:icon="@drawable/ic_stat_name"
        app:showAsAction="never"/>
    <item android:id="@+id/item04"
        android:title="测试4 "
        android:icon="@drawable/ic_stat_name"
        app:showAsAction="never"/>

</menu>
 app:showAsAction="never"这个属性 用来控制这个item会不会在toolBar上直接显示,常用的有三个属性值
 never: 从不
 always:总是显示
 ifRoom:如果有空闲的位置就显示

  1. 显示menu,加载menu文件 有两种方式,不要混合使用
    一、需要actionbar特性的时候,重写方法,onCreateOptionsMenu,然后设置setSupportActionBar(toolbar);
    //重写方法,onCreateOptionsMenu,
	@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu,menu);
        return super.onCreateOptionsMenu(menu);
    }
    //然后设置setSupportActionBar(toolbar);
	setSupportActionBar(toolbar);
二、不用actionbar特性,不设置setSupportActionBar,直接加载
 toolbar.inflateMenu(R.menu.main_menu);
  1. menu的一些基本设置
toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_action_name,null));

设置溢出窗口的item事件

toolbar.setOnMenuItemClickListener(this);

让溢出窗口在toolbar的下方

在style中 设置"overlapAnchor" false,然后设置app:popupTheme

app:popupTheme="@style/ToolbarPopupTheme"
	<style name="ToolbarPopupTheme" >
        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
    </style>

溢出窗口的背景色

<style name="ToolbarPopupTheme" >
        <!--<item name="android:colorBackground">#000000</item>--> <!--这里可以改变菜单的背景色-->
        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
        <item name="android:colorBackground">@color/color02</item><!--修改popup的背景色-->
    </style>

其他参考 :
Toolbar上动态显示Menu
ToolBar使用心得
android:ToolBar详解(手把手教程)
Toolbar的详细介绍和自定义Toolbar

### Toolbar 的定义及其在软件开发和 UI 设计中的作用 #### 工具栏(Toolbar)概述 工具栏是一种常见的用户界面组件,通常位于窗口顶部或底部,提供快速访问常用功能的方式。它可以通过图标、文字或其他交互元素来表示操作命令[^1]。 #### 在 Qt Design Studio 中的应用 在 Qt Design Studio 手册版本 3.5.0 中提到的工作流设计部分表明,工具栏可以作为汽车应用工作流程的一部分被集成到用户界面上。这种集成为用户提供了一种高效的方式来执行特定任务,尤其是在需要频繁调用某些功能的情况下。 #### 用户为中心的设计原则 从用户体验的角度来看,《回到人类界面设计》一书中强调了以用户为中心的设计理念[^2]。这意味着工具栏的设计应考虑用户的实际需求和习惯,确保其布局直观且易于理解。例如,在设计工具栏时,应该优先放置最常用的按钮,并按照逻辑顺序排列它们,以便提高可用性和效率。 #### 跨平台支持与 Angular/Onsen UI 集成 对于移动应用开发者而言,使用框架如 Onsen UI 可简化跨平台开发过程[^3]。通过强大的 API 支持,开发者能够轻松实现具有原生外观风格的工具栏组件。以下是利用 Angular 和 Onsen UI 创建基本工具栏的一个简单示例: ```html <ons-toolbar> <div class="center">Application Title</div> <div class="right"> <ons-button>Settings</ons-button> </div> </ons-toolbar> ``` 此代码片段展示了如何在一个 HTML 文件中定义一个包含标题和设置按钮的基础工具栏结构。 #### 沟通的重要性 考虑到不同背景人员之间的协作问题,有效沟通显得尤为重要[^4]。当讨论关于工具栏的具体实现细节时,项目经理和技术团队之间可能存在的术语差异需得到妥善处理。只有双方都能清晰表达各自的观点并达成共识,才能保证最终产品满足预期目标。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值