在移动应用开发中，侧滑菜单是一种十分常见的交互方式。而在 Material Design 中，NavigationView 和 Fragments 的配合使用，可以非常方便地实现一个漂亮的侧滑菜单。
本文将介绍如何使用 NavigationView 和 Fragments 实现一个简单的侧滑菜单。同时，我们还将了解一些这个过程中可能遇到的问题，并给出一些解决方案。
NavigationView 和 Fragments 的基础知识
在开始之前，我们先来了解一下 NavigationView 和 Fragments 的基础知识。
NavigationView
NavigationView 是 Material Design 中用于实现侧滑菜单的组件，它可以用来展示应用的各个功能模块，并提供导航和跳转。
NavigationView 最常见的用法是作为 DrawerLayout 的子 View，它通常放在布局文件的左侧。它可以包含多个 MenuItem，每个 MenuItem 都可以跳转到一个独立的页面。
Fragments
Fragment 是一种独立的 UI 单元，它可以嵌入到 Activity 中。一个 Activity 可以包含多个 Fragment，多个 Fragment 也可以组成一个 Activity。使用 Fragment 可以使应用更容易的适应不同大小的屏幕。
实现侧滑菜单的步骤
有了 NavigationView 和 Fragments 的基础知识后，我们就可以开始实现侧滑菜单了。具体步骤如下：
在布局文件中添加 DrawerLayout 和 NavigationView。
-- -------------------- ---- ------- --------------------------------------- ---------------------------------------------------------- ------------------------------- ----------------------------------- ------------------------------------- ------------ ------------------------------- ----------------------------------- -------------------------------------- --------------------------------------------- --------------------------------- ----------------------------------- ------------------------------------ ------------------------------ ---------------------------------- -----------------------------------------这里我们使用了 FrameLayout 来作为内容区域，因为我们将使用 Fragment 来展示不同的页面内容。
在代码中设置 NavigationView 的监听器。
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) { menuItem.setChecked(true); drawerLayout.closeDrawers(); return true; } });这里我们在 OnNavigationItemSelectedListener 中设置了 MenuItem 的点击事件，当 MenuItem 被点击时，将其设置为选中状态，并关闭侧滑菜单。
创建 Fragment，设置每个 MenuItem 对应的内容。
public class HomeFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_home, container, false); } }在创建 Fragment 后，需要设置它的布局文件以及其他相应的信息，这里我们只给出一个简单的例子。每个 MenuItem 对应一个 Fragment。
将选中的 MenuItem 对应的 Fragment 展示在内容区域。
FragmentManager fragmentManager = getSupportFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); fragmentTransaction.replace(R.id.content_frame, new HomeFragment()); fragmentTransaction.commit();
当 MenuItem 被点击后，我们通过 FragmentManager 将对应 Fragment 展示在内容区域。
至此，一个简单的侧滑菜单的实现就完成了。但是，在实现的过程中可能会遇到一些问题，下面我们将逐一进行解决。
解决侧滑菜单可能遇到的问题
点击 MenuItem 后 Fragment 不展示？
如果你遇到了这个问题，很有可能是忘记在 MenuItem 上设置 id 了。在 navigation_menu.xml 文件中，确保每个 MenuItem 都设置了 id，如下所示：
-- -------------------- ---- -------
----- -----------------------------------------------------------
------ -----------------------------------
-----
--------------------------
--------------------------------
-------------------- --
-----
----------------------------
----------------------------------
---------------------- --
-----
----------------------------
----------------------------------
---------------------- --
--------
-------如何添加图标和标题到 MenuItem 上？
我们可以使用 android:icon 和 android:title 属性设置图标和标题，如下所示：
-- -------------------- ---- -------
----- -----------------------------------------------------------
------ -----------------------------------
-----
--------------------------
--------------------------------
-------------------- --
-----
----------------------------
----------------------------------
---------------------- --
-----
----------------------------
----------------------------------
---------------------- --
--------
-------如何设置默认选中的 MenuItem？
为了设置默认选中的 MenuItem，我们需要在代码中将相应的 MenuItem 设置为选中状态。如下所示：
navigationView.getMenu().getItem(0).setChecked(true);
如何改变 MenuItem 被选中时的背景色？
我们可以使用 app:itemBackground 属性设置 MenuItem 被选中时的背景色。如下所示：
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemBackground="@color/colorPrimary"
app:menu="@menu/navigation_menu"/>如何改变 MenuItem 被选中时的字体颜色？
我们可以使用 app:itemTextColor 属性设置 MenuItem 被选中时的字体颜色。如下所示：
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemTextColor="@color/colorAccent"
app:menu="@menu/navigation_menu"/>示例代码
下面是一个简单的示例代码，供读者参考。
DrawerActivity.java
-- -------------------- ---- -------
------ ----- -------------- ------- ----------------- -
------- ------------ -------------
------- -------------- ---------------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
-----------------------------------------
------------ - ---------------------------------
-------------- - -----------------------------------
--------------
-- ------------------- -- ----- -
------------------------------------------------------
-
-
------- ---- ------------- -
--------------------- ------ - --- ----------------------
----- ------------- -------- --------------------- -----------------------
---------------------------------------
-------------------
---------------------------------------------------- ------------------------------------------------- -
---------
------ ------- --------------------------------- -------- --------- -
---------------------------
------ -----
-
---
-
------- ---- ------------------------- --------- -
--------------------------
-------- -------- - -----
------ ---------------------- -
---- --------------
-------- - --- ---------------
------
---- ----------------
-------- - --- -----------------
------
---- ----------------
-------- - --- -----------------
------
--------
-------- - --- ---------------
------
-
--------------- --------------- - ----------------------------
-------------------------------------------------------------- -------------------
----------------------------
-
-activity_drawer.xml
-- -------------------- ---- -------
----- ------------- ------------------
---------------------------------------
----------------------------------------------------------
---------------------------------------------------
-------------------------------
-----------------------------------
-------------------------------------
------------
-------------------------------
-----------------------------------
--------------------------------------
---------------------------------------------
---------------------------------
-----------------------------------
------------------------------------
------------------------------
----------------------------------------
--------------------------------------
----------------------------------
-----------------------------------------navigation_menu.xml
-- -------------------- ---- -------
----- ------------- ------------------
----- -----------------------------------------------------------
------ -----------------------------------
-----
--------------------------
--------------------------------
-------------------- --
-----
----------------------------
----------------------------------
---------------------- --
-----
----------------------------
----------------------------------
---------------------- --
--------
-------总结
本文介绍了如何使用 NavigationView 和 Fragments 实现侧滑菜单，并解决了一些可能遇到的问题。当然，我们还可以根据自己的需求进行更加详细和丰富的定制。希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652103ee95b1f8cacd875d89