ToolBar 在 Material Design 中的应用方法
在前端开发中，界面设计至关重要。以 Google 的 Material Design 设计语言为例，其中的控件和元素非常精致，细节把控非常到位。ToolBar 是 Material Design 中的重要控件之一，它可以用于显示应用的主要操作和导航选项，同时也可以用于导航栏中的搜索和应用 logo。
本文将详细介绍在 Material Design 中如何使用 ToolBar 控件，包括设计与实现。同时，将提供指导性内容，给了解基础的读者一些可直接使用的示例代码，以便快速上手。
设计
导航
ToolBar 最常见的用途之一是用于导航。在 Material Design 中，ToolBar 中通常会包含一个应用 logo（或应用名称），以及一些操作或导航按钮。设计师可以使用 logo、标题和按钮等元素来明确用户的当前位置和状态，例如在哪个页面，或者哪些选项可用。
上图中的应用标志着明确应用位置，便于用户知道自己位于什么应用下。中间的文本则指明了所在页面，“相册数据”和“列表”是该应用的两个主要视图，可以在两个视图之间快速切换。右侧的操作按钮则允许用户添加新项目，显示所有项目，或从这个页面删除所有项目。
搜索
另一种常见的 ToolBar 应用是搜索视图。在 Material Design 中，搜索视图通常会展示在导航栏的右端，可以通过点击一个按钮或者手势启动。Toolbar 中一般会包含一个搜索文本框，用户可以在文本框中输入搜索关键字，然后点击搜索按钮进行搜索。
如上图所示，当用户点击了右侧的搜索按钮时，ToolBar 会展开并放置在屏幕的顶部。之后，用户可以在文本框中输入搜索关键字，然后点击提交按钮，Toolbar 将播放动画并最终关闭，将用户带回到先前的位置。
实现
实现 ToolBar 可能需要使用到多个组件。 在 Android 中，ToolBar 构建在 ViewGroup 中，并使用 LayoutInflator 组件进行构建。在 WEB 开发中，浏览器未直接提供该组件，我们可以使用第三方库或通过原生实现来达到相似的效果。
Android 实现
在 Android 中，我们需要在 XML 布局中定义一个 ToolBar 控件，并在代码中获取它的引用，进行自定义。另外，我们还可以通过在 Activity 中调用setSupportActionBar() 方法来将定义好的工具栏设置为活动的默认操作栏。
在 XML 文件中定义 ToolBar 如下所示：
<androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:elevation="4dp" android:theme="@style/ThemeOverlay.MaterialComponents.ActionBar.Primary" />
在 Kotlin（或 Java） 代码中做如下操作：
-- -------------------- ---- ------- ----- ------------ - ------------------- - ------- -------- --- -------- ------- -------- --- ---------------------------- -------- - ---------------------------------- -------------------------------------- -------------- - ------- --- -------------- - ------- - -------------------------- ------------- - --- --------- ---------------------------- - -展开代码
上述代码中，首先在 Activity 的onCreate() 方法中调用setupToolbar() 方法。findViewById() 方法用于获取在布局 XML 文件中声明的 ToolBar 控件。然后，设置工具栏的标题，并调用setSupportActionBar() 方法，这样就将其设置为该 Activity 的默认操作栏。然后，我们就可以使用 ToolBar 进行更多自定义。
WEB 实现
在 WEB 开发中，ToolBar 可以通过两种方式实现：一种是使用第三方库，例如 Material-UI，另一种是通过原生实现构建。
- 实现方式一
如果想通过第三方库来构建 ToolBar，可以使用 Material-UI 提供的 AppBar 组件，其用法和 Android 中的 ToolBar 类似。可以在 JSX/TSX 代码中通过如下方式进行定义。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- -------------------- -------- ----------- - ------ - ------- ------------------ ------------------- ------ --------- -- -展开代码
在<AppBar>标签中，使用position属性设置为 static（固定位置），表示应用工具栏。然后，在标记中可以添加子元素，例如标题，菜单按钮和搜索框，以及其他您需要的元素。
- 实现方式二
另一种实现 ToolBar 的方式是，我们可以使用普通的 HTML 和 CSS 来定义和构建一个属于自己的工具栏。在 HTML 文件中，将所有元素包含在一个<header>标记中，加上一个 ID，这样可以轻松访问它。例如：
<header id="toolbar"> <!--这里可以放置标题、按钮、logo 等元素--> </header>
然后，在 CSS 文件中做如下操作：
#toolbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #fff; box-shadow: 0px 2px 4px #ccc; }
上述样式中，display: flex 属性设置了一个弹性布局，使得内容水平居中，并且根据元素之间的空间增大或减小。 justify-content: space-between 属性将放置在工具栏中的元素分成两个组，让它们自然填充头部。align-items: center 属性将整个 HEADER（工具栏）元素垂直居中，padding 属性则为工具栏添加了内边距，background-color 属性设置底色，box-shadow 属性创建一个小阴影。
示例代码
Android 示例
对于 Android 接口的开发人员，下面的代码片段可能会非常有帮助。下面的代码片段展示了如何实现一个自定义的工具栏，在其中添加了一个菜单按钮，当用户点击它时，将分别启动一个设置和一个关于页面：
-- -------------------- ---- ------- ----- ------------ - ------------------- - ------- -------- --- -------- ------- -------- --- ---------------------------- -------- - ---------------------------------- -------------------------------------- -------------- - ------- --- -------------- - ------- - -------------------------- ------------- - --- --------- ---------------------------- ------------------------------------- ---------------------------------- - -------- -- ---- ----------------- - -------------------- -- - -- ------ ---- - ----------------- -- - -- ------ ---- - ---- -- ----- - - - -展开代码
上述代码中，以一个工具栏菜单为例。调用了inflateMenu(my_menu) 方法加载了一个名为 my_menu 的菜单文件。而后，使用setOnMenuItemClickListener() 方法，将其与回调函数关联。当点击某个菜单项时，系统将跟踪其 ID，并将其传递给回调函数。该回调函数相应菜单项的 ID，并启动case语句以根据所选项打开关于或设置，返回true 表示该菜单项已被处理掉了。
WEB 示例
对于 WEB 前端开发人员，下面的代码片段可能会非常有帮助。下面的代码片段展示了如何使用 Material-UI 实现一个工具栏，其中包含一个简单的搜索框和一个标题。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- -------- ----------- ----------- --------- - ---- -------------------- ------ - ------ -- ---------- - ---- --------------------- ----------------- -------- ----------- - ------ - ------- ----------------- ---------------- --------- ----------- ------------ ---------------- ----- ------------- --- ---------------------- --- ---- ----------------------- ---------- --------------------- ------------- ------------- -------- -- -- ----------- ------------- -------------------- ----------- -- ------------- ------ ---------- --------- -- -展开代码
它使用 Material-UI 常用的组件：AppBar、Toolbar、Typography、InputBase和IconButton。AppBar组件在顶部提供了一个较大的容器，其中包含应用程序的其他内容。Toolbar 组件是实际工具栏的容器，Typography组件定义一个标签，可以用于标题和文本等；而InputBase则定义了一个搜索框。最后，可使用IconButton添加一个搜索图标，为用户提供一个更加直观的视觉。
结语
本文详细介绍了在 Material Design 中如何使用 ToolBar 控件，包括设计和实现。无论是 Android 还是 WEB 平台，开发人员都可以快速上手，实现自己的工具栏。因此，声明式界面设计带给我一个深刻的印象，与其它炫酷的设计语言比起来，Material Design 的魅力不仅在于其图形语言的简洁性和自然性，还在于其注重细节和解决用户问题的能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf81180c976d473a42d33d
