Android学习之界面篇（七）侧滑菜单的实现

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/draw_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <!--The main content view-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame">

    </FrameLayout>

    <!--The navigation view-->
    <ListView
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:id="@+id/left_drawer"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:background="#ffffcc"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp">

    </ListView>

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

To listen for drawer open and close events, call setDrawerListener() on your DrawerLayout and pass it an implementation of DrawerLayout.DrawerListener. This interface provides callbacks for drawer events such asonDrawerOpened() and onDrawerClosed().

However, rather than implementing the DrawerLayout.DrawerListener, if your activity includes the action bar, you can instead extend the ActionBarDrawerToggle class. The ActionBarDrawerToggle implementsDrawerLayout.DrawerListener so you can still override those callbacks, but it also facilitates the proper interaction behavior between the action bar icon and the navigation drawer (discussed further in the next section).

As discussed in the Navigation Drawer design guide, you should modify the contents of the action bar when the drawer is visible, such as to change the title and remove action items that are contextual to the main content. 

知识点介绍：

1.mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);

2.ActionBarDrawerToggle是 DrawerLayout.DrawerListener的具体实现类。

   1）改变android.R.id.home图标（构造方法）

   2）Drawer拉出、隐藏，带有android.R.id.home动画效果（syncState()）

   3）监听Drawer拉出、隐藏事件

3.复写ActionBarDrawerToggle的onDrawerOpended()和onDrawerClosed()以监听抽屉拉出或隐藏事件。

4.复写Activity中的onPostCreate()方法和onConfigurationChange()方法，是为了结合syncState()方法来s实现左上角图标动画的效果。当设备的y一些参数发生变化时（屏幕旋转等）就会调用onConfigurationChange方法，在方法中对ActionBarDrawerToggle进行配置。

---

在代码中实现：

（一）设置菜单被拉出时Title文字的改变

1.首先声明一个ActionBarDrawerToggle，注意是support.v7包中的（support.v4包中的已经失效）

使用v7替换v4方法请看:ActionBarDrawerToggle is Deprecated

private ActionBarDrawerToggle mDrawerToggle;

2.接着初始化ActionBarDrawerToggle，（具体参数为：ActionBarDrawerToggle(Activity activity, 

DrawerLayout drawerLayout, int openDrawerContentD

escRes, int closeDrawerContentDescRes)）并复写其中的onDrawerOpended()和onDrawerClosed()方法来实现拉出或隐藏抽屉时对Title的更改。

注：使用v7包的时候得使用getSupportActionBar()来设置Title信息

mDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,
        R.string.drawer_open,R.string.drawer_close){
    /**
     * 当抽屉被打开是执行
     * 设置抽屉被打开时的Title
     * 通过getActionBar()来改变
     * @param drawerView
     */
    @Override
    public void onDrawerOpened(View drawerView) {
        super.onDrawerOpened(drawerView);
        //BUG:此处产生空指针异常,使用getSupportActionBar()
        //getActionBar().setTitle("请选择");

        getSupportActionBar().setTitle("请选择");
        invalidateOptionsMenu();//重绘actionbar上的菜单项，会自动调用onPrepareOptionsMenu方法
    }

    /**
     * 当抽屉被关闭时执行
     * 设置抽屉被关闭时的Title
     * @param drawerView
     */
    @Override
    public void onDrawerClosed(View drawerView) {
        super.onDrawerClosed(drawerView);
        getSupportActionBar().setTitle(mTitle);
        invalidateOptionsMenu();//重绘actionbar上的菜单项
    }
};

3.给DrawerLayout添加DrawerListener。setDrawerListener以失效，使用addDrawerListener

mDrawerLayout.addDrawerListener(mDrawerToggle);

---

（二）在ActionBar上添加搜索图标

1.在res中新建menu文件夹，在其中添加main.xml，其中

android:showAsAction。

　　这个属性可接受的值有：

　　1、always：这个值会使菜单项一直显示在Action Bar上。

　　2、ifRoom：如果有足够的空间，这个值会使菜单项显示在Action Bar上。

　　3、never：这个值使菜单项永远都不出现在Action Bar上。

　　4、withText：这个值使菜单项和它的图标，菜单文本一起显示。

main.xml配置如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
  <item
      android:id="@+id/action_websearch"
      android:icon="@drawable/action_search"
      android:title="webSearch"
      app:showAsAction="ifRoom|withText"/>
</menu>

2.在MainActivity中使用onCreateOptionsMenu()来加载menu

public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main,menu);
    return true;
}

3.在执行invalidateOptionsMenu()方法时会调用onPrepareOptionsMenu(),复写此方法来实现菜单图标的显示状态。首先先获取Drawer的打开状态，当Drawer打开时菜单图标被隐藏，当Drawer关闭时显示菜单图标。即菜单图标的显示状态与Drawer的打开状态正好相反。

public boolean onPrepareOptionsMenu(Menu menu) {
    //获取Drawer的打开状态
    boolean isDrawerOpen=mDrawerLayout.isDrawerOpen(mDrawerList);
    //对menuItem的可见状态进行改变,总是跟Drawer的打开状态相反
    menu.findItem(R.id.action_websearch).setVisible(!isDrawerOpen);
    return super.onPrepareOptionsMenu(menu);
}

4.使用onOptionsItemSelected()方法来为菜单项设置点击事件。让其使用系统浏览器打开指定的网页（百度）。

public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_websearch:
            Intent intent=new Intent();
            intent.setAction("android.intent.action.VIEW");
            Uri uri=Uri.parse("http://www.baidu.com");
            intent.setData(uri);
            startActivity(intent);
            break;
    }
    return super.onOptionsItemSelected(item);
}

---

Open and Close with the App Icon

---

Users can open and close the navigation drawer with a swipe gesture from or towards the left edge of the screen, but if you‘re using the action bar, you should also allow users to open and close it by touching the app icon. And the app icon should also indicate the presence of the navigation drawer with a special icon. You can implement all this behavior by using the ActionBarDrawerToggle shown in the previous section.

To make ActionBarDrawerToggle work, create an instance of it with its constructor, which requires the following arguments:

• The Activity hosting the drawer.
• The DrawerLayout.
• A drawable resource to use as the drawer indicator.

  The standard navigation drawer icon is available in the Download the Action Bar Icon Pack.

• A String resource to describe the "open drawer" action (for accessibility).
• A String resource to describe the "close drawer" action (for accessibility).

Then, whether or not you‘ve created a subclass of ActionBarDrawerToggle as your drawer listener, you need to call upon your ActionBarDrawerToggle in a few places throughout your activity lifecycle:

我们希望使用app的图标来打开和关闭侧边栏，根据谷歌开发者文档

1.首先打开ActionBar Icon的功能

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

2.使左上角的Home-Button可用，因为左上角的Home-Button也属于menu的一种所以点击时会回调onOptionItemSelected方法。

getSupportActionBar().setHomeButtonEnabled(true);

3.在 onOptionItemSelected方法中将ActionBar上的图标与Drawer结合起来。

if (mDrawerToggle.onOptionsItemSelected(item)){
    return true;
}

4.需要将ActionDrawerToggler与DrawerLayout的状态同步 ，将ActionBarDrawerTaggler中的drawer图标，设置为ActionBar中的Home-Button的icon

public void onPostCreate(Bundle savedInstanceState, PersistableBundle persistentState) {
    super.onPostCreate(savedInstanceState, persistentState);
    mDrawerToggle.syncState();
}

5.谷歌开发者文档建议使用onConfigurationChanged方法 ，当屏幕旋转等发生Configuration变化的时候执行

public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

---

到此，我们使用谷歌开发者文档提供的DrawerLayout成功完成了侧滑菜单的开发！

项目源码下载：

https://github.com/icaruswang/DrawerLayoutUsing