你们在开发中可能会遇到这样的需求，实现一个侧滑菜单，之前(long long ago)咱们都是用SlidingMenu实现的！那个时候处理策划还基本上都是本身判断滑动距离的，后来MaterialDesign的时候使用NavigationView和DrawerLayout就能很简单的实现侧滑的功能。闲话就说到这里。。。java
本文的知识点
- NavigationView和DrawerLayout实现侧滑效果(UI层面)
- 一些布局文件和API的说明
- 一些常见的错误处理
1.NavigationView和DrawerLayout实现侧滑效果(UI层)
其实若是你比较懒的话，在建立Activity的时候，你能够不选择那个空页面的Activity，而像这样选择android
这样就能够直接建立一个相应的侧滑页面，不用去本身实现了。因为本文主要是为了讲解关于怎么去实现，因此这里就本身去实现吧！bash
1.1 布局文件的实现
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimaryDark"
app:layout_constraintBottom_toTopOf="@id/dl_content"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="@mipmap/back_icon"
app:title="导航菜单的展现"
app:titleTextColor="@android:color/white" />
<android.support.v4.widget.DrawerLayout
android:id="@+id/dl_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
app:headerLayout="@layout/nav_header"
app:menu="@menu/menu_navation_drawer" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="伪装这里有内容" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
复制代码
简单说明一下：由于一会要演示返回按钮的问题，因此这里的布局是把DrawerLayout放在了Toolbar的下面，若是你直接建立的话，侧滑出来的菜单会把Toolbar盖住。app
- 这里要注意一个属性，android:layout_gravity="left" 表明侧滑的方向是从左侧出来，这里你能够左右各加一个，可是不能上下加。。。不然会出异常的！
- app:headerLayout="@layout/nav_header" NavigationView顶部显示的布局，这里主要是为了处理相应的头像什么的
- app:menu="@menu/menu_navation_drawer" Navigation底部显示的条目
别的就没有什么好说的了和其余控件的属性都差很少。ide
1.2 顶部头文件的实现
这个和写平时的布局都是同样的。没有什么区别布局
<?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="wrap_content"
android:gravity="center"
android:background="#198672"
android:minHeight="150dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:textColor="@android:color/white"
android:layout_marginTop="10dp"
android:text="伪装这里有一个标题" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:textColor="@android:color/white"
android:text="伪装这里又有一个标题" />
</LinearLayout>
复制代码
1.3 底部条目的布局
这里须要有关menu的知识了？若是你不懂能够看看我简书的Android中menu的使用集锦，这里就不讲了。。。ui
<?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="@mipmap/ic_call_white_24dp"
android:title="打电话" />
<item
android:id="@+id/nav_gallery"
android:icon="@mipmap/ic_directions_bike_white_24dp"
android:title="骑行" />
<item
android:id="@+id/nav_slideshow"
android:icon="@mipmap/ic_dialer_sip_white_24dp"
android:title="又是打电话" />
<item
android:id="@+id/nav_manage"
android:icon="@mipmap/ic_chat_bubble_outline_white_24dp"
android:title="消息" />
</group>
<item android:title="底部条目组">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@mipmap/ic_call_missed_outgoing_white_24dp"
android:title="转弯" />
<item
android:id="@+id/nav_send"
android:icon="@mipmap/ic_import_export_white_24dp"
android:title="好奇怪" />
</menu>
</item>
</menu>
复制代码
而后咱们就能够'Run' app了。。。就会看到以下惊悚的场面！！！this
2. 一些布局文件和API的说明
2.1 Navigation的一些属性
布局属性spa
- app:itemBackground 指定菜单项的的背景颜色
- app:itemTextColor 指定菜单项的文字颜色
- app:itemTextAppearance 指定菜单项的文字样式，这里引用的是一种样式有关与样式的使用能够参考
<style name="Theme.IconMenu">
<!--Menu/item attributes -->
<item name="android:itemTextAppearance">@android:style/TextAppearance.Widget.IconMenu.Item</item>
<item name="android:itemBackground">@android:drawable/menu_selector</item>
<item name="android:itemIconDisabledAlpha">?android:attr/disabledAlpha</item>
<item name="android:horizontalDivider">@android:drawable/divider_horizontal_dark</item>
<item name="android:verticalDivider">@android:drawable/divider_vertical_dark</item>
<item name="android:windowAnimationStyle">@android:style/Animation.OptionsPanel</item>
<item name="android:moreIcon">@android:drawable/ic_menu_more</item>
<item name="android:background">@null</item>
</style>
复制代码
- app:itemIconTint 指定菜单项的图标色彩
APIcode
- addHeaderView(View view) 添加一个头部，这个头部能够添加多个
- getHeaderCount() 获取头目的数量
- getHeaderView(int index) 根据索引获取头部的布局
- getItemBackground() 获取头部的背景
- getItemIconTintList() 获取条目的集合
- getItemTextColor() 获取条目的颜色
- getMenu() 获取底部的menu对象
- removeHeaderView(View view) 溢出相应的头目
- setCheckedItem(int id) 设置选择条目
- setItemBackground(Drawable itemBackground) 设置条目的背景
- setItemBackgroundResource(int resId) 设置背景图
- setItemIconTintList(ColorStateList tint) 设置图标的集合
- setItemTextAppearance(int resId) 设置图标的样式
- setItemTextColor(ColorStateList textColor) 设置条目的颜色
- setNavigationItemSelectedListener(@Nullable OnNavigationItemSelectedListener listener) 这里写监听的时候有一个注意事项，若是你设置了不得效果，请看后面的错误集锦。具体的写法就像下面这样：
NavigationView nv_left = findViewById(R.id.nv_left);
nv_left.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_camera://条目的ID
Log.e(TAG, "onNavigationItemSelected: ");
break;
}
return true;
}
});
复制代码
这里有个问题，设置了监听以后，条目会有点击效果，而且不会在关闭相应的NavigationView。若是你返回true的话，条目会有相应的选中效果，注意一下就能够了。
2.2 DrawerLayout的一些属性
API
- openDrawer(@EdgeGravity int gravity) closeDrawer(@EdgeGravity int gravity);表明打开和关闭侧滑出来的布局，可选参数为：
- Gravity.LEFT 左侧的
- Gravity.RIGHT 右侧的
- addDrawerListener(DrawerListener listener) 处理Drawer的状态的监听，这里主要有打开、关闭、状态改变的回调相应的回调写的很清楚，这里就不作过多讲解了。至于能够作什么就看你的思惟了。。。
- setDrawerLockMode(@LockMode int lockMode) 启用和禁用抽屉效果，能够调用这个方法操做相应的抽屉。有如下三种可选
- LOCK_MODE_UNLOCKED 未知
- LOCK_MODE_LOCKED_CLOSED 关闭
- LOCK_MODE_LOCKED_OPEN 打开
- getDrawerLockMode(@EdgeGravity int edgeGravity) 获取抽屉的状态
- isDrawerOpen(@EdgeGravity int drawerGravity) 判断相应的抽屉是不是打开状态
基本上的API就这么多，若是感兴趣的能够研究如下DrawerView里面提供的API。这里就很少作解释了。
3. 一些细节的页面展现问题
3.1 DrawerLayout和Toolbar联动的效果
效果大概是这个样子的：
主要是看顶部左侧的那个按钮，主要是实现这个功能。这个功能主要是依托ActionBarDrawerToggle实现的，他联动了DrawerLayout和Toolbar的关联,看一下具体的代码实现吧！
//这是带Home旋转开关按钮
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, dl_content,
toolbar,
R.string.navigation_drawer_open, R.string.navigation_drawer_close);
dl_content.addDrawerListener(toggle);
toggle.syncState();
复制代码
加上上面的代码就能够实现联动了，可是你联动的时候可能顶部的颜色是黑色的。反正我刚开始显示的时候是黑色的。那么怎么把这个东西改为白色呢？只有修改相应的主题样式了。。。像这个样子
<!-- 基类的主题添加中间那个内容 -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--toolbar小汉堡样式-->
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>
<!--设置左侧按钮的颜色-->
<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>
复制代码
3.2 处理返回按钮
其实不使用上面的方法，能够经过
isDrawerOpen(@EdgeGravity int drawerGravity)的判断处理返回按钮的逻辑问题。
4. 一些常见的问题集锦
4.1 java.lang.RuntimeException: Unable to start activity ComponentInfo异常的处理
关于这个异常，网上的说法不少，有说必须是AppCompat的主题、有说必须有windowNoTitle属性，都没有解决这个异常，最后发现若是你在主题中设置了
<item name="android:textColorSecondary">#ffffff</item>属性的话，就会报这个异常。删了就行了！
4.2 setNavigationItemSelectedListener条目监听无效的处理方法
这里处理起来挺奇葩的，你只要把NavigationView放在DrawerLayout的最后面就能够了。监听方法就会生效了。。。多是一个BUG吧(如此值汗颜)！
基本上关于两个控件的组合就这么多，若是有什么问题欢迎留言。
欢迎关注，你的支持是我最大的动力