今天我们看看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;
}
