Material Design 中使用 BottomSheetDialog 的技巧分享
在全球范围内，Material Design 已经成为了一种非常流行的用户界面设计风格。它为移动设备和底部工具栏提供了许多美观并且易于使用的设计，包括 BottomSheetDialog。
BottomSheetDialog可以在滑动弹出的层上显示额外的信息或者操作。这个操作模式通常用于操作列表或者表格。这篇文章将介绍如何在 Material Design 中使用 BottomSheetDialog，包括技巧、示例代码以及实用技巧。
创建 BottomSheetDialog
首先，我们需要构造一个简单的 BottomSheetDialog。在这个例子中，我们将建立一个带有两个按钮的 BottomSheetDialog 对话框，分别为 “确定” 和 “取消”：
-- -------------------- ---- -------
------ ----- -------------------------------- ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
--------------------------------------------------------------
-- -------
------ ------ - -------- ---------------------------------------------------
----------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
-- ---- ----------------- ---
----------------- ----------------- - --- ------------------
------------------
------------------------------
--
-- ----
---- --------------- - --------------------------------------------
--------------------------------------------- ------
-- --------
-------------------------------------------------
----------------------- ---------------------- -
---------
------ ---- ------------ ----- -
-- --------
----------------------------
-
---
------------------------------------------------
----------------------- ---------------------- -
---------
------ ---- ------------ ----- -
-- --------
----------------------------
-
---
-- -- -----------------
--------------------------------------------------
-------------------------
-
---
-
-代码解析：
BottomSheetDialog 对象通过提供上下文（context）和样式（style）来创建。
然后我们使用 LayoutInflater 的 from() 方法将布局文件加载到 bottomSheetView 对象中。
现在，可以将 bottomSheetView 与 dialog 关联并显示在屏幕上。显示 dialog 的代码：bottomSheetDialog.show()。
BottomSheetDialog 中可以放置任何内容，包括动态的列表、表格、文本和多媒体元素。
自定义样式
默认情况下，BottomSheetDialog 在 Design Support 库中只提供了一种样式，它可能与你的项目主题不一致。所以，我们需要自定义它的样式，让它更好看。
- 在 values/styles.xml 文件中，新增 BottomSheetDialog 样式：
<style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
<item name="android:layout_marginTop">8dp</item>
</style>- 在布局文件中，将我们的样式作为 BottomSheetDialog 的主题使用：
<android.support.design.widget.BottomSheetDialog
android:id="@+id/bottomSheetDialog"
android:theme="@style/BottomSheetDialogTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.BottomSheetDialog>- 利用在代码中上面示例传入的样式名即可。
动态操作
当我们需要在 BottomSheetDialog 中动态地添加或删除菜单项时，就需要使用 Recycler View。
Recycler View 是一种可复用的控件，可以在 ItemViewBinder 中创建。在 BottomSheetDialog 中使用 Recycler View 非常方便，可以将其与 BottomSheetDialog 的布局文件相结合。
以下是一个具有动态操作的 BottomSheetDialog 示例程序：
-- -------------------- ---- -------
------ ----- -------------------------------- ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
--------------------------------------------------------------
------ ------ - -------- ---------------------------------------------------
----------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
-- ---- ----------------- ---
----------------- ----------------- - --- ------------------
------------------
------------------------------
--
-- ----
---- --------------- - --------------------------------------------
--------------------------------------------- ------
-- ---------
-------------------------------------------------
----------------------- ---------------------- -
---------
------ ---- ------------ ----- -
----------------------------
-
---
------------------------------------------------
----------------------- ---------------------- -
---------
------ ---- ------------ ----- -
----------------------------
-
---
-- ---- -------- ---- ----- ----------------- ---
-- ----------
------------ ------------ - ------------------------------------------------
-- -- -------- ---- ---------------------------------- -------
------------------- ------------- - --- --------------------
-----------------
--
---------------------------------------------
-- ------ ------------ -
------------- ------- - --- --------------
------------------------
--- ---------
--- ---
--- ---
--- ---
-
--
---------------------------------
-- -- -----------------
--------------------------------------------------
-------------------------
-
---
-
-示例代码中，我们创建了 SampleAdapter，它是 RecyclerView.Adapter 的一个实现类。只需要在它的构造函数中加入我们的 ArrayList 即可生成 RecyclerView 中的内容。
-- -------------------- ---- -------
------ ----- ------------- ------- ---------------------------------------------- -
------- ----------------- ------
------ --------------------- -------- -------- ------ -
---------- - --- ----------------------------------
-
-- -- -------------------- ------
---------
------ ---------- ---------------------------- ------- --- --------- -
---- ---- - ----------------------------------------
---------------------------------- ------- -------
------ --- -----------------
-
---------
------ ---- --------------------------- ------- --- --------- -
-------------------------------------
-
---------
------ --- -------------- -
------ -------------
-
------ ----- ---------- ------- ----------------------- -
------- -------- --------------
------ --------------- --------- -
----------------
------------- - ------------------------------------------------
-
------ ---- --------------- ------ -
-----------------------------
-
-
-样式和布局文件位于 res/layout/menu_row_layout.xml，具体内容如下：
-- -------------------- ---- -------
----- ------------- ------------------
--------------- ----------------------------------------------------------
-----------------------------------
------------------------------------
----------------------------------------
-----------------------
---------
-------------------------------------
-----------------------------------
------------------------------------
-----------------------
---------------------------------------- --
-----------------上述示例中，我们使用 RecyclerView，它可以将动态的列表数据传递到 BottomSheetDialog 对象中。我们还为 RecyclerView 中的每个项目创建了一个 ViewHolder。在 onCreateViewHolder() 方法中，我们加载了 menu_row_layout.xml 布局文件，并在 onBindViewHolder() 中为每个项目设置相应的含义。
总结
当你需要创建一个用户界面操作时，请考虑 BottomSheetDialog。它可以帮助你在应用程序的屏幕底部显示嵌入信息、选项和其他相关的东西，同时也能帮助改进用户体验。
本文提供了 BottomSheetDialog 在 Material Design 中的详细指导和示例代码。希望这篇文章对于你理解和使用 Material Design 中的 BottomSheetDialog 有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64781578968c7c53b045ae41