Material Design 中如何实现可左右滑动的 Drawer?

阅读时长 7 分钟读完

Material Design 中如何实现可左右滑动的 Drawer?

在移动端应用中,Drawer 组件是很常见的一种 UI 组件,它通常被用来放置一些常用的功能或者是一些设置选项。在 Material Design 风格中,Drawer 组件被设计成可以左右滑动的,让用户可以更方便的查看和使用里面的内容。那么在本文中就会介绍如何使用 Material Design 中的组件来实现可左右滑动的 Drawer。

基本实现方式

在 Material Design 中实现可左右滑动的 Drawer,需要用到以下两个组件:DrawerLayoutNavigationView。其中 NavigationView 组件就是 Drawer 中的主要内容区域,而 DrawerLayout 则是整个 Drawer 的容器,负责控制 Drawer 的滑动方向和状态。

在布局文件中,可以如下定义 Drawer:

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

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

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

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

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

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

可以看到,DrawerLayout 是整个布局文件中的根节点,里面包含了主内容区域和 NavigationView 组件。NavigationView 则用 layout_gravity 属性来控制它从哪个方向弹出(这里是从左边弹出)。

在代码中,可以这样来监听用户对 Drawer 的打开和关闭操作,并改变 Drawer 的状态:

完整实现方式

上面所说的实现方式只是一个基本实现方式,如果要使用 Material Design 的完整功能,需要将上面的实现方式做进一步的改进。这里介绍一种完整实现方式:

在布局文件中,可以如下定义 Drawer:

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

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

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

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

可以看到,这里使用了 include 标签来引用 main_content_layout 布局文件,这样的做法可以让代码结构更加清晰,方便管理和维护。

在代码中,需要创建一个 ActionBarDrawerToggle 对象来监听 Drawer 的状态,并在用户打开或关闭 Drawer 的时候,相应地更新 ActionBar 的状态。同时,需要添加一个菜单按钮,以便用户可以在没有 ActionBar 的情况下打开或关闭 Drawer。

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

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

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

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

最后,还可以添加一个 NavigationView.OnNavigationItemSelectedListener 监听器,以便在用户点击 Drawer 中的某个菜单项时执行相应操作:

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

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

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

总结

通过使用 Material Design 中的组件,在 Android 应用中实现可左右滑动的 Drawer 是非常简单的。只需要使用 DrawerLayoutNavigationView 组件即可实现基本功能,如果需要更多的功能,可以加入 ActionBarDrawerToggle 对象和 NavigationView.OnNavigationItemSelectedListener 监听器。虽然在某些情况下开发者可以自己实现 Drawer 组件,但是使用 Material Design 提供的组件可以减少代码的重复输入和减轻工作量,极大地提高开发效率。

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

纠错
反馈