Android使用DrawerLayout創建左右兩個抽屜菜單

   在android support.v4 中有一個抽屜視圖控件DrawerLayout。使用這個控件，可以生成通過在屏幕上水平滑動打開或者關閉菜單，能給用戶一個不錯的體驗效果。

   最近在項目中，設計中有用到這個效果，但是是左右兩邊都能劃出這樣的一個菜單效果。經過使用發現，在xml佈局中和代碼中，幾乎是添加添加同樣的代碼，就可以實現這種作用兩種菜單的效果。

   效果圖如下：

   左邊拉出菜單：

         右邊拉出菜單效果：

    具體的實現方法如下，結合代碼文件，跟大家分享一下：

1. 
   

   1. 主頁佈局文件：

<?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或者其他常用控件，點擊事件都不會受到影響。

   相關的代碼我添加在了附件中，感興趣的朋友，可以下載互相學習一下。