介绍
Material Design 是由 Google 公司推出的基于材料设计的用户界面设计语言。它包含了很多诸如颜色、元素、布局等方面的设计指导，帮助开发人员为应用程序设计美观而且易用的用户界面。
其中，Toolbar 被广泛应用在各种应用程序中（例如：Google Maps，Google Drive）。它可以提供一种更加简洁明了的用户体验，可以作为应用程序中的主要导航窗口之一。
在 Material Design 风格下，折叠式 Toolbar 菜单是一种非常流行的交互模式，特别是在需要节省屏幕空间的模式下。
在本文中，我们将讨论如何使用 Material Design 风格下实现折叠式 Toolbar 菜单。我们将探讨一些实现方法，以及如何将它们应用到您的应用程序中。
实现方法
1. 基于 Navigation Drawer 实现
导航抽屉（Navigation Drawer）是 Material Design 中的另一种常用 UI 组件。它通过滑动一个抽屉菜单来显示应用程序的内容。
要实现折叠式 Toolbar 菜单，我们可以将 Navigation Drawer 与 Toolbar 组合在一起。当 Navigation Drawer 展开时，整个窗口的布局会移动。同时，Toolbar 会被压缩在一个合并的状态栏中。
当我们关闭 Navigation Drawer 时，Toolbar 将再次显示在应用程序中，并且菜单也会随之展开。
以下是一个示例实现代码：
-- -------------------- ---- -------
---------------------------------------
------------------------
-----------------------------------
-------------------------------------
-------------
-------------------------------
-----------------------------------
------------------------------------
-------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-----------------------------------------
------------
---------------------------
-----------------------------------
--------------------------------------
---------------
---------------------------------------------
----------------------------
-----------------------------------
------------------------------------
------------------------------
------------------------------------
-----------------------------------------2. 使用 CollapsingToolbarLayout 实现
CollapsingToolbarLayout 是一个非常有用的 UI 组件，它可以允许 Toolbar 在特定条件下自动折叠。
要实现折叠式 Toolbar 菜单，我们需要做的是将 CollapsingToolbarLayout 和 Toolbar 组合在一起，并将其添加到应用程序布局中。
以下是一个示例实现代码：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-------------------------
-----------------------------------
-------------------------------------
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------------------------------
--------------------------------------------------
-----------------------------
----------
-----------------------
-----------------------------------
-----------------------------
------------------------------
-------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
----------------------------------
----------------------------------------------------------
--------------------------------------------------------
---------------------------------------------
--------------------------------------------------总结
实现折叠式 Toolbar 菜单是一个非常有价值的交互模式，特别是在 Material Design 风格下。
在本文中，我们介绍了两种方法来实现这个模式：基于 Navigation Drawer，使用 CollapsingToolbarLayout。无论您选择哪种方法，只要注意细节并进行适当的调试，您都可以创建一个真正出色的折叠式 Toolbar 菜单。
希望这篇文章能对您有所帮助，并对您的 UI 设计和开发工作有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a952f48841e989477f143