DrawerLayout使用示例

一、介绍

DrawerLayout是Android官方提供的支持侧拉菜单（Navigation Drawer）的控件。该控件可以轻松地实现左右两侧的侧拉菜单，是常规Android应用的重要组成部分。在本文中，我们将详细介绍如何通过使用DrawerLayout控件来实现侧拉菜单功能。

二、基本用法

DrawerLayout实现侧拉菜单的基本组成部分如下：

• 一个主界面（即DrawerLayout的根布局）。
• 一个侧滑菜单界面（通常放在左边）。
• 一个主内容界面（通常放在右边）。

DrawerLayout的使用非常简单，只需要将菜单布局文件和主界面布局文件放在一个DrawerLayout容器中即可。

三、实现步骤

下面我们将具体介绍如何在Android应用中使用DrawerLayout控件实现侧拉菜单功能。

步骤1：添加DrawerLayout控件

在需添加侧拉菜单的布局文件中添加一个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/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.widget.DrawerLayout>

步骤2：添加侧滑菜单

在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/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <!-- 左边的菜单 -->
        <RelativeLayout
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white">
           侧拉菜单内容...
        </RelativeLayout>
        
    </android.support.v4.widget.DrawerLayout>

步骤3：添加主内容界面

在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/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <!-- 左边的菜单 -->
        <RelativeLayout
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white">
           侧拉菜单内容...
        </RelativeLayout>
        
        <!-- 主内容界面 -->
        <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">
            主内容界面...
        </LinearLayout>
        
    </android.support.v4.widget.DrawerLayout>

步骤4：设置ActionBar

使用ActionBarDrawerToggle类将DrawerLayout控件和ActionBar关联起来，实现ActionBar的显示/隐藏和打开/关闭侧滑菜单的功能。

    public class MainActivity extends Activity {
        private DrawerLayout mDrawerLayout;
        private ActionBarDrawerToggle mDrawerToggle;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
            mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
                public void onDrawerOpened(View drawerView) {
                    super.onDrawerOpened(drawerView);
                    getActionBar().setTitle(R.string.drawer_open);
                }
    
                public void onDrawerClosed(View view) {
                    super.onDrawerClosed(view);
                    getActionBar().setTitle(R.string.drawer_close);
                }
            };
            mDrawerLayout.setDrawerListener(mDrawerToggle);
    
            getActionBar().setDisplayHomeAsUpEnabled(true);
            getActionBar().setHomeButtonEnabled(true);
        }
    
        @Override
        protected void onPostCreate(Bundle savedInstanceState) {
            super.onPostCreate(savedInstanceState);
            mDrawerToggle.syncState();
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            if (mDrawerToggle.onOptionsItemSelected(item)) {
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
    }

四、常见问题解决

一、多个侧滑菜单

如果需要实现左右两侧都有菜单的效果，可以使用两个DrawerLayout组件。需要注意的是，在代码和布局文件中，两个DrawerLayout各自管理自己的侧滑菜单和主内容界面。

二、menu菜单

如果想要在侧拉栏中添加菜单项，可以使用menu菜单实现。具体实现方法是在res下新建一个menu文件夹，并在该文件夹中创建一个menu.xml文件，然后在DrawerLayout布局文件中添加如下代码：

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white"
        android:choiceMode="singleChoice"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="0.1dp" />

然后在Activity的onCreate方法中添加以下代码：

    //找到listview并设置其Adapter
    ListView listView = (ListView) findViewById(R.id.left_drawer);
    listView.setAdapter(new ArrayAdapter(this,
                          android.R.layout.simple_list_item_1,
                          mPlanetTitles));
    
    //设置listview的列表项被单击的事件处理方法
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) {
            selectItem(position);
        }
    });

  

三、禁用手势滑动

有时候，我们需要禁用手势滑动打开侧滑菜单的功能。可以通过设置setDrawerLockMode方法实现。

    //禁止手势滑动
    mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);

四、主内容界面进行透明处理

如果需要将主内容界面进行透明处理，可以在主内容界面布局文件中添加如下代码：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent" >
        ...
    </LinearLayout>

五、更改侧栏菜单的图标

如果需要更改侧栏菜单的图标，可以在ActionBarDrawerToggle类的构造函数中传入自定义的图标资源文件。

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.your_icon_res, R.string.drawer_open, R.string.drawer_close) {
        ...
    };