DrawerLayoutDemo【侧边栏（侧滑菜单）简单实现】

前言

简单实现侧边栏（侧滑菜单）效果：

点击触发打开左侧侧边栏，手势滑动关闭左侧侧边栏；
手势滑动打开右侧侧边栏，手势滑动关闭右侧侧边栏；
简单实现打开侧边栏的动画效果（透明度、移动效果）；
打开侧边栏的时候动态更改侧边栏中的数据；

效果图

DrawerLayoutDemo【侧边栏（侧滑菜单）简单实现】

代码分析

此Demo只是简单实现侧边栏的效果，目的在于可以快速的导入到项目中。至于更复杂的效果，请阅读《参考资料》

使用步骤

一、项目组织结构图

DrawerLayoutDemo【侧边栏（侧滑菜单）简单实现】

注意事项：

1、导入类文件后需要change包名以及重新import R文件路径

2、 Values目录下的文件（strings.xml、dimens.xml、colors.xml等），如果项目中存在，则复制里面的内容，不要整个覆盖

二、导入步骤

引入依赖库

在APP的build.gradle文件中添加以下代码：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.why.project.drawerlayoutdemo"
        minSdkVersion 16
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'

    //DrawerLayout侧边栏中动画效果用到的
    compile 'com.nineoldandroids:library:2.4.0'
}

在styles.xml文件中注释和添加以下代码：【主要是用于Demo中的使用自定义的顶部导航栏效果】

<resources>

    <!-- Base application theme. -->
    <!--<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        &lt;!&ndash; Customize your theme here. &ndash;&gt;
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>-->

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

三、使用方法

在Activity布局文件中使用DrawerLayout【注意下面底色标记的代码】

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主内容视图一定要是DrawerLayout的第一个子视图【必须】 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- 引入导航栏 -->
        <include
            android:id="@+id/main_navbar"
            layout="@layout/navigationbar_main" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="内容区域"
            android:textSize="22sp"
            android:layout_gravity="center"/>

    </LinearLayout>

    <!-- 左侧区域侧边栏【可选】【如果想要只有一个右侧的侧边栏，那么就只需要留一个即可,注意的是left需要换成right】 -->
    <!-- android:tag="LEFT"用于java代码中通过drawerView.getTag()判断左侧还是右侧 -->
    <fragment
        android:id="@+id/fragment_leftmenu"
        android:name="com.why.project.drawerlayoutdemo.MainMenuLeftFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:tag="LEFT" />

    <!-- 右侧区域侧边栏【可选】 -->
    <fragment
        android:id="@+id/fragment_rightmenu"
        android:name="com.why.project.drawerlayoutdemo.MainMenuRightFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:tag="Right" />

</android.support.v4.widget.DrawerLayout>

顶部菜单栏布局文件navigationbar_main.xml【布局较简单，就不展开了】

<?xml version="1.0" encoding="utf-8"?>
<!-- 首页界面的导航栏布局文件 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nav_twoversion_home"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_gravity="center"
    android:background="#3F51B5" >

    <!-- 用户侧边栏图标 -->
    <ImageView
        android:id="@+id/nav_user"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:contentDescription="@string/app_name"
        android:gravity="center"
        android:src="@drawable/nav_user" />

    <!-- 标题 -->
    <TextView
        android:id="@+id/nav_title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="@string/app_name"
        android:textColor="#ffffff"
        android:textSize="18sp" />

</RelativeLayout>

navigationbar_main.xml