Android 側滑選單的實現（NavigationView）
阿新 • • 發佈：2019-01-08
很早之前就像寫個android的側滑選單加入到專案中了，但是很多給的都是密密麻麻的程式碼，今天看到了簡單快速的實現方法：通過NavigationView+DrawerLayout來實現側滑選單的功能。Google I/O 2015 給大家帶來了Android Design
Support Library，對於希望做md風格的app的來說，簡直是天大的喜訊.NavigationView是是Google在5.0之後推出了NavitationView，就是我們左邊滑出來的那個選單。這個選單整體上分為兩部分，上面一部分叫做HeaderLayout，下面的那些點選項都是menu選單項，這樣的效果如果我們要自己寫肯定也能寫出來，但比較複雜，沒有必要，既然Google提供了這個控制元件，那我們當然選擇簡單的實現方式。
我們首先看一下這個最終的實現效果吧：
目前只是做了個簡單的效果，後面可以應用到不同的專案中，根據具體情況增加一些其他view控制元件。
馬上來看看是具體如何實現的吧：
1.首先要在project structure的dependence中匯入v4.design包，匯入後可以在build.grade下看到如下資訊：
compile 'com.android.support:design:25.2.0'
2.使用NavigationView
首先在主佈局檔案中使用DrawerLayout作為外包裝，裡面包含一個主頁面和側滑的選單頁面，而側滑選單頁面用NavigationView實現：
activity_main.layout：
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_na" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=以上可以這樣理解，drawerLayout中包含了主頁面和側滑的選單頁面，具體DrawerLayout用法參考官方文件。"com.app.ui.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/blue_700" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/main_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/mm" android:background="@color/blue_700" android:layout_margin="20dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="旅行者說" android:textColor="#ffffff" android:textSize="20sp" android:layout_marginLeft="16dp"/> <ImageView android:id="@+id/search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/three" android:background="@color/blue_700" android:layout_margin="20dp"/> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="主頁" android:textSize="22sp" android:gravity="center"/> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/nav" android:layout_gravity="left" android:layout_width="wrap_content" android:layout_height="match_parent" android:fitsSystemWindows="true" xmlns:app="http://schemas.android.com/apk/res-auto" app:headerLayout="@layout/head" app:menu="@menu/new_menu" > </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>
我們可以看到
app:headerLayout="@layout/head" app:menu="@menu/new_menu"
這兩個屬性，它們分別表示頭部的佈局（也就是選單的頭部）和menu選單，前者是佈局檔案而後者是選單檔案
來看下它們的具體內容：
首先是頭佈局：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="@color/blue_500"> <ImageView android:id="@+id/person" android:layout_width="72dp" android:layout_height="72dp" android:layout_marginTop="42dp" android:src="@mipmap/lufei"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:layout_marginTop="24dp" android:textColor="#ffffff" android:text="沐風"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:layout_marginTop="12dp" android:textColor="#ffffff" android:layout_marginBottom="18dp" android:text="人生像一場沒有盡頭的旅行."/> </LinearLayout>頭佈局內容很簡單，只包含一張圖片和兩個textview
接下來是選單menu：
<?xml version="1.0" encoding="UTF-8" ?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/favorite" android:icon="@mipmap/v" android:checkable="true" android:title=" 會員"/> </group> <item android:id="@+id/wallet" android:icon="@mipmap/wa" android:title=" 錢包"/> <item android:id="@+id/photo" android:icon="@mipmap/photo" android:title=" 相簿"/> <item android:id="@+id/dress" android:icon="@mipmap/dress1" android:title=" 裝扮"/> <item android:id="@+id/file" android:icon="@mipmap/file" android:title=" 檔案"/> </menu>menu裡包含了各個選單項，每個選單項可以設定icon和title以及點選狀態，關於menu的具體用法參考網上的文章：
http://blog.csdn.net/yuzhongchun/article/details/8956256
http://blog.csdn.net/a600423444/article/details/7417613
下面基本工作做完了，就到activity裡去設定一下點選事件吧：
public class MainActivity extends Activity implements View.OnClickListener { private DrawerLayout drawerLayout; private SystemBarTintManager tintManager; private NavigationView navigationView; ImageView menu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initWindow(); drawerLayout = (DrawerLayout) findViewById(R.id.activity_na); navigationView = (NavigationView) findViewById(R.id.nav); menu= (ImageView) findViewById(R.id.main_menu); View headerView = navigationView.getHeaderView(0);//獲取頭佈局 menu.setOnClickListener(this); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { //item.setChecked(true); Toast.makeText(MainActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show(); drawerLayout.closeDrawer(navigationView); return true; } }); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.main_menu://點選選單，跳出側滑選單 if (drawerLayout.isDrawerOpen(navigationView)){ drawerLayout.closeDrawer(navigationView); }else{ drawerLayout.openDrawer(navigationView); } break; } } private void initWindow() {//初始化視窗屬性，讓狀態列和導航欄透明 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); tintManager = new SystemBarTintManager(this); int statusColor = Color.parseColor("#1976d2"); tintManager.setStatusBarTintColor(statusColor); tintManager.setStatusBarTintEnabled(true); } } }側滑選單不僅通過手指滑動來實現，還可以通過主頁面的選單鍵點選的實現，詳情看上面程式碼，可以為選單項設定點選事件，通過
setNavigationItemSelectedListener
來實現，以上的此外，側滑選單頭佈局也可以設定點選事件，通過View head=navigtionview.getHeaderView實現，這裡的點選事件我沒有寫，這裡我還將狀態列的顏色改成了標題欄的顏色，達到整體的介面協調。具體實現方法可以參考文章http://blog.csdn.net/s1674521/article/details/59480114
3.思考如何關閉手勢滑動？
NavigationView的確沒有相關關閉側滑手勢的屬性，但是別忘了，drawerLayout卻可以，通過以下屬性可以關閉滑動手勢操作：
在android抽屜開發中，需要關閉手勢滑動，來滑出彈出框
mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);//關閉手勢滑動 mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);//開啟手勢滑動記錄到這就差不多了，其他具體功能可以根據需要自己新增，可以多看看官方md控制元件和規範，在後面的時間裡，我還回不定時記錄這些比較炫酷，優美的介面學習。
補充：本文僅作記錄和供大家借鑑，說明有誤或者不足改進之處希望大家提出並改正，謝謝。