如何使用 Material Design 风格下的 NavigationView 实现侧滑菜单

在现代移动应用开发中，侧滑菜单已经成为标配。Material Design 是 Google 推出的一种设计语言，它提供了许多精美的控件和设计模式，其中 NavigationView 就是一种用于实现侧滑菜单的控件。本文将详细介绍如何使用 NavigationView 来构建一个 Material Design 风格的侧滑菜单，并给出示例代码和学习指南。

NavigationView 概述

NavigationView 是 Android API level 11（Android 3.0）新增的一个控件，用于实现 Material Design 风格下的侧滑菜单。它在设计上提供了清晰的界面结构，支持菜单项分组和多级菜单，也可以轻松地集成到现有的应用程序中。

主要的布局结构是，NavigationView 的子控件设置在一个 DrawerLayout 布局内，侧滑菜单使用 NavigationView 来实现，主布局区域使用 FrameLayout 来实现。这个结构非常简单，使用 NavigationView 实现侧滑菜单非常容易。

NavigationView 使用

NavigationView 是一个容器控件，我们可以使用它来添加菜单项。

下面是一个简单的示例，演示如何在 NavigationView 中添加菜单项：

<?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/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

        <menu xmlns:android="http://schemas.android.com/apk/res/android">
            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_home"
                    android:icon="@drawable/ic_home_black_24dp"
                    android:title="Home" />
                <item
                    android:id="@+id/nav_gallery"
                    android:icon="@drawable/ic_photo_library_black_24dp"
                    android:title="Gallery" />
            </group>

            <item android:title="Communicate">
                <menu>
                    <item
                        android:id="@+id/nav_share"
                        android:icon="@drawable/ic_share_black_24dp"
                        android:title="Share" />
                    <item
                        android:id="@+id/nav_send"
                        android:icon="@drawable/ic_send_black_24dp"
                        android:title="Send" />
                </menu>
            </item>
        </menu>

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

在代码中，我们创建了一个 DrawerLayout 布局作为父布局，并将 NavigationView 放到布局中。NavigationView 使用的是菜单(menu)来添加菜单项。

创建菜单项时，首先需要创建一个 menu 节点，并给它添加若干个 item 节点。对于每个 item 节点，可以设置该菜单项的 id、icon 和 title。

在 menu 节点标签上，可以设置 checkableBehavior 属性。如果要创建单选菜单，可以设置为 single；如需要创建多选菜单，则可以设置为 all。

对于需要多层级的菜单项，我们可以在一个 item 上添加一个子菜单(menu)。在菜单(menu)中可以放置任意数量的 item，形成一个多层级的菜单。

在 Activity 中加载菜单项时，我们需要调用 NavigationView 的 setNavigationItemSelectedListener 方法, 为其设置菜单监听器，并在监听器中处理菜单项的点击事件。

学习指南

要学会使用 NavigationView 构建 Material Design 风格的侧滑菜单，关键是要深入理解 NavigationView 的层级结构。

首先，在使用 NavigationView 时，需要将其添加到 DrawerLayout 布局中。其次，需要正确地编写菜单项(menu)，并将菜单添加到 NavigationView 中。

此外，我们还需要合理设置菜单项的 id、icon 和 title 等属性，以及合理设置菜单项所在的分组和级别。

最终，我们需要通过为 NavigationView 设置菜单监听器，来响应菜单项的点击事件，达到侧滑菜单的交互效果。

下面是示例代码的截屏：

示例代码

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private NavigationView navigationView;
    private Toolbar toolbar;

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

        mDrawerLayout = findViewById(R.id.drawer_layout);
        navigationView = findViewById(R.id.nav_view);
        toolbar = findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
            actionBar.setDisplayHomeAsUpEnabled(true);
        }

        navigationView.setCheckedItem(R.id.nav_home);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                switch (menuItem.getItemId()) {
                    case R.id.nav_home:
                        // 主页面
                        break;
                    case R.id.nav_gallery:
                        // 相册页面
                        break;
                    case R.id.nav_share:
                        // 分享功能
                        break;
                    case R.id.nav_send:
                        // 发送消息功能
                        break;
                }
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.backup:
                Toast.makeText(this, "You clicked Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "You clicked Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }
}

总结

使用 NavigationView 构建 Material Design 风格的侧滑菜单，不仅美观、简洁，而且易于学习和使用。在开发中，我们应该充分利用 NavigationView 提供的功能和设计模式，为用户提供更好的交互体验。

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