Material Design 实战之 NavigationView 完美实现

简介

NavigationView 是 Material Design 中常用的侧滑菜单控件，可以为应用提供优秀的用户体验。本文将介绍 NavigationView 的具体实现方法，包括基本布局、样式、事件等方面的内容，并附带示例代码。

基本布局

NavigationView 的基本布局是由 DrawerLayout 和 NavigationView 两个控件组成的。

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主内容区域 -->
    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 侧滑菜单区域 -->
    <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:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

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

其中，DrawerLayout 是一个可以让主内容区域和侧滑菜单区域相互交互的布局控件。NavigationView 则是侧滑菜单的主要控件，通过设置 app:headerLayout 和 app:menu 属性来分别设置头部布局和菜单项。

样式设置

NavigationView 的样式设置主要通过 app:headerLayout 和 app:menu 属性来实现。其中，app:headerLayout 可以设置一个头部布局，用于显示用户信息、应用Logo等内容。

<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:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu" />

nav_header.xml 布局文件：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="@drawable/nav_header_bg">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/avatar"
        android:layout_marginTop="40dp"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/avatar"
        android:text="用户名"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

另外，app:menu 属性可以设置菜单项，通过设置不同的菜单项可以实现不同的功能。菜单项通过定义 menu.xml 文件来实现。

<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"
            android:title="首页" />
        <item
            android:id="@+id/nav_category"
            android:icon="@drawable/ic_category"
            android:title="分类" />
        <item
            android:id="@+id/nav_cart"
            android:icon="@drawable/ic_cart"
            android:title="购物车" />
        <item
            android:id="@+id/nav_setting"
            android:icon="@drawable/ic_setting"
            android:title="设置" />
    </group>
</menu>

事件处理

NavigationView 的事件处理可以通过设置 OnNavigationItemSelectedListener 来实现。

NavigationView navigationView = findViewById(R.id.navigation_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        switch (id) {
            case R.id.nav_home:
                // 处理首页点击事件
                break;
            case R.id.nav_category:
                // 处理分类点击事件
                break;
            case R.id.nav_cart:
                // 处理购物车点击事件
                break;
            case R.id.nav_setting:
                // 处理设置点击事件
                break;
        }
        return true;
    }
});

总结

本文介绍了 NavigationView 的基本布局、样式设置和事件处理等方面的内容，并附带示例代码。通过学习本文，读者可以掌握 NavigationView 的具体实现方法，并在实际开发中灵活应用。

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