Materail Design 入门（五）—— 使用DrawerLayout实现仿qq6.0的侧滑菜单功能

本节引言：
本节给大家带来基础UI控件部分的最后一个控件：DrawerLayout，官方给我们提供的一个侧滑菜单 控件，和上一节的ViewPager一样，3.0以后引入，低版本使用它，需要v4兼容包，说到侧滑，相信 很多人都用过github上的SlidingMenu，不过好像有两个版本，一个是单独的，另一个需要依赖另一 个开源项目：ActionBarSherlock；既然Google为我们提供了这个控件，为何不用咧，而且在 Material Design设计规范中，随处可见的很多侧滑菜单的动画效果，大都可以通过Toolbar + DrawerLayout来实现~，本节我们就来探究下这个DrawerLayout的一个基本用法~还有人喜欢把他 称为抽屉控件~官方文档：DrawerLayout
1.使用的注意事项
1.主内容视图一定要是DrawerLayout的第一个子视图（主内容区的布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单，谁是主内容区；侧滑菜单的部分的布局（这里是ListView）可以设置layout_gravity属性，他表示侧滑菜单是在左边还是右边）
2.主内容视图宽度和高度需要match_parent
3.必须显示指定侧滑视图的android:layout_gravity属性 android:layout_gravity = "start"时，从左向右滑出菜单 android:layout_gravity = "end"时，从右向左滑出菜单 不推荐使用left和right!!!
侧滑视图的宽度以dp为单位，不建议超过320dp(为了总能看到一些主内容视图)
设置侧滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);

要说一点：可以结合Actionbar使用当用户点击Actionbar上的应用图标，弹出侧滑菜单！ 这里就要通过ActionBarDrawerToggle，它是DrawerLayout.DrawerListener的具体实现类， 我们可以重写ActionBarDrawerToggle的onDrawerOpened()和onDrawerClosed()以监听抽屉拉出 或隐藏事件！

mDrawerToggle = new ActionBarDrawerToggle(        this,                  /* host Activity */        mDrawerLayout,         /* DrawerLayout object */        R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */        R.string.drawer_open,  /* "open drawer" description for accessibility */        R.string.drawer_close  /* "close drawer" description for accessibility */        ) {    public void onDrawerClosed(View view) {        getActionBar().setTitle(mTitle);        invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()    }    public void onDrawerOpened(View drawerView) {        getActionBar().setTitle(mDrawerTitle);        invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()    }};mDrawerLayout.setDrawerListener(mDrawerToggle);

4.在代码中主动展开与隐藏侧边菜单。

在点击侧边菜单选项的时候我们往往需要隐藏菜单来显示整个菜单对应的内容。DrawerLayout.closeDrawer方法用于隐藏侧边菜单，DrawerLayout.openDrawer方法用于展开侧边菜单（参见第3点中的代码部分）

5.如何在菜单展开或者隐藏的时候更新activity的menu

上面的的第2点讲到DrawerLayout.DrawerListener监听展开与隐藏事件，在监听的回调方法中我们用invalidateOptionsMenu通知activity重绘menu，然后activity就有机会在onPrepareOptionsMenu方法中更新menu元素的显示与隐藏

2.使用代码示例

slidemenu_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/blue"        android:paddingLeft="@dimen/dp_20"        android:paddingRight="@dimen/dp_20"        android:paddingBottom="@dimen/dp_20"        android:paddingTop="@dimen/dp_30"        android:text="@string/nickname"        android:textColor="@color/white" />    <ListView        android:id="@+id/slidelist"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/light_blue"        android:divider="@android:color/transparent"        android:dividerHeight="0dp" /></LinearLayout>

如图：

main.xml

<?xml version="1.0" encoding="utf-8"?><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:id="@+id/drawerlayout"    android:layout_width="match_parent"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:paddingTop="@dimen/dp_20"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/gray"            android:minHeight="?attr/actionBarSize"            app:title="">            <ImageView                android:id="@+id/icon"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@mipmap/ic_launcher" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center"                android:text="首页"                android:textColor="@color/white"                android:textSize="18sp" />        </android.support.v7.widget.Toolbar>    </LinearLayout>    <include        layout="@layout/slidemenu_layout"        android:layout_width="250dp"        android:layout_height="match_parent"        android:layout_gravity="start" /></android.support.v4.widget.DrawerLayout>

如图：

MainActivity.java

package com.example.drawerlayouttest;import android.os.Bundle;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.view.Gravity;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.Window;import android.view.WindowManager;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.ListView;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private DrawerLayout drawerLayout;    private ListView slideList;    private ImageView icon;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS    );        setContentView(R.layout.main);        drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);        //drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {            @Override            public void onDrawerSlide(View drawerView, float slideOffset) {            }            @Override            public void onDrawerOpened(View drawerView) {            }            @Override            public void onDrawerClosed(View drawerView) {               // drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);            }            @Override            public void onDrawerStateChanged(int newState) {            }        });        slideList = (ListView) findViewById(R.id.slidelist);        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,                android.R.layout.simple_list_item_1,                this.getResources().getStringArray(R.array.slidemenus));        slideList.setAdapter(adapter);        slideList.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {                Toast.makeText(MainActivity.this, i + "", Toast.LENGTH_SHORT).show();                //drawerLayout.closeDrawer(Gravity.LEFT);            }        });        icon = (ImageView) findViewById(R.id.icon);        icon.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                drawerLayout.openDrawer(Gravity.LEFT);                //drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);            }        });    }}

本节案例实现了仿qq6.0的侧滑菜单效果，点击logo图片，或者向右滑动页面均可拉出侧滑菜单，每个菜单的功能在此不做描述和实现。