NavigationViewDemo【和DrawerLayout搭配使用實現側滑導航視圖界面】

版權聲明：本文爲HaiyuKing原創文章，轉載請註明出處！

前言

主要記錄NavigationView的使用，而通常狀況下NavigationView是和DrawerLayout搭配使用的，還有ToolBar。不過本Demo中沒有使用ToolBar，而是模擬ToolBar區域作了一個簡單佈局。

效果圖

代碼分析

一、使用NavigationView須要引用Design Support庫；

二、NavigationView須要用到menu和headerLayout，menu是用來在NavigationView中顯示具體的菜單項的，headerLayout則是用來在NavigationView中顯示頭部佈局的。

使用步驟

1、項目組織結構圖

注意事項：

一、  導入類文件後須要change包名以及從新import R文件路徑

二、  Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），若是項目中存在，則複製裏面的內容，不要整個覆蓋

2、導入步驟

（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

（5）將nav_drawer_menu.xml複製到項目的menu目錄中【根據實際狀況修改】

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group0">
        <item
            android:id="@+id/menu_info"
            android:icon="@drawable/nav_drawer_menu_setting"
            android:title="我的信息"/>

        <item
            android:id="@+id/menu_pwd"
            android:icon="@drawable/nav_drawer_menu_setting"
            android:title="修改密碼"/>
    </group>
    <group android:id="@+id/group1">
        <item
            android:id="@+id/menu_setting"
            android:icon="@drawable/nav_drawer_menu_setting"
            android:title="設置"/>

        <item
            android:id="@+id/menu_about"
            android:icon="@drawable/nav_drawer_menu_setting"
            android:title="關於"/>

        <item
            android:id="@+id/menu_exit"
            android:icon="@drawable/nav_drawer_menu_setting"
            android:title="退出"/>
    </group>
</menu>

nav_drawer_menu.xml

（6）在styles.xml添加如下代碼

<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>

    <!-- NavigationView的菜單項的文本樣式 -->
    <style name="nav_drawer_menu_text_style">
        <item name="android:textColor">@color/nav_drawer_menu_text_color</item>
        <item name="android:textSize">16sp</item>
        <item name="android:padding">5dp</item>
    </style>

</resources>

（7）在colors.xml中添加如下代碼

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <!-- NavigationView的菜單項的文本顏色 -->
    <color name="nav_drawer_menu_text_color">#434343</color>
</resources>

（8）添加用到的資源圖片【這裏添加的是demo中使用到的，根據實際狀況添加合適的圖片資源】

3、使用方法

package com.why.project.navigationviewdemo;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ImageView mImgMenu;
    /**導航欄左側的側邊欄的父容器*/
    private DrawerLayout mDrawerLayout; //導航視圖
    private NavigationView mNavigationView;

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

        initViews();
        initEvents();
    }

    private void initViews() {
        mImgMenu = findViewById(R.id.img_menu);

        mDrawerLayout = findViewById(R.id.id_drawerLayout);
        mNavigationView = findViewById(R.id.nav_view);
    }

    private void initEvents() {
        //用戶圖標的點擊事件
        mImgMenu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.openDrawer(Gravity.LEFT);
            }
        });

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch(item.getItemId()){ case R.id.menu_info: Toast.makeText(MainActivity.this, "我的信息", Toast.LENGTH_SHORT).show(); break; case R.id.menu_pwd: Toast.makeText(MainActivity.this, "修改密碼", Toast.LENGTH_SHORT).show(); break; case R.id.menu_setting: Toast.makeText(MainActivity.this, "設置", Toast.LENGTH_SHORT).show(); break; case R.id.menu_about: Toast.makeText(MainActivity.this, "關於", Toast.LENGTH_SHORT).show(); break; case R.id.menu_exit: Toast.makeText(MainActivity.this, "退出", Toast.LENGTH_SHORT).show(); break; } //關閉側滑菜單
 mDrawerLayout.closeDrawers(); return true; } });
    }
}

補充

若是想要更改側邊欄的menu中圖標和文本的間距，須要在Activity中執行下面的java代碼：

mNavigationView.setItemIconPadding(getResources().getDimensionPixelOffset(R.dimen.navigation_icon_padding));//設置側邊欄圖標和文本的間距

 其中，R.dimen.navigation_icon_padding的值在dimens.xml文件中設置。

混淆配置

無

參考資料

《第一行代碼（第2版）》

Android開發筆記（一百三十三）導航視圖NavigationView

NavigationView使用簡介

Android中NavigationView的使用與相關問題解決

項目demo下載地址

https://github.com/haiyuKing/NavigationViewDemo