今天我們看看NavigationView這個(gè)控件的使用方法(側(cè)滑抽屜的效果)
使用NavigationView實(shí)現(xiàn)抽屜效果一定跳不過(guò)DrawerLayout這個(gè)控件,但是因?yàn)椴皇潜疚牡弥攸c(diǎn),但是你錯(cuò)了,我也會(huì)講的...
本文的知識(shí)點(diǎn):
- DrawerLayout的使用
- NavigationView的使用
DrawerLayout的使用
簡(jiǎn)單的使用方法
- 先來(lái)說(shuō)下布局文件吧!
- 首先這個(gè)控件必須有一個(gè)子類,只有子類添加了android:layout_gravity="start/end"之后才能保證側(cè)滑
- 可以左右都有側(cè)滑菜單,但是上下不可添加
所以布局一般都是這個(gè)樣子的
<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">
<!--主頁(yè)面-->
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.design.widget.CoordinatorLayout>
<!--側(cè)邊欄的頁(yè)面-->
<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的設(shè)置,這里你隨便換成一個(gè)其他控件都可以,但是layout_gravity這個(gè)屬性要有,布局基本上也就這么多,講到代碼的時(shí)候還要講一個(gè)類,后面再說(shuō)
關(guān)聯(lián)ToolBar
一般使用DrawerLayout都話連同ToolBar一起使用(但是不妨礙有特例,好比我...)下面是關(guān)聯(lián)的代碼:
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();
其實(shí)ActionBarDrawerToggle其實(shí)就是一個(gè)監(jiān)聽(tīng),這么理解是不是好多了,這里一般都會(huì)重寫這三個(gè)方法,很好理解,一個(gè)打開,一個(gè)關(guān)閉,一個(gè)滑動(dòng)的時(shí)候調(diào)用(我覺(jué)得這個(gè)一般都是加一些動(dòng)畫的,嗯嗯嗯)
一些需要注意的地方
- 當(dāng)你真的想關(guān)聯(lián)ToolBar的時(shí)候,android:layout_gravity="start/end"這個(gè)屬性一定要設(shè)置成start或者left斗則會(huì)報(bào)錯(cuò)(這個(gè)我真的不知道為什么?希望知道的告知小弟一聲).
- 當(dāng)你點(diǎn)擊左邊的側(cè)邊欄的時(shí)候,可能會(huì)存在刷新主頁(yè)面ToolBar的操作(這里我的處理方法是從新寫一遍ToolBar的設(shè)置,因?yàn)橛玫降氖荰oolBar,但是你要是使用ActionBar的話,一定要在開打或者關(guān)閉的時(shí)候調(diào)用getActivity().invalidateOptionsMenu(); 方法去刷新menu,因?yàn)閙enu是一直存在的)
- 還有幾個(gè)方法注意下:(我為什么要說(shuō)這兩個(gè)方法呢?因?yàn)樵诎捶祷劓I的時(shí)候,你要判斷抽屜是否打開,如果是打開的情況下,要先關(guān)閉抽屜的,這樣用戶體驗(yàn)才好)
- DrawerLayout.isDrawerOpen(GravityCompat.START);這個(gè)方法是判斷左邊或者右邊的抽屜是否打開的方法
- DrawerLayout.closeDrawer(GravityCompat.START);這個(gè)方法是關(guān)閉左邊或者右邊的抽屜的.
這個(gè)就是判斷返回按鈕的時(shí)候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(); } }
基本上能用到的內(nèi)容我都講了一遍,我基本上就用到這么多,等到以后要是用到了別的話在進(jìn)行補(bǔ)充!
NavigationView的使用
一般用在側(cè)滑面板上,也可以用到其他的地方,自己想吧!樣子是什么樣子的呢?就是上面一塊放頭像區(qū)域,下面是一堆條目布局,其實(shí)要是你自己想要去實(shí)現(xiàn)的話也是可以的,所以說(shuō)這個(gè)控件沒(méi)有太多好講的
簡(jiǎn)單的使用方法:
<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"/>
這里要說(shuō)的就以下這兩個(gè)問(wèn)題:
- app:headerLayout 這個(gè)是外部關(guān)聯(lián)頭像那部分的布局,其實(shí)就是一個(gè)正常的布局而已,但是我看官網(wǎng)的Demo上面的高度用的是@dimen/nav_header_height但是我點(diǎn)不進(jìn)去(這個(gè)應(yīng)該是一個(gè)固定高度),但是你要是使用wrap_content的話也是可以的
- app:menu 這個(gè)主要是關(guān)聯(lián)底部條目的,這個(gè)menu文件的寫法,可以參考ToolBar那篇文章,里面對(duì)這個(gè)介紹的很詳細(xì),這里呢,只貼一下代碼吧!
<?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>
一些常見(jiàn)的問(wèn)題:
1.頭像的點(diǎn)擊事件:
這個(gè)點(diǎn)擊事件沒(méi)有具體的API去直接實(shí)現(xiàn),所以我們只有通過(guò)另一種方法去實(shí)現(xiàn):
解決方法:動(dòng)態(tài)添加head,這樣也確保了整個(gè)head中的控件都能實(shí)現(xiàn)點(diǎn)擊事件
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:","頭部被點(diǎn)擊了！");
}
2.底部menu的點(diǎn)擊事件:
這個(gè)相對(duì)于頭像的點(diǎn)擊事件就簡(jiǎn)單多了
直接調(diào)用navigationView.setNavigationItemSelectedListener(@Nullable OnNavigationItemSelectedListener listener);這個(gè)API就可以了,在回調(diào)中區(qū)分Id就可以了(這里別忘了關(guān)閉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;
}
