Android使用DrawerLayout创建左右两个抽屉菜单

Android使用DrawerLayout创建左右两个抽屉菜单

Google自带控件侧滑菜单DrawerLayout

在Android support.v4 中有一个抽屉视图控件DrawerLayout。使用这个控件，可以生成通过在屏幕上水平滑动打开或者关闭菜单，能给用户一个不错的体验效果。

最近在项目中，设计中有用到这个效果，但是是左右两边都能划出这样的一个菜单效果。经过使用发现，在xml布局中和代码中，几乎是添加添加同样的代码，就可以实现这种作用两种菜单的效果。
效果图如下：

左边拉出菜单：
Android使用DrawerLayout创建左右两个抽屉菜单

右边拉出菜单效果：
Android使用DrawerLayout创建左右两个抽屉菜单

具体的实现方法如下，结合代码文件，跟大家分享一下：

1.

a.

主页布局文件：

<?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/main_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent" >

<RelativeLayout
android:id="@+id/main_content_frame_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent" >
<!-- 下层显示的主要内容 -->
<FrameLayout
android:id="@+id/main_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:scrollbars="vertical" >
</FrameLayout>
</RelativeLayout>
<!-- 左侧滑动栏 -->
<RelativeLayout
android:id="@+id/main_left_drawer_layout"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/transparent"
android:paddingTop="50dp" >
</RelativeLayout>
<!-- 右侧滑动栏 -->

<RelativeLayout
android:id="@+id/main_right_drawer_layout"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="@android:color/transparent"
android:paddingTop="50dp" >
</RelativeLayout>

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

如上，使用DrawerLayout需要在布局文件跟目录中引用，v4包中的DrawerLayout标签，并且宽和高，都设置为match_parent.里面framelayout用来现实菜单收起时，下层页面的布局。

而main_left_drawer_layout和main_right_drawer_layout为左右两个抽屉菜单对应的父layout，需要注意的是，在DrawerLayout中，从左侧开始使用android:layout_gravity=”start”，从右侧开始，使用 android:layout_gravity=”end”。

b.主布局代码文件：

package com.demo.drawlayout;

import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class MainFrameLayout extends FragmentActivity {

    // 抽屉菜单对象
    private ActionBarDrawerToggle drawerbar;
    public DrawerLayout drawerLayout;
    private TestFragment testFragment;
    private RelativeLayout left_menu_layout, right_xiaoxi_layout;

    private TextView text;
    @Override
    protected void onCreate(Bundle arg0) {
        super.onCreate(arg0);
        setContentView(R.layout.main_frame_activity);
        initView();
        initEvent();
    }
    public void initView(){
            testFragment = new TestFragment();
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction f_transaction = fragmentManager.beginTransaction();
            f_transaction.replace(R.id.main_content_frame_parent, testFragment);
            f_transaction.commitAllowingStateLoss();
            initLeftLayout();
            initRightLayout();

    }

    public void initLeftLayout(){

        drawerLayout = (DrawerLayout) findViewById(R.id.main_drawer_layout);

        //设置透明
        drawerLayout.setScrimColor(0x00000000);
        //左边菜单
        left_menu_layout = (RelativeLayout) findViewById(R.id.main_left_drawer_layout);
        View view2 = getLayoutInflater().inflate(R.layout.menu_layout, null);
        text=(TextView)view2.findViewById(R.id.text);
        text.setText("左边测试菜单");
        left_menu_layout.addView(view2);
    }

    public void initRightLayout(){
        //左边菜单
        right_xiaoxi_layout = (RelativeLayout) findViewById(R.id.main_right_drawer_layout);
        View view = getLayoutInflater().inflate(R.layout.xiaoxi_layout, null);
        text=(TextView)view.findViewById(R.id.text);
        text.setText("右边测试菜单");
        right_xiaoxi_layout.addView(view);
    }
    private void initEvent() {
        drawerbar = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_launcher, R.string.open, R.string.close) {
                //菜单打开
            @Override
            public void onDrawerOpened(View drawerView) {
                               super.onDrawerOpened(drawerView);

            }
                      // 菜单关闭
            @Override
            public void onDrawerClosed(View drawerView) {
                 super.onDrawerClosed(drawerView);
            }
        };
        drawerLayout.setDrawerListener(drawerbar);
    }
        //左边菜单开关事件
    public void openLeftLayout() {
        if (drawerLayout.isDrawerOpen(left_menu_layout)) {
            drawerLayout.closeDrawer(left_menu_layout);
        } else {
            drawerLayout.openDrawer(left_menu_layout);
         }
    }
     // 右边菜单开关事件
    public void openRightLayout() {
        if (drawerLayout.isDrawerOpen(right_xiaoxi_layout)) {
            drawerLayout.closeDrawer(right_xiaoxi_layout);
        } else {
            drawerLayout.openDrawer(right_xiaoxi_layout);
        }
    }
}

代码很简单，相应的地方都有注释。这里就不罗嗦了。

主要说一下：抽屉菜单的开关事件就是，把抽屉视图添加到ActionBarDrawerToggle开关中，通关它的开关事件来控制菜单的打开和关闭，同样，一个菜单需要注册一个事件，两个菜单，也是把菜单加到这个ActionBarDrawerToggle 中进行管理。它会自行处理左右两个菜单的打开和关闭，而不会出现同时打开的现象，这一点这个控件设计的还是挺棒的。

余下的工作，就是大家根据自己的需要，自己写左右菜单里面的内容和事件了。另外，以前看到一个帖子说，在DrawerLayout中使用listview，listview会无效，这个说法好像是不成立的，至少，在我们的项目中，菜单中添加listview或者其他常用控件，点击事件都不会受到影响。