简介
随着移动设备和应用的不断普及，如何设计一个既美观又实用的移动应用成为了许多设计师和开发者的关注焦点。Andorid Material Design 作为目前最受欢迎的设计风格之一，提供了丰富的设计元素和交互方式，是设计师和开发者们喜欢采用的一种风格。本篇文章主要介绍如何在 Android Material Design 中使用 Bottom Navigation 实现多层级菜单。
需求分析
多层级菜单是许多移动应用常见的设计，用户可以通过轻松的点击和滑动访问不同的页面。在移动设备中设计多层级菜单需要注意以下几点：
- 不宜过多，否则会降低用户体验；
- 页面切换需要快速响应，否则会让用户感到卡顿和不自然；
- 页面间的转场和变化需要和主题风格和用户预期一致。
因此我们需要找到一个解决方案，既能满足用户需求，又能与 Material Design 风格融合。Bottom Navigation 是一个适合移动设备的页面导航组件，可以提供多层级菜单并在 Material Design 面板中优雅地呈现。
实现过程
步骤一：在 build.gradle 文件中添加依赖
在 Android Studio 中打开 build.gradle 文件，将以下代码添加到 dependencies 中：
------------ -
---
-------------- -----------------------------------
---
-步骤二：在布局文件中添加 Bottom Navigation 视图
在你的布局文件中，将 Bottom Navigation 视图添加到主体内容之上，如下所示：
----- ------------- ------------------
------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
-------------------------------------
----------------------------------
-------------------------
-----------------------------------
------------------------------------
----------------------------------------
--------------------------------------------------------------
---------------------------------------------
------------
-------------------------
-----------------------------------
------------------------------------
------------------------------------------------
---------------------------------------------------
----------------------------
-----------------------------------
------------------------------------
-------------------------------
-----------------------------
--------------------------------------------------在这个布局中，我们添加了一个 AppBarLayout 和一个名为 content 的 FrameLayout 用于承载主体内容。Bottom Navigation 位于布局的底部，使用 app:menu="@menu/navigation" 引用一个名为 navigation 的菜单资源文件。
步骤三：创建菜单资源文件
在 res/menu 目录下创建一个名为 navigation.xml 的菜单资源文件，在文件中创建三个 MenuItem：
----- ------------- ------------------
----- -----------------------------------------------------------
-----
---------------------------------
-------------------------------------------
---------------------------------- --
-----
--------------------------------------
------------------------------------------------
--------------------------------------- --
-----
------------------------------------------
----------------------------------------------------
------------------------------------------- --
-------这里我们添加了三个 MenuItem，分别代表不同的页面。你可以根据自己的设计需要来调整数量和图标。
步骤四：在 MainActivity 中添加 Bottom Navigation 控制逻辑
在 MainActivity.java 中获取 Bottom Navigation 控件，然后创建一个 OnNavigationItemSelectedListener 并使用 setOnNavigationItemSelectedListener 为控件设置监听器。在监听器的 onNavigationItemSelected 方法中，我们为每个 menuItem 设定一个对应的 Fragment，然后根据用户点击的 itemId 显示对应的 Fragment。
------ ----- ------------ ------- ----------------- -
------- --------- ----------
------- -------------------- -----------
------- -------- -------------
------- -------- ------------------
------- -------- ----------------------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- - ----------------------
--------------------------
-------------------- ---------- - ------------------------------
----------------------------------------------------------------------------------
------------ - --- ---------------
----------------- - --- --------------------
--------------------- - --- ------------------------
-------------------------------------------------------------------- -----------------------
-
------- ----------------------------------------------------- ---------------------------------
- --- ------------------------------------------------------- -
---------
------ ------- --------------------------------- -------- ----- -
-------- -------- - -----
------ ------------------ -
---- ---------------------
-------- - -------------
------
---- --------------------------
-------- - ------------------
------
---- ------------------------------
-------- - ----------------------
------
-
-------------------------------------------------------------------- -------------------
------ -----
-
--
-这里我们分别为 Home、Dashboard、Notifications 三个 MenuItem 设置了对应的 Fragment，然后根据用户点击的 itemId 显示对应的 Fragment。
步骤五：创建对应的 Fragment
在项目中创建名为 HomeFragment、DashboardFragment、NotificationsFragment 的三个 Fragment，然后为每一个 Fragment 编写相应的布局文件和逻辑。
------ ----- ------------ ------- -------- -
---------
------ ---- --------------------------- --------- --------- ----------
------ ------------------- -
-- ------- --- ------ --- ---- --------
------ ---------------------------------------- ---------- -------
-
------ ------------- ------------------
--------------- ----------------------------------------------------------
-----------------------------------
-------------------------------------
---------
-----------------------------------
------------------------------------
------------------ ----------
-----------------------
--------------------------------------
-----------------在 DashboardFragment 和 NotificationsFragment 也编写类似的布局文件和代码。
结论
Bottom Navigation 是 Android Material Design 中实现多层级菜单的理想选择之一，它不仅能够提供多个页面之间的快速切换，而且还能够与 Material Design 面板的风格完美融合。通过上面的步骤，你可以很容易的在你的 Android 应用程序上添加 Bottom Navigation，并创建可定制的菜单项和页面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673174d80bc820c58238e50b