在Android support.v4 中有一個抽屜視圖控件DrawerLayout。使用這個控件，可以生成通過在屏幕上水平滑動打開或者關閉菜單，能給用戶一個不錯的體驗效果。
最近在項目中，設計中有用到這個效果，但是是左右兩邊都能劃出這樣的一個菜單效果。經過使用發現，在xml布局中和代碼中，幾乎是添加添加同樣的代碼，就可以實現這種作用兩種菜單的效果。
效果圖如下：
左邊拉出菜單：
右邊拉出菜單效果：
具體的實現方法如下，結合代碼文件，跟大家分享一下：
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或者其他常用控件，點擊事件都不會受到影響。
相關的代碼在下面的Linux公社資源網站中，感興趣的朋友，可以下載互相學習一下。
------------------------------------------分割線------------------------------------------
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2014年資料/8月/13日/Android使用DrawerLayout創建左右兩個抽屜菜單
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm
------------------------------------------分割線------------------------------------------
最簡單的Ubuntu Touch & Android 雙系統安裝方式 http://www.linuxidc.com/Linux/2014-01/94881.htm
在Nexus上實現Ubuntu和Android 4.4.2 雙啟動 http://www.linuxidc.com/Linux/2014-05/101849.htm
Ubuntu 14.04 配置 Android SDK 開發環境 http://www.linuxidc.com/Linux/2014-05/101039.htm
64位Ubuntu 11.10下Android開發環境的搭建(JDK+Eclipse+ADT+Android SDK詳細) http://www.linuxidc.com/Linux/2013-06/85303.htm
Ubuntu 14.04 x64配置Android 4.4 kitkat編譯環境的方法 http://www.linuxidc.com/Linux/2014-04/101148.htm
Ubuntu 12.10 x64 安裝 Android SDK http://www.linuxidc.com/Linux/2013-03/82005.htm
更多Android相關信息見Android 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=11
