Toolbar 是 Material Design 中常用的 UI 元素，它用于在顶部显示应用程序的名称、菜单和其他操作。使用 Toolbar 可以帮助应用程序实现一致的用户体验，增加用户的可操作性。在本文中，我们将深入介绍如何使用 Toolbar。
1. 添加 Toolbar
首先，在应用程序的布局文件中添加 Toolbar，如下所示：
-- -------------------- ---- -------
------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
-------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-----------------------------------------
---------------------------------------------
------------
---------------------------
-----------------------------------
--------------------------------------
--------------------------------------------------上述 XML 布局文件中，我们使用了 CoordinatorLayout、AppBarLayout 和 Toolbar。CoordinatorLayout 支持多个子 View 之间的协作，AppBarLayout 用于实现响应滑动手势的视觉效果。
Toolbar 是通过一个 FrameLayout 放在 AppBarLayout 中的，这里我们给 Toolbar 设置了一个 id，方便后续可以在代码中找到 Toolbar 并进行修改。
2. 修改 Toolbar 样式
Toolbar 的样式可以在 styles.xml 中进行修改，如下所示：
-- -------------------- ---- ------- ------ --------------- ------------------------------------------- ----- ---------------------------------------------- ----- ------------------------------------------------------ ----- -------------------------------------------- ----- ------------------------------------------------------------------- ----- --------------------------------------------------- ----- --------------------------------------------------------- ----- -------------------------------------------------------------- ----- ------------------------------------------------------------------ ----- ----------------------------------------------- --------
这里我们修改了 Toolbar 的颜色，以及底部导航栏和状态栏的样式。同时还给 Toolbar 中的菜单项设置了颜色，方便用户使用时的操作体验。
3. 设置 Toolbar 图标
Toolbar 的中心位置通常会显示应用程序名称，左侧通常会显示一个返回箭头或者一个菜单按钮。我们可以在代码中修改图标，如下所示：
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_back);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 执行返回操作
}
});上述代码修改了 Toolbar 左侧的图标，点击后执行返回操作。
4. 设置 Toolbar 菜单
Toolbar 的右侧通常会显示菜单项，我们可以在布局文件中或者代码中添加菜单项。例如，在布局文件中添加菜单项，如下所示：
-- -------------------- ---- -------
----- ----------------------------------------------------------
----------------------------------------------------
----- -----------------------------
----------------------------------
-----------------------------------
---------------------------
----- -------------------------------
------------------------------------
-------------------------------------
---------------------------
-------注意，我们在菜单项中指定了 showAsAction 为 ifRoom，表示如果空间够就显示，否则会放到溢出菜单中。在 Activity 中使用菜单项，如下所示：
-- -------------------- ---- -------
---------
------ ------- ------------------------ ----- -
------------------------------------------- ------
------ -----
-
---------
------ ------- ------------------------------ ----- -
--- -- - -----------------
-- --- -- ----------------- -
-- ------
------ -----
- ---- -- --- -- ------------------- -
-- ------
------ -----
-
------ ----------------------------------
-上述代码实现了菜单项的点击事件，当用户点击搜索或者设置菜单项时，分别执行搜索或者设置相关操作。
5. 处理 Toolbar 滚动效果
Toolbar 可以随着用户滑动而变化，例如当用户向下滑动界面，Toolbar 会逐渐变得更小，并且会在滑倒一定位置后停在屏幕的顶部。我们可以通过监听 RecyclerView 之类的可滚动控件的滚动，实现 Toolbar 随着滚动的变化。如下所示：
-- -------------------- ---- -------
------------------------------------------- -------------------------------------- -
---------
------ ---- ---------------------------- ------------- --- --------------- -
--- ---------------- - -----------------------------------
--- ------ - --------------------
----- ----- - ------- - --------------- - ------- ------- - ------ - ---
------------------------
------------------------------------------------------------------------------------- --------
-
---
------- --- --------------- ------ ----- ------- -
--- ----- - ----------------------------- - --------
--- --- - -----------------
--- ----- - -------------------
--- ---- - ------------------
------ ----------------- ---- ------ ------
-上述代码监听了 AppBarLayout 的滚动事件，并根据滚动的距离计算 Toolbar 的透明度，并设置背景颜色，实现了 Toolbar 随着用户滚动的效果。
结论
通过以上的介绍，我们学习了如何使用 Toolbar 来实现 Material Design 风格的应用程序。Toolbar 是 Material Design 中的重要元素之一，其作用是帮助应用程序实现一致的用户体验，提升用户的互动体验，并增加用户的可操作性。通过本文所介绍的内容，您可以深入学习 Toolbar 的应用，并开发高质量的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67036061d91dce0dc84b5cc9