今天我們看看NavigationView這個控件的使用方法(側滑抽屜的效果)
使用NavigationView實現抽屜效果一定跳不過DrawerLayout這個控件,但是因為不是本文得重點,但是你錯了,我也會講的...
本文的知識點:
- DrawerLayout的使用
- NavigationView的使用
DrawerLayout的使用
簡單的使用方法
- 先來說下布局文件吧!
- 首先這個控件必須有一個子類,只有子類添加了android:layout_gravity="start/end"之后才能保證側滑
- 可以左右都有側滑菜單,但是上下不可添加
所以布局一般都是這個樣子的
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.hejin.materialdesign.activity.NavigationActivity">
<!--主頁面-->
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.design.widget.CoordinatorLayout>
<!--側邊欄的頁面-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_navigation_view"
app:menu="@menu/activity_navigation_view_drawer"/>
</android.support.v4.widget.DrawerLayout>
這里可以先不要去看NavigationView的設置,這里你隨便換成一個其他控件都可以,但是layout_gravity這個屬性要有,布局基本上也就這么多,講到代碼的時候還要講一個類,后面再說
關聯ToolBar
一般使用DrawerLayout都話連同ToolBar一起使用(但是不妨礙有特例,好比我...)下面是關聯的代碼:
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDL, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
}
};
mDL.addDrawerListener(toggle);
toggle.syncState();
其實ActionBarDrawerToggle其實就是一個監聽,這么理解是不是好多了,這里一般都會重寫這三個方法,很好理解,一個打開,一個關閉,一個滑動的時候調用(我覺得這個一般都是加一些動畫的,嗯嗯嗯)
一些需要注意的地方
- 當你真的想關聯ToolBar的時候,android:layout_gravity="start/end"這個屬性一定要設置成start或者left斗則會報錯(這個我真的不知道為什么?希望知道的告知小弟一聲).
- 當你點擊左邊的側邊欄的時候,可能會存在刷新主頁面ToolBar的操作(這里我的處理方法是從新寫一遍ToolBar的設置,因為用到的是ToolBar,但是你要是使用ActionBar的話,一定要在開打或者關閉的時候調用getActivity().invalidateOptionsMenu(); 方法去刷新menu,因為menu是一直存在的)
- 還有幾個方法注意下:(我為什么要說這兩個方法呢?因為在按返回鍵的時候,你要判斷抽屜是否打開,如果是打開的情況下,要先關閉抽屜的,這樣用戶體驗才好)
- DrawerLayout.isDrawerOpen(GravityCompat.START);這個方法是判斷左邊或者右邊的抽屜是否打開的方法
- DrawerLayout.closeDrawer(GravityCompat.START);這個方法是關閉左邊或者右邊的抽屜的.
這個就是判斷返回按鈕的時候DrawerLayout是否打開的代碼了@Override public void onBackPressed() { DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); if (drawer.isDrawerOpen(GravityCompat.START)) { drawer.closeDrawer(GravityCompat.START); } else { super.onBackPressed(); } }
基本上能用到的內容我都講了一遍,我基本上就用到這么多,等到以后要是用到了別的話在進行補充!
NavigationView的使用
一般用在側滑面板上,也可以用到其他的地方,自己想吧!樣子是什么樣子的呢?就是上面一塊放頭像區域,下面是一堆條目布局,其實要是你自己想要去實現的話也是可以的,所以說這個控件沒有太多好講的
簡單的使用方法:
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_navigation_view"
app:menu="@menu/activity_navigation_view_drawer"/>
這里要說的就以下這兩個問題:
- app:headerLayout 這個是外部關聯頭像那部分的布局,其實就是一個正常的布局而已,但是我看官網的Demo上面的高度用的是@dimen/nav_header_height但是我點不進去(這個應該是一個固定高度),但是你要是使用wrap_content的話也是可以的
- app:menu 這個主要是關聯底部條目的,這個menu文件的寫法,可以參考ToolBar那篇文章,里面對這個介紹的很詳細,這里呢,只貼一下代碼吧!
<?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/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import"/>
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery"/>
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow"/>
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools"/>
</group>
<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share"/>
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send"/>
</menu>
</item>
</menu>
一些常見的問題:
1.頭像的點擊事件:
這個點擊事件沒有具體的API去直接實現,所以我們只有通過另一種方法去實現:
解決方法:動態添加head,這樣也確保了整個head中的控件都能實現點擊事件
View drawview = navigationView.inflateHeaderView(R.layout.nav_header_main);
ImageVIewhead_iv = (ImageVIew) drawview.findViewById(R.id.head_iv);
head_iv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("Log:","頭部被點擊了！");
}
2.底部menu的點擊事件:
這個相對于頭像的點擊事件就簡單多了
直接調用navigationView.setNavigationItemSelectedListener(@Nullable OnNavigationItemSelectedListener listener);這個API就可以了,在回調中區分Id就可以了(這里別忘了關閉DrawerLayout).
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {
} else if (id == R.id.nav_slideshow) {
} else if (id == R.id.nav_manage) {
} else if (id == R.id.nav_share) {
} else if (id == R.id.nav_send) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
