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

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

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

1. 添加依赖

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

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

2. 布局文件

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

// javascriptcn.com 代码示例
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主布局 -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 侧滑菜单 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true">

        <!-- 菜单项 -->
        <menu>
            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_home"
                    android:icon="@drawable/ic_home"
                    android:title="Home" />
                <item
                    android:id="@+id/nav_messages"
                    android:icon="@drawable/ic_messages"
                    android:title="Messages" />
                <item
                    android:id="@+id/nav_settings"
                    android:icon="@drawable/ic_settings"
                    android:title="Settings" />
            </group>
        </menu>

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

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

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

3. 初始化侧滑菜单

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

// javascriptcn.com 代码示例
DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.navigation_view);

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();

navigationView.setNavigationItemSelectedListener(
        new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                // 处理菜单项点击事件
                return true;
            }
        });

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

4. 处理菜单项点击事件

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

// javascriptcn.com 代码示例
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    int id = menuItem.getItemId();
    switch (id) {
        case R.id.nav_home:
            // 处理 Home 菜单项点击事件
            break;
        case R.id.nav_messages:
            // 处理 Messages 菜单项点击事件
            break;
        case R.id.nav_settings:
            // 处理 Settings 菜单项点击事件
            break;
    }

    // 关闭侧滑菜单
    DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
    drawerLayout.closeDrawer(GravityCompat.START);

    return true;
}

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

5. 示例代码

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

activity_main.xml：

// javascriptcn.com 代码示例
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主布局 -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 侧滑菜单 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true">

        <!-- 菜单项 -->
        <menu>
            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_home"
                    android:icon="@drawable/ic_home"
                    android:title="Home" />
                <item
                    android:id="@+id/nav_messages"
                    android:icon="@drawable/ic_messages"
                    android:title="Messages" />
                <item
                    android:id="@+id/nav_settings"
                    android:icon="@drawable/ic_settings"
                    android:title="Settings" />
            </group>
        </menu>

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

MainActivity.java：

// javascriptcn.com 代码示例
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.navigation_view);

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                        int id = menuItem.getItemId();
                        switch (id) {
                            case R.id.nav_home:
                                Toast.makeText(MainActivity.this, "Home", Toast.LENGTH_SHORT).show();
                                break;
                            case R.id.nav_messages:
                                Toast.makeText(MainActivity.this, "Messages", Toast.LENGTH_SHORT).show();
                                break;
                            case R.id.nav_settings:
                                Toast.makeText(MainActivity.this, "Settings", Toast.LENGTH_SHORT).show();
                                break;
                        }

                        DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
                        drawerLayout.closeDrawer(GravityCompat.START);

                        return true;
                    }
                });
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

}

6. 总结

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

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

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

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653381127d4982a6eb70e981