随着 Android 的不断发展，越来越多的人开始注重应用的交互设计。Google 内部的 Material Design 规范不仅有助于提高应用的美观程度，而且还可以提高用户体验。Navigation Drawer 是 Material Design 的一部分，是最常见的用户交互设计。 NavigationView 是实现 Navigation Drawer 的一种方式。本文将介绍 NavigationView 的使用方法。
NavigationView 基础
NavigationView 可以用来实现左右边栏菜单的展示效果。当 用户点击侧栏某个菜单选项时，可以切换到不同的 Fragment 或 Activity 中。
NavigationView 需要放置在 DrawerLayout 中。下面是一个简单的示例代码：
-- -------------------- ---- ------- --------------------------------------- -- ------------- -- -- ---- --------------- --------------------------------------------- -- -- ---- ----------------------------------------------- -----------------------------------------展开代码
需要注意的是，NavigationView 必须包含在 DrawerLayout 中，同时要使用 Support Library 28.0.0 及以上版本。
NavigationView 通常配置了以下信息或特点：
向用户展示许多层次的页面结构。
每个项的标题和图标都代表一个可访问的目标。
使用户可以快速浏览和访问应用中的内容。
用颜色、形状、图标和文本来增强内容和层次。
支持主题切换。
下面的代码片段显示如何配置 NavigationView 元素：
-- -------------------- ---- ------- --------------------------------------------- --------------------------------- ----------------------------------- ------------------------------------ ------------------------------ ----------------------------------------- ------------------------------------------- -------------------------------------------- ------------------------------------- ------------------------- - -----------------------------------------------展开代码
其中：
id是这个 NavigationView 对象的唯一标识符。layout_width和layout_height视需求而定。layout_gravity设置此元素的 Gravity 属性。此处的属性值是start，使导航视图左对齐。background是导航视图的背景色。itemIconTint和itemTextColor设置菜单项的图标和文本的颜色状态列表。headerLayout属性设置了 NavigationView 的头项布局。menu设置了导航视图中的菜单项，需加载在 res/menu 路径下的 XML 文件。
如何呈现 NavigationView
这里指导如何呈现NavigationView。首先，在布局文件中定义NavigationView 元素。
-- -------------------- ---- ------- ----- ------------- ------------------ ------------- ---------------------------------------------------------- ------------------------------- ----------------------------------- ------------------------------------ ------------------------------- --------------------------------------- ------------------------------- ----------------------------------- ------------------------------------ - ------------ ------------------------------- ----------------------------------- ------------------------------------ -- --------- ----------------------------- ---------------------------- ------------------------------------ ------------------------------ --------------------------------- -------------------------------------------- --------------------------- ------------------------------ ----------------------------------------- ---------------展开代码
其次，在 MainActivity 中初始化 DrawerLayout 及 NavigationView。
-- -------------------- ---- ------- ------ ----- ------------ ------- ----------------- - ------- ------- -------- ------- ------------ ------------- ------- -------------- --------------- ------- -------- ------------ --------- --------- ---- --------------- ------------------- - ----------------------------------- --------------------------------------- ------- - --------- --------------------------- ----------------------------- ------------------------------------------------------ ------------ - -------------- --------------------------------- -------------- - ---------------- ----------------------------------- ----------------------------------- - ------- ---- --------------------------------- --------------- - ------------------------------------------------- --- ------------------------------------------------- - --------- ------ ------- --------------------------------- --------- - --------------------------- ------ ----- - --- - ------ ---- ------------------------- --------- - ---------------------------- - ---- ------------------------- ---------------------------------------------- ---------------------------- --- ----------------- ---------- ------ ---- -------------------------- ---------------------------------------------- ---------------------------- --- ------------------ ---------- ------ ---- ------------------- --- - -------------------------- ------------------------------ ---------------------------- - --------- ------ ------- ------------------------------ ----- - ------ ------------------ - ---- ------------------ --------------------------------------------- -------------------------------- ------ ----- - ------ ---------------------------------- - -展开代码
其中，
- 通过调用 setSupportActionBar() 方法将 Toolbar 设置到当前 Activity 中。
- 调用 findViewById() 方法找到了 DrawerLayout 和 NavigationView。
- 调用setNavigationItemSelectedListener为 NavigationView 绑定了监听器。
- 通过replace() 方法将我们想要的 Fragment 替换为 content_frame 中的内容。
- 通过 setTitle() 将主页面的标题设置为选定的项目的标题。
最后，创建menu.xml文件
-- -------------------- ---- ------- ----- ----------------------------------------------------------- ------ ----------------------------------- ----- ------------------------------------- ------------------------------------------------- -------------------------------------------- -- ----- -------------------------------------- ---------------------------------------------------- --------------------------------------------- -- -------- ----- ---------------------------- ------ ----- --------------------------- -------------------------------------------- --------------------- -- ----- -------------------------- ------------------------------------------- -------------------- -- ------- ------- -------展开代码
在上述代码中，group 标签和了两个可点击菜单项用来代替 mainpage activity 内容块之下的UI控件。
结论
在本文中，我们学习了如何使用 NavigationView 来呈现标准 Navigation Drawer UI 设计。重要的是，NavigationView 必须包含在 DrawerLayout 中，它允许我们访问其他片段或活动。NavigationView 可以包含一个标题栏，一个头部信息区域和一个主体区域，用于显示菜单项。
以上就是 NavigationView 的使用方法。NavigationView 可以实现应用程序的高效导航，具有清晰的 UI 界面和易于使用的布局结构。希望这篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67393953317fbffedf15b976
