Android 實現側滑選單-design
阿新 • • 發佈：2019-01-01
google提供的Design開發包裡，有很多實用好看的新控制元件，這裡介紹下使用DrawerLayout+NavigationView實現側滑選單效果
要使用Design包，只要在專案的build.gradle中新增下依賴就好（記得更新SDK到最新版本）
dependencies {
compile 'com.android.support:design:23.4.0'
}使用起來很簡單，我們基本上只需要寫寫佈局就好了
佈局檔案
<?xml version="1.0" encoding="utf-8" ?>
<android.support.v4.widget.DrawerLayout
簡單的把NavigationView放在DrawerLayout裡，在實踐中發現個問題，只有把NavigationView控制元件放在DrawerLayout佈局最後面，NavigationView控制元件才能響應選單的點選事件，不知道大家遇到了這樣的問題嗎
app:headerLayout 設定NavigationView的頭佈局
app:menu 設定NavigationView的選單佈局
android:layout_gravity start或left把視窗隱藏到介面左邊，end或right隱藏到右邊
選單頭部navi_head佈局
<?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="match_parent"
android:background="?attr/colorPrimary"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="50dp"
android:paddingTop="50dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="zwt_UseDesignDemo"/>
</LinearLayout>
選單項menu_drawer佈局
<?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/menu_mon"
android:icon="@mipmap/ic_launcher"
android:title="Mon"/>
<item
android:id="@+id/menu_tues"
android:icon="@mipmap/ic_launcher"
android:title="Tues"/>
<item
android:id="@+id/menu_wed"
android:icon="@mipmap/ic_launcher"
android:title="Wed"/>
<item
android:id="@+id/menu_thurs"
android:icon="@mipmap/ic_launcher"
android:title="Thurs"/>
<item
android:id="@+id/menu_fri"
android:icon="@mipmap/ic_launcher"
android:title="Fri"/>
</group>
<!--二級選單-->
<item android:title="weekend">
<menu>
<item
android:id="@+id/menu_sat"
android:icon="@mipmap/ic_launcher"
android:title="Sat"/>
<item
android:id="@+id/menu_sun"
android:icon="@mipmap/ic_launcher"
android:title="Sun"/>
</menu>
</item>
</menu>圖個方便，這裡的icon我就使用的mipmap下的系統圖片，可更改成drawable下的自定義圖片
主要程式碼
/**
* DrawerLayout+NavigationView實現側滑選單
* Created by zhuwentao on 2016-08-16.
*/
public class MainActivity extends AppCompatActivity {
/** 抽屜檢視 */
private DrawerLayout mDrawerLayout;
/** 側滑選單檢視 */
private NavigationView mMenuNv;
/** 開啟側滑選單 */
private TextView mOpenMenuTv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
initListener();
}
/**
* 初始化介面
*/
private void initUI() {
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mMenuNv = (NavigationView) findViewById(R.id.nv_layout);
mOpenMenuTv = (TextView) findViewById(R.id.tv_open);
}
/**
* 初始化監聽
*/
private void initListener() {
mOpenMenuTv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 開啟側滑選單
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
// 設定側滑選單點選事件監聽
mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
selectItem(item.getItemId());
// 關閉側滑選單
mDrawerLayout.closeDrawers();
return true;
}
});
}
/**
* 響應item點選事件
* @param itemid
*/
private void selectItem(int itemid) {
switch (itemid) {
case R.id.menu_mon:
Toast.makeText(MainActivity.this, "點選Mon", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_tues:
Toast.makeText(MainActivity.this, "點選Tues", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_wed:
Toast.makeText(MainActivity.this, "點選Wed", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_thurs:
Toast.makeText(MainActivity.this, "點選Thurs", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_fri:
Toast.makeText(MainActivity.this, "點選Fri", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_sat:
Toast.makeText(MainActivity.this, "點選 Sat", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_sun:
Toast.makeText(MainActivity.this, "點選 Sun", Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}效果圖：
（1）去除滾動條
程式碼中加上下面的程式碼，傳入當前的NavigationView物件進入就能去掉滾動條啦
/**
* 不顯示滾動條
*/
private void removeNavigationViewScrollbar(NavigationView navView) {
if (navView != null) {
NavigationMenuView navigationMenuView = (NavigationMenuView) navView.getChildAt(0);
if (navigationMenuView != null) {
navigationMenuView.setVerticalScrollBarEnabled(false);
}
}
}（2）讓二級選單也有選中效果
想讓二級選單也有選中效果，網上比較流行的一個方法特別麻煩
先去掉menu佈局中group的android:checkableBehavior=”single”屬性，再給每個item新增android:checkable=”true”，最後修改NavigationView監聽的程式碼：
// 設定側滑選單點選事件監聽
mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
private MenuItem mMenuItem;
@Override
public boolean onNavigationItemSelected(MenuItem item) {
selectItem(item.getItemId());
if (mMenuItem != null) {
mMenuItem.setChecked(false);
}
item.setChecked(true);
mMenuItem = item;
// 關閉側滑選單
mDrawerLayout.closeDrawers();
return true;
}
});但實際上據我的測試，只要新增一行程式碼item.setCheckable(true)就能起到同樣的顯示效果了
不需要修改其他介面
// 設定側滑選單點選事件監聽
mMenuNv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
selectItem(item.getItemId());
item.setCheckable(true);
// 關閉側滑選單
mDrawerLayout.closeDrawers();
return true;
}
});（3）設定選單從右滑出
修改NavigationView佈局檔案中android:layout_gravity=”end”，再設定開啟時候的引數為mDrawerLayout.openDrawer(GravityCompat.END)，選單就會從右邊滑出了
（4）例項化headerLayout中的控制元件
如果我們需要使用headerLayout佈局中的控制元件該怎麼找到它呢，這裡不能直接呼叫findViewById()去找，需要使用以下方式，先獲取頭部的View，在findViewById()
View view = mMenuNv.getHeaderView(0);
ImageView mImageIv = (ImageView) view.findViewById(R.id.nv_head_image);