Material Design 是 Google 推出的设计语言，其目的是为了帮助开发者以及设计师提供一种关注用户体验、更人性化的产品设计风格。在 Material Design 中，弹出对话框是一种常用的交互方式。本文将重点介绍在 Material Design 中实现底部弹出对话框的方法。
常用的底部弹出对话框样式
在 Material Design 中，底部弹出对话框通常被称作 Bottom Sheet。Bottom Sheet 的设计通常有三种形式：
- 完整展开的 Bottom Sheet。此时 Bottom Sheet 会充满整个屏幕。
- 摘要展示的 Bottom Sheet。此时 Bottom Sheet 只会显示一个简要的内容摘要，用户可以点击摘要进入具体的内容界面。
- 模态展示的 Bottom Sheet。此时 Bottom Sheet 会以模态的形式展示，背景会变得半透明，用户无法在背景区域进行操作，只能对 Bottom Sheet 中的内容进行操作。
下面是三种样式的示意图：
实现底部弹出对话框的步骤
在 Material Design 中，实现底部弹出对话框的步骤如下：
- 引入 Material Design 的相关依赖。
- 定义 Bottom Sheet 的布局文件。在布局文件中，定义 Bottom Sheet 的样式以及中间的内容区域。
- 定义 Bottom Sheet 的打开和关闭方式。可以通过代码或者动画的方式来实现打开和关闭 Bottom Sheet 的效果。
- 将 Bottom Sheet 与需要触发展示 Bottom Sheet 的 View 绑定。
下面将从以上四个步骤逐一讲解。
1. 引入 Material Design 的相关依赖
在实现 Material Design 的相关组件时，我们需要在项目中引入 Material Design 的相关依赖。
- 如果您是用 Gradle 构建项目，则需要在
build.gradle文件中添加以下依赖：
dependencies {
implementation 'com.google.android.material:material:1.2.1'
}- 如果您是用 Maven 构建项目，则需要在
pom.xml文件中添加以下依赖：
<dependency> <groupId>com.google.android.material</groupId> <artifactId>material</artifactId> <version>1.2.1</version> <type>aar</type> </dependency>
2. 定义 Bottom Sheet 的布局文件
在布局文件中，我们需要定义 Bottom Sheet 的样式以及中间的内容区域。
-- -------------------- ---- -------
------------------------------------------------------------
--------------------------
-----------------------------------
------------------------------------
----------------------------
--------------------------------
-------------
------------------------------
-----------------------------------
-------------------------------------
---- ------ ---
---------------
--------------------------------------------------------------在上述代码中，我们添加了一个 BottomSheetBehavior 的容器。在容器中，我们新建了一个 LinearLayout 来存放 Bottom Sheet 中的内容。
需要注意的是，我们通过设置 app:behavior_hideable="true" 来让 Bottom Sheet 可以被隐藏，也就是点击背景可以关闭 Bottom Sheet。我们通过设置 app:behavior_peekHeight="140dp" 来让 Bottom Sheet 在未被展开时，只显示底部 140 dp。
3. 定义 Bottom Sheet 的打开和关闭方式
我们可以通过代码或者动画的方式来实现打开和关闭 Bottom Sheet 的效果。下面以代码的方式演示如何打开和关闭 Bottom Sheet。
// 定义 Bottom Sheet 的 Behavior BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetView); // 打开 Bottom Sheet bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED); // 关闭 Bottom Sheet bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
在上述代码中，我们通过定义 Bottom Sheet 的 Behavior，然后通过 bottomSheetBehavior.setState() 方法来实现打开和关闭 Bottom Sheet 的效果。其中，BottomSheetBehavior.STATE_EXPANDED 表示完全展开的 Bottom Sheet，BottomSheetBehavior.STATE_COLLAPSED 表示摘要展示的 Bottom Sheet。
4. 将 Bottom Sheet 与需要触发展示 Bottom Sheet 的 View 绑定
最后一个步骤，我们需要将 Bottom Sheet 与需要触发展示 Bottom Sheet 的 View 绑定。
-- -------------------- ---- -------
-- ------ ------ ----- - ----
---- ----------------- - ---------------------------------------
-- -- ------ ----- - --------
------------------- ------------------- - ------------------------------------------
-- - ------ ----- - ---- --
---------------------------------------- ---------------------- -
---------
------ ---- ------------ -- -
-----------------------------------------------------------------
-
---在上述代码中，我们通过定义一个需要触发 Bottom Sheet 展示的 Button，然后将 Bottom Sheet 与该 Button 绑定。在按钮点击事件中，我们通过设置 Bottom Sheet 的 Behavior，来实现 Bottom Sheet 的展示。
完整示例代码
下面是一个完整的 Material Design 底部弹出对话框的实现示例。
-- -------------------- ---- -------
------------------------------------------------------------
---------------------------------------
-----------------------------------
------------------------------------
----------------------------
--------------------------------
-------------
------------------------------
-----------------------------------
------------------------------------
-----------------------------------------
-----------------------
---------
--------------------
-----------------------
-----------------------------------
------------------------------------
------------------------------------
---------
----------------------
-----------------------
-----------------------------------
--------------------------------------
---------------
---------------------------------------------------------------- -------------------- ---- -------
-- -- ------ ----- - -------- ------ ----- - --------
---- --------------- - -----------------------------------------
------------------- ------------------- - ------------------------------------------
-- ---- ------ ----- --- ------
------ ----------------- - ---------------------------------------
-- ---------
---------------------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
-- -- ------ ----- ---
-----------------------------------------------------------------
-
---
-- -- ------ ----- ---
---------------------------------------------- ----------------------------------------- -
---------
------ ---- ----------------------- ---- ------------ --- --------- -
-- ------ ----- ----
-
---------
------ ---- ---------------- ---- ------------ ----- ------------ -
-- ------ ----- --
-
---总结
在 Material Design 中，底部弹出对话框是一种常用的交互方式。通过本文的介绍，相信大家已经掌握了如何在 Material Design 中实现底部弹出对话框的方法。在实际开发中，我们需要根据不同的需求以及设计要求来选择使用不同的 Bottom Sheet 样式，从而达到更好的用户体验效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f41e8df6b2d6eab3d420d2