NavigationViewDemo【和DrawerLayout搭配使用实现侧滑导航视图界面】

前言

主要记录NavigationView的使用，而一般情况下NavigationView是和DrawerLayout搭配使用的，还有ToolBar。不过本Demo中没有使用ToolBar，而是模拟ToolBar区域做了一个简单布局。

效果图

代码分析

1、使用NavigationView需要引用Design Support库；

2、NavigationView需要用到menu和headerLayout，menu是用来在NavigationView中显示具体的菜单项的，headerLayout则是用来在NavigationView中显示头部布局的。

使用步骤

一、项目组织结构图

NavigationViewDemo【和DrawerLayout搭配使用实现侧滑导航视图界面】

注意事项：

1、导入类文件后需要change包名以及重新import R文件路径

2、 Values目录下的文件（strings.xml、dimens.xml、colors.xml等），如果项目中存在，则复制里面的内容，不要整个覆盖

二、导入步骤

（1）在build.gradle中引入design支持库【版本号跟appcompat保持一致】

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.navigationviewdemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //引入design库
    implementation 'com.android.support:design:27.1.1'
}

（2）修改styles.xml文件中的样式为NoActionBar【主要用于ToolBar，本Demo中没有使用ToolBar，而是模拟了ToolBar的区域，但是也需要设置为NoActionBar】

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

（3）参考《DrawerLayoutDemo【侧边栏（侧滑菜单）简单实现】》进行activity界面的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F4F4F4">

    <!-- 主内容视图一定要是DrawerLayout的第一个子视图【必须】 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- 模拟toolbar的左侧图标 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="vertical"
            android:gravity="center_vertical"
            android:background="#ffffff">
            <ImageView
                android:id="@+id/img_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/nav_notifications"
                android:padding="8dp"/>
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="内容区域"
            android:textSize="22sp"
            android:layout_gravity="center"/>

    </LinearLayout>

    <!-- app:headerLayout : 指定头部布局的资源文件。
        app:menu : 指定导航菜单的资源文件。
        app:itemBackground : 指定菜单项的的背景。
        app:itemTextColor : 指定菜单项的文字颜色。
        app:itemTextAppearance : 指定菜单项的文字样式。
        app:itemIconTint : 指定菜单项的图标色彩。-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:headerLayout="@layout/nav_drawer_header"
        app:menu="@menu/nav_drawer_menu"
        android:background="#ffffff"
        app:itemTextAppearance="@style/nav_drawer_menu_text_style"
        app:itemIconTint="@color/nav_drawer_menu_text_color"
        />

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

（4）将nav_drawer_header.xml复制到项目中【根据实际情况修改UI布局】

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="#F4F4F4">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/nav_headimg"
        android:layout_gravity="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="个人中心"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"/>

</LinearLayout>

nav_drawer_header.xml