Bottom Sheet 是 Google 在 Material Design 中推荐的一种 UI 元素，可以提供更加自然的用户体验，它通常位于 App 的底部，可以滑动打开，展示一些跟当前内容相关的选项，起到提高 App 功能性的效果，本文将介绍 Bottom Sheet 的使用方法。
Bottom Sheet 的类型
Bottom Sheet 有两种类型，分别是 Persistent Bottom Sheet 和 Modal Bottom Sheet
Persistent Bottom Sheet
Persistent Bottom Sheet 是一种持续性的 Bottom Sheet，它会一直存在于 App 底部，不会自动关闭，通常在 App 主要功能之下使用，如图：
Modal Bottom Sheet
Modal Bottom Sheet 是一种模态 Bottom Sheet，它会覆盖在原有的页面之上，点击其他区域会自动关闭，一般用于临时性的操作，如图：
Bottom Sheet 的使用方法
在使用 Bottom Sheet 之前，我们需要引入 Material Design 的相关库，如下：
implementation 'com.google.android.material:material:x.x.x'
Persistent Bottom Sheet 的使用方法
在 layout 文件中添加 CoordinatorLayout 和 BottomSheetBehavior，此外，还需要添加一个 FrameLayout 用于放置 Bottom Sheet 中的内容，布局文件如下：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------
-----------------------------------
------------------------------------
---------------------------------
------------
------------------------------
-----------------------------------
------------------------------------
---------------------------------
----------------------------------------------------------------------------------
---- ----- ------ ----- -------------- ---
---------
-----------------------------------
------------------------------------
----------------- ------ ----- ----- --
--------------
------------------------------------------------------接下来在 Activity 或 Fragment 中实例化 BottomSheetBehavior 并将它绑定到 FrameLayout 上，绑定后就可以通过调用 BottomSheetBehavior 的 setState() 方法来打开和关闭 Bottom Sheet，如下所示：
-- -------------------- ---- -------
----- ------------ - ------------------- -
------- -------- --- -------------------- --------------------------------
-------- --- ---------------------------- -------- -
----------------------------------
--------------------------------------
------------------- - --------------------------------------
-- -- ------ ----- ------- ------------------------------------------- - --------------------
------------------------- - -----------------------------------
-- -- ------ ----- -----
------------------------------------------------- - --------------------- -
-------- --- --------------------------- ----- --------- ---- -
-- -- ---------
-
-------- --- -------------------- ----- ------------ ------ -
-- -- ---------
-
--
-
-Modal Bottom Sheet 的使用方法
在 layout 文件中添加一个 Button 用于打开 Modal Bottom Sheet，再添加一个 FrameLayout 用于放置 Modal Bottom Sheet 中的内容，布局文件如下：
-- -------------------- ---- -------
---------------
-----------------------------------
-------------------------------------
-------
----------------------------------
-----------------------------------
------------------------------------
---------------- ------ ------
------------------------------------ --
------------
------------------------------------
-----------------------------------
------------------------------------
-------------------------
----------------------------
-----------------------------
----------------------------------------------------------------------------------
---- ----- ----- ------ ----- -------------- ---
---------
-----------------------------------
------------------------------------
----------------- ----- ------ ----- ----- --
--------------
-----------------接下来在 Activity 或 Fragment 中实例化 BottomSheetBehavior 并将它绑定到 FrameLayout 上，即可通过点击 Button 来打开 Modal Bottom Sheet，如下所示：
-- -------------------- ---- -------
----- ------------ - ------------------- -
------- -------- --- -------------------- --------------------------------
-------- --- ---------------------------- -------- -
----------------------------------
--------------------------------------
------------------- - --------------------------------------------
----------------------------------- -
------------------------- - ----------------------------------
-
------------------------------------------------- - --------------------- -
-------- --- --------------------------- ----- --------- ---- -
-- -- ---------
-
-------- --- -------------------- ----- ------------ ------ -
-- -- ---------
-
--
-
-总结
本文详细介绍了 Material Design 中的 Bottom Sheet 的两种类型，以及它们的使用方法，并提供了相应的示例代码，读者可根据自己的需求进行相应的修改。Bottom Sheet 作为 Material Design 中的一个常见 UI 元素，它的使用可以帮助我们提高 App 的功能性和用户体验，建议读者加强对其的学习和运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e6d08add4f0e0ff762222