NavigationViewDemo【和DrawerLayout搭配使用實現側滑導航視圖界面】
阿新 • • 發佈：2018-10-05
apk nonnull cli 中心 null margin 改密碼 r文件 lin 
版權聲明：本文為HaiyuKing原創文章，轉載請註明出處！
前言
主要記錄NavigationView的使用，而一般情況下NavigationView是和DrawerLayout搭配使用的，還有ToolBar。不過本Demo中沒有使用ToolBar，而是模擬ToolBar區域做了一個簡單布局。
效果圖
代碼分析
1、使用NavigationView需要引用Design Support庫；
2、NavigationView需要用到menu和headerLayout，menu是用來在NavigationView中顯示具體的菜單項的，headerLayout則是用來在NavigationView中顯示頭部布局的。
使用步驟
一、項目組織結構圖
註意事項：
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
（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中使用到的，根據實際情況添加合適的圖片資源】
三、使用方法
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; } }); } }
混淆配置
無
參考資料
《第一行代碼（第2版）》
Android開發筆記（一百三十三）導航視圖NavigationView
NavigationView使用簡介
項目demo下載地址
https://github.com/haiyuKing/NavigationViewDemo
NavigationViewDemo【和DrawerLayout搭配使用實現側滑導航視圖界面】