Toolbar+DrawerLayout实现知乎app抽屉菜单侧边拉出并带有箭头动画效果

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说DrawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。DrawerLayout分为侧边菜单和主页面两部分，侧边菜单可以根据手势展开与隐藏（DrawerLayout自身特性），主页面的内容可以随着菜单的点击而变化。

ToolBar是Android 5.0推出的一个新的导航控件，用于取代之前的ActionBar。ToolBar实际上是一个ViewGroup，支持在其内部放入子View。

首先上传效果图：

一.实现默认的Toolbar+DrawerLayout侧边拉出效果

1.创建ZhiHUText项目，打开Android Studio中项目app目录下的buile.gradle，检查是否有v7包，如果没有，添加v7包

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.2.1'
}

2.修改系统的values目录下的styles的theme样式

需要选择NoActionBar的主题作为父类，因为要用ToolBar替换ActionBar

<resources>

    <style name="AppTheme.Base" 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>

        <!--返回键样式-->
        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>

        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <!-- 使用 API Level 22编译的話，要拿掉前綴字 -->
        <item name="windowNoTitle">true</item>
    </style>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base"></style>

    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>

</resources>

3.在values目录下打开strings.xml文件

<resources>
    <string name="app_name">ZhiHu</string>
    <string name="open">open</string>
    <string name="close">close</string>
</resources>

4.创建ToolBar标题栏的布局文件：tool_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize">

</android.support.v7.widget.Toolbar>

5.创建DrawerLayout侧滑面板的布局：custom_drawer.xml

DrawerLayout至少需要两个布局，第一个布局是主布局，就是ToolBar以下的所有位置；第二个布局为隐藏的侧边栏，主要是以ListView为主，此时的gravity="start"相当于left，代表从左边拉开

主布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单，谁是主布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--主布局，ToolBar下面的布局-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首页"
            android:textSize="30dp"
            android:textColor="@android:color/darker_gray"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

    <!--侧滑菜单，左边隐藏的布局-->
    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:background="#F5F5F5"
        android:orientation="vertical"
        android:layout_gravity="start">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="侧边栏"
            android:textSize="20sp"/>
    </LinearLayout>

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

6.在activity.xml文件中插入ToolBar布局、DrawerLayout布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              tools:context=".MainActivity">
    <!--Toolbar-->
    <include layout="@layout/tool_bar" />
    <!--DrawerLayout-->
    <include layout="@layout/custom_drawer" />
</LinearLayout>

7.在MainActivity中编写逻辑代码，显示ToolBar的抽屉按钮并添加打开关闭功能及动画

package com.example.acer.zhihutext;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {
   

    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化控件
        initView();

        // 初始化数据
        initData();
    }

    // 初始化Toolbar、DrawerLayout，生成相应的对象
    private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

    }

    // 设置应用title
    private void initData() {
        // 设置Toolbar标题，需在setSupportActionBar之前，不然会失效
        mToolbar.setTitle("首页");
        mToolbar.setTitleTextColor(Color.parseColor("#ffffff"));

        // 设置toolbar支持actionbar
        setSupportActionBar(mToolbar);

        // 实现按钮开关的显示及打开关闭功能并同步动画
        initDrawerToggle();
    }

    private void initDrawerToggle() {
        // 参数：开启抽屉的activity、DrawerLayout的对象、toolbar按钮打开关闭的对象、描述open drawer、描述close drawer
        ActionBarDrawerToggle mDrawerToggle = new