Android Material Design 中使用 NavigationView 实现侧滑菜单的详细步骤!

阅读时长 14 分钟读完

在 Android 应用开发中使用侧滑菜单是非常常见的设计模式,它可以让用户方便地访问应用的各个模块和功能。Android 5.0(API level 21)引入了 Material Design 设计语言,提供了许多新的 UI 组件和动画效果,其中 NavigationView 是一个非常重要的组件,可以实现 Android 应用中的侧滑菜单功能。

本文将介绍如何在 Android 应用中使用 NavigationView 实现侧滑菜单,并提供详细的示例代码和指导意义。

1. 添加依赖

在项目的 build.gradle 文件中添加如下依赖:

2. 布局文件

在布局文件中添加 DrawerLayout 和 NavigationView 组件,如下所示:

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

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

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

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

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

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

在布局文件中将 DrawerLayout 设置为根布局,包含两个子布局:主布局和侧滑菜单。其中 NavigationView 的 layout_gravity 属性设置为 start,表示侧滑菜单从左侧滑出。

在 NavigationView 中添加菜单项,通过设置不同的 id、icon 和 title 来实现不同的功能。

3. 初始化侧滑菜单

在 Activity 或 Fragment 中初始化侧滑菜单,如下所示:

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

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

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

在 Activity 或 Fragment 中,先获取 DrawerLayout 和 NavigationView 组件。使用 ActionBarDrawerToggle 类将 DrawerLayout 和 Toolbar(如果有)关联起来,并设置打开和关闭时的描述文字,然后将其添加到 DrawerLayout 中。最后,设置 NavigationView 的菜单项点击事件监听器,处理菜单项点击事件。

4. 处理菜单项点击事件

在 NavigationView 的 OnNavigationItemSelectedListener 中处理菜单项点击事件,如下所示:

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

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

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

根据菜单项的 id,处理不同的菜单项点击事件。最后,调用 DrawerLayout 的 closeDrawer 方法关闭侧滑菜单。

5. 示例代码

完整的示例代码如下所示:

activity_main.xml:

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

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

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

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

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

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

MainActivity.java:

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

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

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

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

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

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

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

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

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

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

-

6. 总结

通过本文的介绍,我们了解了如何在 Android 应用中使用 NavigationView 实现侧滑菜单功能。在实现过程中,需要完成以下步骤:

  • 添加依赖;
  • 修改布局文件,添加 DrawerLayout 和 NavigationView 组件;
  • 在 Activity 或 Fragment 中初始化侧滑菜单,并设置菜单项点击事件监听器;
  • 在 OnNavigationItemSelectedListener 中处理菜单项点击事件。

NavifationView 组件不仅提供了侧滑菜单的功能,还可以实现 Toolbar、TabLayout 和 ListView 等其他 UI 需求,帮助开发者快速实现 Material Design 风格的应用。

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

纠错
反馈