Android 实战:实现 Material Design 风格的 BottomSheet

阅读时长 10 分钟读完

简介

BottomSheet 是 Material Design 设计规范中的一种交互控件,它可以从屏幕的底部弹出,提供一些操作选项,比如 “分享到社交媒体” 或者 “发送邮件” 等,用户可以选择是否进行相应的操作。

在这篇文章中,我们将会通过谷歌官方提供的 BottomSheetDialogFragment 类,实现一个 Material Design 风格的底部对话框。

实现步骤

第一步:添加依赖库

打开项目的 build.gradle 文件,向其中添加如下依赖库:

第二步:创建布局文件

在 res/layout 目录下创建一个新的布局文件,命名为 bottom_sheet_layout.xml,文件内容如下:

-- -------------------- ---- -------
------------- ----------------------------------------------------------
    -----------------------------------
    ------------------------------------
    -----------------------------------------
    ------------------------------
    -----------------------

    ---------
        --------------------------
        -----------------------------------
        ------------------------------------
        -----------------------------------------
        -----------------------------
        ---------------------------------
        ---------------------
        ----------------------
        ----------------------------------------
        ----------------------- --

    ---------
        --------------------------
        -----------------------------------
        ------------------------------------
        -----------------------------------------
        -----------------------------
        ---------------------------------
        ---------------------
        -------------------
        ----------------------------------------
        ----------------------- --

---------------

布局文件中我们创建了一个线性布局,其中包含了两个 TextView,用于模拟 BottomSheet 中的操作选项。

第三步:创建 BottomSheetDialogFragment 类

我们需要创建一个类,继承自 BottomSheetDialogFragment 类,在该类中实现 onCreateView 方法,返回我们创建的底部对话框布局。

-- -------------------- ---- -------
------ ----- ------------------- ------- ------------------------- -

    ------ ------ ------------------- ------------- -
        ------ --- ----------------------
    -

    ---------
    ------ ---- --------------------------- --------- --------- ---------- ------ ------------------- -
        ---- ---- - ---------------------------------------------- ---------- -------

        -------- ------- - ---------------------------------
        -------- ------- - ---------------------------------

        ------------------------------ ---------------------- -
            ---------
            ------ ---- ------------ -- -
                -- ----- ------
            -
        ---

        ------------------------------ ---------------------- -
            ---------
            ------ ---- ------------ -- -
                -- ----- --------
            -
        ---

        ------ -----
    -
-

在 onCreateView 方法中,我们将 LayoutInflater 对象用于加载布局文件 bottom_sheet_layout.xml,然后使用 findViewById 方法获取两个 TextView 控件,并为它们设置点击事件监听器。

第四步:调用 BottomSheetDialogFragment 类

在需要使用底部对话框的位置,使用如下代码即可调用上述的 BottomSheetDialogFragment 类:

示例代码

-- -------------------- ---- -------
-- ------------------------

------ ----- ------------------- ------- ------------------------- -

    ------ ------ ------------------- ------------- -
        ------ --- ----------------------
    -

    ---------
    ------ ---- --------------------------- --------- --------- ---------- ------ ------------------- -
        ---- ---- - ---------------------------------------------- ---------- -------

        -------- ------- - ---------------------------------
        -------- ------- - ---------------------------------

        ------------------------------ ---------------------- -
            ---------
            ------ ---- ------------ -- -
                -- ----- ------
            -
        ---

        ------------------------------ ---------------------- -
            ---------
            ------ ---- ------------ -- -
                -- ----- --------
            -
        ---

        ------ -----
    -
-
-- -------------------- ---- -------
-- -----------------

------ ----- ------------ ------- ----------------- -

    ---------
    --------- ---- --------------- ------------------- -
        -----------------------------------
        ---------------------------------------

        ------ ------------------ - -----------------------------------------
        ----------------------------------------- ---------------------- -
            ---------
            ------ ---- ------------ -- -
                ------------------- ------------------- - ----------------------------------
                ----------------------------------------------------- ------------------------------
            -
        ---
    -
-
-- -------------------- ---- -------
---- ----------------------- ---

------------- ----------------------------------------------------------
    -----------------------------------
    ------------------------------------
    -----------------------------------------
    ------------------------------
    -----------------------

    ---------
        --------------------------
        -----------------------------------
        ------------------------------------
        -----------------------------------------
        -----------------------------
        ---------------------------------
        ---------------------
        ----------------------
        ----------------------------------------
        ----------------------- --

    ---------
        --------------------------
        -----------------------------------
        ------------------------------------
        -----------------------------------------
        -----------------------------
        ---------------------------------
        ---------------------
        -------------------
        ----------------------------------------
        ----------------------- --

---------------

总结

本文中,我们通过继承 BottomSheetDialogFragment 类,创建了一个 Material Design 风格的底部对话框,并为其添加了两个操作选项。使用这种方式创建底部对话框能够使使用者获得更加良好的用户交互体验,是开发高质量 Android 应用的必备技能。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65a6182fadd4f0e0ffec1f3d

纠错
反馈